プラグイン不要、ソーシャルブックマークを設置しよう!

wordpress-social-bookmark

ソーシャルブックマークとは、ユーザーにボタンをクリックしてもらうと、そのページの情報がソーシャルサイト上で公開・共有されてSEO効果が期待できるツールだ。

せっかくウェブサイトを制作するからには検索結果でも上位表示されてたくさんの人に訪問して欲しいのは当然だ。それを助けてくれるのがソーシャルブックマークだ。

注意:WP Social Bookmarking Lightを使用している場合は、WP Social Bookmarking Lightでソーシャルブックマークを設置できるので、ここで解説する作業の必要はない。”プラグインを使いたくないのでWP Social Bookmarking Lightはインストールしない”という方にはぜひ、ここで解説する方法でソーシャルブックマークを設定して欲しい。

ソーシャルブックマークを設置する

これが”ソーシャルブックマークを設置するコード“だ。

<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>

このコードを、ソーシャルブックマークを設置したいPHPファイルに追加する。

ソーシャルブックマークの位置調整をする

追加した後は、ソーシャルブックマークの位置調整も必要だ。

ソーシャルブックマークの位置調整にはstyle.cssを使用する。style.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; }

Twenty Twelveの場合

ちなみにTwenty Twelveのテーマの場合、投稿ページを表示しているのはsingle.php、固定ページを表示しているのはpage.phpだ。

そこで、それぞれ、

</div><!-- #content -->

の直前に”ソーシャルブックマークを設置するコード“を追加すると、固定ページと投稿ページの下部にソーシャルブックマークを設置する事ができる。