このサイト（raining）にSNSボタンを設置した際の方法を記載します。
今回はTwitter、facebook、google+、はてなブックマーク、mixiのSNSボタンを設置しました。
それぞれの設置方法をメモしておきます。
wordpressで直接ファイルにコードを埋め込む方法で設定しました。
ファイルは/wp-content/themes/使用テンプレート/content-single.phpの<?php the_content(); ?>の下に下記の方法でコードを埋め込んでます。
■ wordpress テンプレートタグ
1 | <?php the_permalink(); ?> |
現在の投稿のパーマリンクURIを取得し表示する
1 | <?php the_title(); ?> |
現在の投稿のタイトルを取得し表示する
※上記は今回利用したwordpressのテンプレートタグを記載しています。他にも色々なテンプレートタグがあります。
■ SNSボタン設置方法
Twitterのツイートボタン
Twitterのツイートボタンを作成するページでURLなどの情報を入力し、コードを取得する。
https://twitter.com/about/resources/buttons
コード取得後、data-urlを「 data-url=”<?php the_permalink(); ?>”」と書き換える。
数字をツイートボタンの上に表示する場合は「 data-count=”vertical”」を追加する。
1 2 | <a href="https://twitter.com/share" class="twitter-share-button" data-url="<?php the_permalink(); ?>" data-lang="ja" data-count="vertical">ツイート</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> |
facebookのいいねボタン
Facebook Like ButtonページでURLなどの情報を入力しコードを取得する。
http://developers.facebook.com/docs/reference/plugins/like/
今回はHTML5でコードを取得。
コード取得後、data-hrefを「 data-href=”<?php the_permalink(); ?>”」と書き換える。
画像の表示などがうまくいかない場合は、metaタグでOGP（Open Graph Protocol）を設定する。
「JavaScript SDK」は<body>のすぐ後に配置するのが理想的。
1 2 3 4 5 6 7 8 9 10 11 12 | <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><div data-href="<?php the_permalink(); ?>" data-send="false" data-layout="box_count" data-width="450" data-show-faces="true"></div> |
グーグルプラスのgoogle+1ボタン
google+1ページで情報を入力しコードを取得する。
http://www.google.com/intl/ja/webmasters/+1/button/
コード取得後、指定の場所にソースを埋め込むだけで設定が完了する。
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!-- このタグを +1 ボタンを表示する場所に挿入してください --><g:plusone size="tall"></g:plusone><!-- この render 呼び出しを適切な位置に挿入してください --><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> |
はてなブックマークのBookmarkボタン
はてなブックマークボタンページでURLなどの情報を入力しコードを取得する。
http://b.hatena.ne.jp/guide/bbutton
hrefのhttp://b.hatena.ne.jp/entry/の後に<?php the_permalink(); ?>を記載する。
また、data-hatena-bookmark-titleに<?php the_title(); ?>を記載する。
1 2 3 4 | <a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" data-hatena-bookmark-title="<?php the_title(); ?>" data-hatena-bookmark-layout="vertical-balloon" 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> |
mixiのイイネ！ボタン
mixiで「イイネ！ボタン」を設置する際は、デベロッパー登録が必要になる。
http://developer.mixi.co.jp/
登録したら、「mixi Plugin」の新規サービス追加でURLなどの情報を入力しコードを取得する。
取得したコードのdata-service-keyに識別キーを記載し、data-hrefを「 data-href=”<?php the_permalink(); ?>”」と書き換える。
1 2 3 4 5 6 7 8 9 10 | <div data-plugins-type="mixi-favorite" data-service-key="識別キー" data-size="large" data-href="<?php the_permalink(); ?>" data-show-faces="false" data-show-count="true" data-show-comment="false" data-width=""></div><script type="text/javascript">(function(d) {var s = d.createElement('script');s.type = 'text/javascript';s.async = true;s.src = '//static.mixi.jp/js/plugins.js#lang=ja';d.getElementsByTagName('head')[0].appendChild(s);})(document);</script> |
