いっつもソーシャル系の埋め込みタグの時に、明示的にURLを指定する方法を忘れちゃうので、一度備忘録替わりにまとめておきます。
基本的にはURLを指定する必要はなくて、どのソーシャルも自動的に今のページのURLを拾ってくれますが、アンカ付とかで遷移してきた場合に正しくカウントされないものをあるので、明示的に指定しておくと安全です。
公式でだいたいわかるけど、割とコードをコピーする派なので、自分のためにまとめておきます。
ソーシャルプラグインの埋め込みコードでのURL指定方式まとめ
FaceBookのいいねボタン
data-hrefで指定できます。
ボタン生成ページでけっこう細かく指定できますが。
<div class="fb-like" data-href="https://liginc.co.jp/" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div>data-urlで指定できます。data-hrefで統一して欲しいものですよね…。
ボタン生成ページでも指定できます。
<a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja" data-size="" data-url="https://liginc.co.jp/">ツイート</a>
<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></li>Google+
再びdata-hrefでの指定。
こいつも公式のボタン生成ページで指定できます。
<div class="g-plusone" data-href="https://liginc.co.jp"></div>
<!-- 最後の +1 ボタン タグの後に次のタグを貼り付けてください。 -->
<script type="text/javascript">
window.___gcfg = {lang: 'ja'};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>はてなブックマーク
hrefでhttp://b.hatena.ne.jp/entry/の後ろにつける。
やっぱり公式のボタン生成ページでも指定できます。
<a href="http://b.hatena.ne.jp/entry/https://liginc.co.jp/" class="hatena-bookmark-button" 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"/></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async></script>最近LIGにも追加されたPocket。
data-save-urlで指定する。
公式のボタン生成ページでは指定できない。
ドキュメントには載ってます。
<a data-pocket-label="pocket" data-pocket-count="vertical" class="pocket-btn" data-lang="en" data-save-url="https://liginc.co.jp"></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>Linked in
data-hrefで指定。
公式のボタン生成ページ(※現在は削除されています。)で当然のように指定できます。
<script src="//platform.linkedin.com/in.js" type="text/javascript">
lang: en_US
</script>
<script type="IN/Share" data-url="https://liginc.co.jp" data-counter="top"></script>Pocket以外公式みればOKなエントリになってしまいましたが、まとまってて損はないはず。。。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
