facebook、ツイッター、はてなブックマークのSNSボタンの埋め込み方を書いておきます。
いつも忘れて調べ直しちゃってるので、コピって使えるように＾＾；
facebookの場合は、必要なコードが2種類あります。
javascriptとHTMLコードの2つですね。
javascript
まずはjavascriptです。
以下のコードをフッターあたりに記述します。
<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 = 'https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.11';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
HTML
次に、ボタンを表示させたい場所に以下のHTMLを記述します。
<div class="fb-like" data-href="ページのURL" data-layout="button_count" data-action="like" data-size="small" data-show-faces="false" data-share="true"></div>
「ページのURL」部分に関しては、Wordpressを使っている場合は、
<?php the_permalink(); ?>
を入れておいてやれば、わざわざページごとに書き換える必要がないので楽ですね☆
↓こんな感じ
<div class="fb-like" data-href="<?php the_permalink(); ?>" data-layout="button_count" data-action="like" data-size="small" data-show-faces="false" data-share="true"></div>
ちなみに上のコードだと下みたいなボタンが表示されます＾＾
ボタンの表示は、コードを変更することで自由に変えることができます。
コードはfacebookのページから取得できるので、お好みに合わせてカスタマイズしちゃってください＾＾
ツイッター
ツイッターに関しても、facebookと同じように、javascriptとhtmlが必要になります。
javascript
まずはfacebookと同様に、以下のコードをフッターあたりに記述します。
<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>
HTML
次にボタンを表示させたい部分に以下のHTMLコードを記述します。
<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
するとこんな感じで表示されます＾＾
Tweet
ちなみに、こちらもツイッターのページにコードをカスタマイズ方法が記載されているので、必要があれば確認してみてください☆
はてなブックマーク
結局はてなブックマークに関しても、javascriptとhtmlが必要でした(笑)
javascript
javascriptをフッターあたりに記述します。
私はボタンのHTMLの直後に記載しているので、フッターでもHTML直後でも大丈夫だと思います☆
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8″ async="async"></script>
HTML
次にボタンを表示させたい部分に、以下のHTMLを記述します。
<a href="http://b.hatena.ne.jp/entry/ページのURL" class="hatena-bookmark-button" data-hatena-bookmark-title="ページのタイトル" data-hatena-bookmark-layout="standard-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20″ height="20″ style="border: none;" /></a>
Facebook等と同様に、Wordpressを使用している場合は、
「ページのURL」部分には
<?php the_permalink(); ?>
「ページのタイトル」部分には
<?php the_title(); ?>
と記述しておけば、どのページでも使えるので便利です＾＾
こんな感じです。
<a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title(); ?>" data-hatena-bookmark-layout="standard-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20″ height="20″ style="border: none;" /></a>
上記の設定で、こんな感じでボタンが表示されます。
まとめ
毎回コードを調べて記述するのはめんどくさいので、
こんな感じでまとめておいて、必要なときにコピペで済ましていきましょー＾＾