目次
今やSNSボタンはアクセスアップには欠かせなく、ほとんどのサイトで見ることができます。SNSの代表格であるTwitter、Facebook、Google+、はてなブックマーク、 PocketのSNSシェアボタン設置方法を解説します。XMLではなくHTML5用の解説になります。Facebook、Google+は「いいねボタン」ではなく 「共有ボタン」の解説です。
(2015/08/31追記)Twitterフォローボタン、LINEを追加しました。
今回紹介するのは「いいねボタン」ではなく「共有ボタン」の解説です。Facebookのタイムライン上で友達にも表示されますので、 記事をより見てもらえやすくなります。
私の場合、アクセス拒否により「403 forbidden」が表示されてしばらく悩みましたが、サーバーの設定には気をつけてください。
HTML
<div class="fb-share-button" data-href="http://aoplanning.com/" data-layout="box_count" data-type="button_count"></div>
<div id="fb-root"></div>
JavaScript
(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(d.getElementById(id)) return;js=d.createElement(s);js.id=id;js.async=true;js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.3&appId=xxx";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));
空のdivタグは必要です。削除しないで定義してください。
JavaScriptのapp-idはFacebookから取得したapp-idを定義してください。
スポンサーリンク
Google+
今回紹介するのは「いいねボタン」ではなく「共有ボタン」の解説です。Google+にリンクが投稿されます。
HTML
<div class="g-plus" data-action="share" data-annotation="vertical-bubble" data-href="http://aoplanning.com/"></div>
JavaScript
var scriptTag = document.createElement("script");
scriptTag.type = "text/javascript";
scriptTag.src = "https://apis.google.com/js/platform.js";
scriptTag.async = true;
document.getElementsByTagName("head")[0].appendChild(scriptTag);
はてなブックマーク
HTML
<a href="http://b.hatena.ne.jp/entry/http://aoplanning.com/" class="hatena-bookmark-button" data-hatena-bookmark-layout="vertical-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="https://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border:none; "/>
JavaScript
var scriptTag = document.createElement("script");
scriptTag.type = "text/javascript";
scriptTag.src = "https://b.st-hatena.com/js/bookmark_button.js";
scriptTag.async = true;
document.getElementsByTagName("head")[0].appendChild(scriptTag);
HTML
<a data-save-url="http://aoplanning.com/" data-pocket-label="pocket" data-pocket-count="vertical" class="pocket-btn" data-lang="en"></a>
JavaScript
!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.async=true;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");
HTML
<a data-url="http://aoplanning.com/" href="https://twitter.com/share" class="twitter-share-button" data-lang="ja" data-count="vertical" data-dnt="true">ツイート</a>
JavaScript
!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.async=true;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
Twitterフォローボタン
「aoplanning_com」をご自分のTwitterアカウントのユーザー名に書き換えてください。JavaScriptは上記「Twitter」と同じです。
HTML
<a href="https://twitter.com/aoplanning_com" class="twitter-follow-button" data-show-count="false" data-lang="ja" data-dnt="true">@aoplanning_comさんをフォロー</a>
LINE
LINEの場合、JavaScriptは必要ありません。
テキストまたはURLをエンコードしてから設定してください。画像はLINEの公式サイトよりダウンロードしてお使いください。
HTML
<a href="http://line.me/R/msg/text/エンコードされたテキストまたはURL"><img src="画像URL" alt="LINEでシェア"></a>
OGP設定
OGPとは「Open Graph protocol」の略称です。Facebook、Twitter、Google+などのSNSでシェアされた際に、 ページのタイトル、URL、説明文、サムネイル画像を正しく表示させる仕組みです。SNSでの拡散を通じて多くの人に記事をみてもらうためには 必須の設定といえるでしょう。
HTMLの<head>…</head>内に含めるmeta情報で<meta>要素を使って記述します。
HTML
<html lang="ja">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">
<meta property="og:title" content="タイトル">
<meta property="og:description" content="説明文">
<meta property="og:site_name" content="Aoplanning.com">
<meta property="og:locale" content="ja_JP">
<meta property="og:url" content="http://aoplanning.com/">
<meta property="og:image" content="http://aoplanning.com/image/aoplanning.png">
<meta property="fb:app_id" content="1234567890123456">
<meta property="og:type" content="website">
- headタグ-上記のようにしてください。種別がarticleの場合は修正してください。
- og:title-ページタイトル
- og:description-ページ説明文
- og:site_name-サイト名
- og:locale-言語
- og:url-ページURL。絶対パス。
- og:image-imageURL。絶対パス。
- fb:app_id-FacebookアプリケーションID、Facebookより取得してください。
- og:type-websiteトップページ、articleその他記事。