wordpressのテンプレートにソーシャルボタンを直書きする時のコード

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みたいです。

そして、ボタンを設置したい場所(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>

おすすめ

  • Yoast SEO プラグインの設定画面がコンパクトになってる

    「Yoast SEOプラグイン」は多機能なSEOプラグインですが、多機能ゆえに設定項目も多いのです。 制作者もそれを分かっているのか、設定項目数を減らしてコンパクトにしようとしているようです。 ただ、いままで使っていた身 […]
  • wordpress3.8でダッシュボードの4つのエリアを2つにする

    wordpress3.8以降ダッシュボードがウィンドウサイズが1500px以上の場合、4つ区切りになりました。 ここにクライアント様に、ガイドなどを乗せたりしていたのですが、4区切りになり幅が狭くなって見にくい!という意 […]
  • wordpress+nginxにしてみました。

    そこら中でnginxを見るようになったので、そんなに凄いのかよ!ということでwordpress+nginxにしてました。 YSlowやPageRank Status(共にchrome拡張)ではあんまり数字が良くなってない […]
123...5

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Time limit is exhausted. Please reload the CAPTCHA.