WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

SNSシェアボタン-Facebook

Facebook(いいねまたはシェア)

developers.facebook.com


Facebookで用意されているボタンを使う場合

HTML

<div class="fb_btn" data-href="対象のURL" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>

HTML,JS

bodyの中に記述しておく

<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/sdk.js#xfbml=1&version=v2.0";
	fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

言語を変更する場合は

js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.0";

の「ja_JP」(日本語)を「en_US」(英語)等に変更する。

パラメーター

パラメーター 内容 デフォルト
data-href URL いいね!またはシェア対象のURLを記入 現在のURL
data-colorscheme lightまたはdark ボタンの色を指定 light
data-action likeまたはrecommend いいね!(like)かシェア(recommend)を選択 like
data-layout button_count、standard、box_count、button ボタンのデザイン standard
data-ref 文字 シェアするときにフォームにデフォルトで入力されているメッセージ なし
data-share trueまたはfalse いいね!にしている時にtrueにするといいね!ボタンの下にシェアボタンが追加される false
data-width 数値 ボタンの幅(px)を指定する -
data-show-faces trueまたはfalse いいね!をしている友達の写真を表示するか。幅450×高さ150のface用スペースが確保される false
data-kid-directed-site trueまたはfalse 13歳以下の子供が利用する場合true false

developers.facebook.com

シェアボタンをオリジナルの画像を使用する場合

<a href="https://www.facebook.com/sharer/sharer.php?u=対象となるURL">画像やテキスト</a>

URLはエンコードしておく

関連記事

mmmmofu.hatenablog.com