IE6-8 is Not Supported

Facebook, Twitter, Google+ などの各種 SNS シェアボタンを設置するコードまとめ

使う機会は多いけど使うたびに調べていた気がするのでコピペ用にまとめておきます。
今回まとめたのは Facebook, Twitter, Google+, Hatena Bookmark, Pocket の5つ。
URL 部分は WordPress の関数を入れているのでお好みで変更してください。

1. Facebook (Facebook Like Button)

HTML5

<body>タグ開始直後に記述。ja_JPの部分はen_USに変えることで、英語にすることが可能です。appId は Facebook Developes で登録したアプリの ID を記述。無くても動作します。

<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&appId=**YourAppsID**";
	fjs.parentNode.insertBefore(js, fjs);
} (document, 'script', 'facebook-jssdk'));
</script>

表示したい場所に以下のタグを記述。よく使う data 属性のカスタマイズは下記テーブルを参照。

<div class="fb-like" date-href="<?php the_permalink() ?>" data-send="false" data-layout="button_count" data-width="120" data-show-faces="false"></div>
Description Attribute Parameter
ボタン配色 data-colorscheme “light” or “dark”
シェアするURL data-href Your URL
ボタンの形 data-layout “button_count” or “box_count”

iframe

こちらは iframe 版の記述。HTML5 での data 属性を & で繋ぐことでカスタマイズできます。

<iframe src="//www.facebook.com/plugins/like.php?href=<?php bloginfo('url'); ?>%2F&amp;width=100&amp;height=21&amp;colorscheme=dark&amp;layout=button_count&amp;action=like&amp;show_faces=false&amp;send=false&amp;appId=**YourAppsID**&amp;locale=ja_JP" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:21px;" allowTransparency="true"></iframe>

2. Twitter (Tweet Buttons)

HTML5

<body>タグ開始直後に記述。Facebook と違い言語選択も後述の data 属性で指定できます。

<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>

表示したい場所に以下のコード記述。data 属性でカスタマイズ可能。昔はサイト内で設定できたが、現在は縦型を利用する場合、自分で data-count に vertical を記述する必要がある。

<a href="https://twitter.com/share" class="twitter-share-button" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>" data-lang="ja" data-count="horizontal" data-via="**YourTwitterID**"></a>
Description Attribute Parameter
ボタンの大きさ data-size “medium” or “large”
シェアするURL data-url Your URL
タイトル data-text Page Title
ボタンの形 data-count “none” or “horizontal” or “vertical”
ユーザー名 data-via Your Twitter ID

iframe

こちらは iframe 版。Facebook と同じく & で必要な情報を入れてカスタマイズできます。

<iframe allowtransparency="true" frameborder="0" scrolling="no" style="width: 100px; height: 20px;" src="//platform.twitter.com/widgets/tweet_button.html?url=<?php the_permalink(); ?>&amp;via=**YourTwitterID**&amp;lang=ja&amp;count=horizontal"></iframe>

3. Google+ (+1 Button)

ボタンを表示したい場所に記述。

<div class="g-plusone" data-size="tall" data-href="<?php the_permalink(); ?>"></div>

最後のボタンの後に記述。ボタンより前に記述しても一応動作します。

<script type="text/javascript">
	(function() {
		var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
		po.src = '//apis.google.com/js/plusone.js';
		var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
	})();
</script>
Description Attribute Parameter
ボタンの形 data-size “small”, “medium”, “standard” or “tall”
シェアするURL data-href Your URL

4. Hatena Bookmark (B! Button)

以下は横長の例ですがはてブの場合、直接サイトで作ったほうが楽だと思うので参考までに。

<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" 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="//b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

5. Pocket (Pockeet Button)

表示したい場所に記述。ボタンタイプは3種類あります。

<a data-pocket-label="pocket" data-pocket-count="vertical" class="pocket-btn" data-lang="en"></a>

こちらもボタンのあとに記述推奨ですが、前に記述してもちゃんと動作します。

<script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>
Description Attribute Parameter
ボタンの形 data-pocket-count “none” or “horizontal” or “vertical”

以上、よく使う5つのシェアボタンでした。

ads by google