制作ブログ

ソーシャルボタンのコードの取得及び設置方法について

iine

こんにちは！LINEで相手のメッセージをとりあえず既読にして放置しておく、制作部の錦織です。今回は、ツイートボタン、いいねボタン、Google+1ボタン、はてなブックマークボタンの設置方法についてです。

サンプルコードも一応記載しておきましたが、うまくカスタマイズしながら使うのが一番かと思います。また、仕様変更などでコード自体が変わることもありますので、しっかりソーシャルボタン設置の仕組みについて理解しておくことが大切です！

Twitterツイートボタン

開発者用ページから、ボタン設置の設定を行った後、発行コードをサイトに貼り付けて使います。

コード取得先
https://twitter.com/about/resources/buttons

この記事の上部にも付いているような形で表示させたい場合は、下記コードを挿入すればOKです。タグの属性をいじることでカスタマイズも可能です。

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

Facebookいいねボタン

いいねボタンは、他のソーシャルボタンと比べると、少々扱いが厄介です。
挿入用のコード＋空div要素とscriptの記述をページ内に1つ埋め込む必要があります。

コード取得先
https://developers.facebook.com/docs/reference/plugins/like/

<body>の開始タグ直後に下記、空div要素と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";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

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>

合わせて、ボタンを設置したい場所にボタン用のコードを挿入します。
この記事の上部にも付いているような形で表示させたい場合は、下記コードを挿入すればOKです。タグの属性をいじることでカスタマイズも可能です。

<div class="fb-like" data-send="false" data-layout="button_count" data-width="120" data-show-faces="false"></div>

1	<div class="fb-like" data-send="false" data-layout="button_count" data-width="120" data-show-faces="false"></div>

Google+1ボタン

Google+ボタンもfacebook同様、div要素とscript両方の挿入が必要です。

コード取得先
https://developers.google.com/+/web/+1button/

<!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone"></div>

<!-- Place this tag after the last +1 button tag. -->
<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>

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>

はてなブックマークボタン

上記のボタンよりも設定項目も少なく、シンプルな構造になってます。

コード取得先
http://b.hatena.ne.jp/guide/bbutton

<a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="simple-balloon" 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>