きたけんブログ

旅と趣味と

ブログにSNSのボタンを配置

—

最近本当に出歩かない。寒いからかしら。

さてさて今日はブログにSNSの各種ボタンを配置してみたので、その方法を備忘録的に掲載します。

今回設置するのはTwitter、Facebook、Google+で、横一列に並べてみます（上図）。まずは表示する箇所に下記HTMLを入力します。Wordpressを使用する場合、[記事URL]は「esc_url(get_permalink())」に、[記事タイトル]は「$post->post_title」に置換してください。

<ul class="sns-buttons">
  <li><div class="fb-like" data-href="[記事URL]" data-layout="box_count" data-action="like" data-show-faces="true" data-share="false"></div></li>
  <li><a href="http://twitter.com/share" class="twitter-share-button" data-url="[記事URL]" data-text="[記事タイトル]" data-via="[Twitterアカウント名]" data-count="vertical" data-lang="ja">Tweet</a></li>
  <li><div class="g-plusone" data-size="tall" href="[記事URL]"></div></li>
</ul>

WordPressの場合はさらに、このHTMLを記事毎に表示する必要があるので、function.phpに以下を追加します。これで各記事ごとに呼び出されるthe__comtent関数に上述のHTMLを逐次追加できます。現在当ブログが使用しているテーマTwentyfourteenなら、直接content.phpに入力してもOK

add_filter('the_content', function($text){
  return $text.[上述HTML];
});

それぞれのボタンのデザインは下記サイトから取得できます。

Facebook

Google+

それぞれただのHTMLなので、各種ボタンに置換するJavaScriptを追加します。

Facebookを使用するときは、appIDを事前に取得しておくこと、<body>要素すぐ後に「<div id=”fb-root”></div>」という空要素を追加することが必要になります。

今回はHTML5を使用するルートでやっていますが、直接IFRAMEを使用するルートもあります。HTML5ルートでもIFRAMEに置換しているので、最終どっちを使用してもいいような気がします。

(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=[appID]";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");

window.___gcfg = {lang: 'ja'};
(function() {
  var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
  po.src = 'https://apis.google.com/js/platform.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();

WordPressにて「<div id=”fb-root”></div>」を<body>要素直下に挿入するためには、header.phpあたりに直接入力するのが一番簡単でしょうか。因みにわたしは、jQueryを駆使して、動的に挿入しています。

$("body").prepend($("<div>", {id: "fb-root"}));

最後にCSSを調整します。このままだと各ボタン前に●が表示されますので・・・。またIFRAMEに「max-width: 100%」なんて記述があると、フレームの右端が切れてしまうので、「max-width: none;」で無効化しています。

.sns-buttons {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.sns-buttons li {
  float: left;
  margin: 0 5px 0 0;
  padding: 0;
}
.sns-button li div, .sns-button li iframe {
  display: inline;
}
.sns-button:after {
  clear: both;
}
.fb-like iframe {
  max-width: none;
}

以上、こんなところ。Wordpressのカスタマイズを念頭においてやると、色々苦戦しましたorz

はてブ、Twitter、Facebook、Google＋の各ボタンを横一列に並べる

http://128bit.blog41.fc2.com/blog-entry-333.html

Facebook いいね！ボタンのコメント欄が表示されない問題2大パターンと解決方法

https://www.msng.info/archives/2013/12/facebook-like-to-comment.php