こんにちは!LINEで相手のメッセージをとりあえず既読にして放置しておく、制作部の錦織です。今回は、ツイートボタン、いいねボタン、Google+1ボタン、はてなブックマークボタンの設置方法についてです。
サンプルコードも一応記載しておきましたが、うまくカスタマイズしながら使うのが一番かと思います。また、仕様変更などでコード自体が変わることもありますので、しっかりソーシャルボタン設置の仕組みについて理解しておくことが大切です!
Twitterツイートボタン
開発者用ページから、ボタン設置の設定を行った後、発行コードをサイトに貼り付けて使います。
コード取得先
https://twitter.com/about/resources/buttons
この記事の上部にも付いているような形で表示させたい場合は、下記コードを挿入すればOKです。タグの属性をいじることでカスタマイズも可能です。
1 2 |
<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の記述のコードを挿入します。
1 2 3 4 5 6 7 8 |
<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> |
合わせて、ボタンを設置したい場所にボタン用のコードを挿入します。
この記事の上部にも付いているような形で表示させたい場合は、下記コードを挿入すればOKです。タグの属性をいじることでカスタマイズも可能です。
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/
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!-- 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> |
はてなブックマークボタン
上記のボタンよりも設定項目も少なく、シンプルな構造になってます。
コード取得先
http://b.hatena.ne.jp/guide/bbutton
1 |
<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> |
Webサービスが増えると共にボタンの数も…
日々、新しいWebサービスが増え、それに伴い、設置したくなるソーシャルボタンの数も増える今日この頃。
しかし、あれもこれもと闇雲に設置しすぎると、ページの景観を損ねますし、ユーザーからすればボタンありすぎると混乱しますし、ページ自体もどんどん重くなってしまいます。
サイトにあったソーシャルボタンは何かを考えた上で、必要なものを設置し、スマートなサイト作りを心掛けましょう!