（記事内リンクにPR含む場合があります）

【Web制作】縦型SNSソーシャルボタンの自力設置コード！ツイッター,Facebookなど

縦型ソーシャルボタン SNS対策/SMO/RSS

縦型ソーシャルボタン

SNS（ソーシャルネットワーク）への拡散・登録のための縦型ソーシャルボタンをブログやサイトに設置する方法を共有します。標題以外にGoogle+、はてブ（はてなブックマーク）、Pocketにも対応。

ゆめぴょんです。こんちはっ(^^)/

（2013.9.27追記）今回の記事にはバージョンアップ版があります。できればそちらを参考にしてください。

SNS（ソーシャルネットワーク）の出現により、誕生から日の浅いブログやサイトも多くの人に届けることが可能になりました。少し前までは検索エンジンとメールで知らせる方法のみだったので周知に時間がかかりました。

WordPressを利用している人はプラグインを用いても簡単に設置できます（一番下参照）。ただWP Social Bookmarking Lightバージョン1.7.5では横に並べる形になります。今回はWordPress用の縦型（ボックス）も同時に紹介します。

スポンサーリンク

ツイッター/Twitterのソーシャルボタン設置方法

下のコードを張り付ければ設置可能です。Twitterボタン公式サイトでも取得できます。●●には自分のツイッターアカウントを「@」なしで入れてください。私なら「yume_pyon」です。

divタグで囲んでるのは私の趣味ですので各自の好みでulに変えてもいいと思います。width=80pxの数値を変えれば横にのばせます。

★一般サイト、ホームページ用

[html]
<div style="float:left;margin:0 16px 0 0;width:80px">
<a href="https://twitter.com/share" class="twitter-share-button" data-via="●●" data-lang="ja" data-count="vertical">ツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?’http’:’https’;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+’://platform.twitter.com/widgets.js’;fjs.parentNode.insertBefore(js,fjs);}}(document, ‘script’, ‘twitter-wjs’);</script>
</div>
[/html]

★WordPress専用。無料ブログの場合はphpの部分を変えれば使えるかも。

[html]
<div style="float:left;margin:0 16px 0 0;width:80px">
<a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="●●" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
[/html]

フェイスブック/Facebookのソーシャルボタン設置方法

下のコードを張り付ければ設置可能です。Facebookボタン公式サイトでも取得できます。

●●にはいいね！したいページのURLを入力してください。ちなみにここにFacebookページのアドレスを入力することも可能です。このブログではそうしてみました。

複数ページに同じコードで対応したい場合や、自動的にURLを取得したい場合は上の公式サイトの「URL to Like」に何も入力しない状態で、HTML5かXFBML方式でなら取得できます。

★一般サイト、ホームページ用（URLは1つに限定）

[html]
<div style="float:left">
<iframe src="//www.facebook.com/plugins/like.php?href=●●&amp;send=false&amp;layout=box_count&amp;width=90&amp;show_faces=false&amp;font=arial&amp;colorscheme=light&amp;action=like&amp;height=65" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:90px; height:65px;" allowTransparency="true"></iframe>
</div>
[/html]

★WordPress専用
上のコードの●●を「<?php the_permalink(); ?>」に置き換えるだけです。

Google+のソーシャルボタン設置方法

下のコードを張り付ければ設置可能です。HTML5用や非同期などのコードはGoogle+ボタン公式サイトで取得できます。さすがGoogle、とてもシンプルでURLも必要ありません。

★一般サイト、ホームページ用

1ページ内に複数を設置する場合は、一番最後のボタンだけは全行を、それ以外は1行目のみで結構です。

[html]
<div style="float:left"><g:plusone size="tall"></g:plusone>
<script type="text/javascript">
window.___gcfg = {lang: ‘ja’};

(function() {
var po = document.createElement(‘script’); po.type = ‘text/javascript’; po.async = true;
po.src = ‘https://apis.google.com/js/plusone.js’;
var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(po, s);
})();
</script></div>
[/html]

★WordPress専用
上コードを共通で使えるはずですが、私は上手く行かなかったので下のコードで対応しました。

[html]
<div style="float:left">
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall" href="<?php the_permalink(); ?>"></g:plusone>
</div>
[/html]

はてブ（はてなブックマーク）のソーシャルボタン設置方法

下のコードを張り付ければ設置可能です。他の形のボタンははてなブックマークボタン公式サイトで取得できます。3行目「only＠2x.png」の「＠」（アットマーク）は必ず半角に置き換えてください。

★一般サイト、ホームページ用（URL、タイトルは1つに限定）

[html]
<div style="float:left;margin:0 16px 0 0">
<a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="vertical-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加">
<img src="http://b.st-hatena.com/images/entry-button/button-only＠2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
</div>
[/html]

★WordPress専用

[html]
<div style="float:left;margin:0 16px 0 0">
<a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title(); ?>" data-hatena-bookmark-layout="vertical-balloon" title="このエントリーをはてなブックマークに追加" data-hatena-bookmark-lang="ja">
<img src="http://b.st-hatena.com/images/entry-button/button-only＠2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border:none" /></a>
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"><\/script>
</div>
[/html]

Pocketのソーシャルボタン設置方法

下のコードを張り付ければ設置可能です。3種類のボタンがPocketボタン公式サイトで取得できます。

URLもタイトルも必要ないので通常サイトもWordPressも共通コードです。data-lang=”en”になってるけど日本語でも問題ありません。バージョン番号ついてるので更新されるかもしれませんね。

★一般サイト、ホームページ、WordPressとも共通

[html]
<div style="float:left;margin:0 16px 0 0">
<a data-pocket-label="pocket" data-pocket-count="vertical" class="pocket-btn" data-lang="en"></a>
<script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>
</div>
[/html]

WordPressプラグインを利用しての設置方法は下の記事を参考にしてみてください。


ゆめぴょんでした。ちゃおっ！

タイトルとURLをコピーしました