Web事業部実績紹介
Web事業部実績紹介
2013.06.25

ソーシャルプラグインの埋め込みコードでのURL指定方式まとめ

づや

いっつもソーシャル系の埋め込みタグの時に、明示的に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>

Twitter

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>

Pocket

最近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なエントリになってしまいましたが、まとまってて損はないはず。。。