Weekend activity log.
動的URLでシェアボタンを配置
2015/01/26 23:53
SNS

ブログにシェアボタンを配置しようと思ったときに、 facebookの公式サイトをサラッと読むと 固定URLへのシェアボタンになってしまうような・・・

URLを動的に設定して、現在のページへ遷移するシェアボタンにするために調べた内容をメモ。

公式の手順は？

twitter

公式にある手順を元にすると、動的にURLを生成して、現在のURLにリンクを張ってツイート可能。 https://about.twitter.com/resources/buttons

facebook

公式にある手順を元にすると、カスタムされた属性に固定URLを設定しないといけない。 https://developers.facebook.com/docs/plugins/like-button

方針

javascriptの初期化処理で、facebookのシェアボタンを生成するiframeを挿入する時に 現在のページのURLを設定する。

あんまり格好良くはないですが、省エネです。

html

1
2
3
4
5
6
7
<div class="shares">
	<div class="twitter-share-button">
		<a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja">ツイート</a>
	</div>
	<div id="fb-share-button" class="fb-share-button"></div>
	<div class="end-share-button"></div>
</div>

javascript

※　appIdはFacebookページや、webサービス登録したものを使う。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$(document).ready(
	function() {
		// facebookシェアボタン初期化
		facebookShare();
		//  twitterシェアボタン初期化
		twitterShare(document, 'script', 'twitter-wjs');	
	}
);

// facebookシェアボタン初期化
function facebookShare() {
	var url = encodeURIComponent(location.href);
	document.getElementById("fb-share-button").innerHTML = '<iframe src="//www.facebook.com/plugins/share_button.php?href=' + url + '&amp;layout=button_count&amp;appId=xxxxxxxxxxxxxxxx" scrolling="no" frameborder="0" style="border:none; overflow:hidden;" allowTransparency="true"></iframe>';
}

//  twitterシェアボタン初期化
function twitterShare(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);
	}
}

今後余力があったら・・・

今回は公式サイトが提供するソースを元に、カスタマイズしてスマートフォンからも押しやすいボタンを作りたいなと。

シェアボタン設置時に参考にしたURL

各種SNSへのシェアボタン設置方法まとめ