wordpressのテンプレートにソーシャルボタンを直書きする時のコード
当サイトではアフィリエイトプログラムを利用して商品を紹介しています。
wordpressのプラグインでソーシャルボタンを設置できるものはいろいろあるけど、無駄なものも増えるのでなるべくプラグインを使いたくない場合はテンプレートに直書きしてしまいましょう!
今回設置するのは、facebookとtwitter、google+、はてブです。
まず、<body>の直下(header.phpなど)に、facebookとgoogle+用のコードを設置
<!--facebook script--> <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&appId=アプリID"; fjs.parentNode.insertBefore(js, fjs);}(document,'+' "script", "facebook-jssdk")); 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>
※facebook用のアプリIDの設置をお忘れなく
追記:facebookにアカウントが無い方や開発者登録をしていない方は、「&appId=アプリID」のところは削除でOKみたいです。
PR
そして、ボタンを設置したい場所(single.phpなど)に、下記のコードを設置
<ul class="social"> <li><div class="g-plusone" data-href="<?php the_permalink(); ?>" data-size="medium"></div></li> <li><div class="fb-like" data-href="<?php the_permalink(); ?>" data-send="false" data-layout="button_count" data-width="105" data-show-faces="false" data-font="arial"></div></li> <li><a href="https://twitter.com/share" class="twitter-share-button" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); echo ' | '; bloginfo(name); ?>" data-lang="ja" data-count="none">ツイート</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></li> <li><a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title(); echo ' | '; bloginfo(name); ?>" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" 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></li> </ul>
リスト系にしているので、cssで横に並べたり修正して完了!
上記の他に、流行とスマホを意識して「LINEで送る」ボタン(http://media.line.naver.jp/howto/ja/)や、evernoteのクリップボタン設置などもどうでしょうか。
ちなみにevernoteは公式のボタン設置ガイドページが行方不明なので、コードを載せておきます。
<li><script type="text/javascript" src="http://static.evernote.com/noteit.js"></script> <a href="<?php the_permalink(); ?>" onclick="Evernote.doClip({}); return false;"><img src="http://static.evernote.com/article-clipper.png" alt="Clip to Evernote" /></a></li>