WordPressサイトにソーシャルボタンを横並びで設置する方法(コピペ用メモ)

WordPressサイトに小さいタイプと大きいタイプのソーシャルボタンを横並びで設置する時用のメモ書きです。そのままコピペで設置できます。

スポンサードリンク

小さいソーシャルボタンの設置

テーマファイル内(single.phpなど)で、小さいタイプのソーシャルボタンを設置したい場所に、以下のコードを追加します。


<div class="social">
 <!-- Facebook -->
 <div id="fb-root"></div>
 <script>(function(d, s, id) {
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) return;
 js = d.createElement(s); js.id = id;
 js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1";
 fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));</script>
 <div class="socialbutton facebook-button">
 <div class="fb-like" data-href="<?php the_permalink() ?>" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div>
 </div>

<!-- Twitter -->
 <div class="socialbutton twitter-button">
 <a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja" data-count="horizontal">ツイート</a>
 </div>

<!-- Hatena -->
 <div class="socialbutton hatena-button">
 <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="standard-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>

<!-- Google+ -->
 <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 class="socialbutton gplus-button">
 <div class="g-plusone" data-size="medium"></div>
 </div>

<!-- Pocket -->
 <div class="socialbutton pocket-button">
 <a data-pocket-label="pocket" data-pocket-count="horizontal" 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>
</div>

CSSは以下の通りです。


.socialbutton { float: left; margin: 0 0 15px 10px; }
.facebook-button{ min-width:70px; max-width:115px; }
.twitter-button{ min-width:87px; max-width:90px; }
.hatena-button{ min-width:80px; max-width:125px; }
.gplus-button{ min-width:50px; max-width:80px; }
.pocket-button{ min-width:60px; max-width:115px; margin: 0 0 0 -10px; }

こんな感じでそれっぽくボタンを並べることができます。

大きいソーシャルボタンの設置

小さいボタンと同様に、ソーシャルボタンを設置したい場所に以下のコードを追加します。


<div class="social">
 <!-- Facebook -->
 <div id="fb-root"></div>
 <script>(function(d, s, id) {
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) return;
 js = d.createElement(s); js.id = id;
 js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1";
 fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));</script>
 <div class="socialbutton facebook-button">
 <div class="fb-like" data-href="<?php the_permalink() ?>" data-send="false" data-layout="box_count" data-width="450" data-show-faces="false"></div>
 </div>

<!-- Twitter -->
 <div class="socialbutton twitter-button">
 <a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja" data-count="vertical">ツイート</a>
 </div>
 <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>

<!-- Hatena -->
 <div class="socialbutton hatena-button">
 <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" 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>

<!-- Google+ -->
 <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 class="socialbutton gplus-button">
 <div class="g-plusone" data-size="tall"></div>
 </div>

<!-- Pocket -->
 <div class="socialbutton pocket-button">
 <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>
</div>

CSSは以下のようにします。


.socialbutton { float: left; margin: 0 0 15px 10px; }
.facebook-button{ min-width:70px; max-width:115px; }
.twitter-button{ min-width:87px; max-width:90px; }
.hatena-button{ min-width:80px; max-width:125px; margin: 0 0 0 -5px; }
.gplus-button{ min-width:50px; max-width:80px; }
.pocket-button{ min-width:60px; max-width:115px; }

これで大きいタイプのボタンを横並びに設置できます。

あとがき

プラグインを使うのであれば、WP Social Bookmarking Lightで簡単に設置することができます。プラグインは使いたくないなーという時にぜひお試しください。

なお、ボタンのコードはWordPress用に少しカスタマイズしているので、WordPress以外のサイトに設置する場合は、ボタンの作成ページでコードを取得して差し替えてください。

そのうえで、各ボタンをsocialbuttonとxx-buttonというクラスで包括すれば、同じCSSで横並びに設置することができます。

WordPressサイトにソーシャルボタンを横並びで設置する方法(コピペ用メモ)