各SNSのシェアボタンの仕様一覧

2016-05-09

今やBlogに記事ごとのシェアボタンは普通に存在していますが、Jekyllは最小限のものしかないので、自分で設定しないといけない。プラグインを用意してもいいのだけれど、各社のSNSのAPIがどうなっているか気になったのでまとめた。

Twitter: Tweet Button | Twitter Developers
Facebook: シェアボタン - ソーシャルプラグイン
Google Plus: Share | Google+ Platform for Web | Google Developers
Tumblr: 共有ボタンドキュメンテーション | Tumblr
Pocket: Pocket for Publishers: Pocket Button Documentation
Pinterest: Pinterest Developers
Hatena: はてなブックマークボタンの作成・設置について - はてなブックマーク
LINE: 設置方法｜LINEで送るボタン

とりあえず、share用の各URLにページのURLなりタイトルなりを設定してGETするリンクを作れば良さそうなので、以下のようなテンプレートを作ってリンクボタンを作れば良さそう。

Font Awesomeを使ってると国産のSNSのボタンがないので、どこかのタイミングで、Ligature Symbolsに変えたほうが良いかもなぁ。

<ul class="share-post list-inline pull-right">
  <li>
    <a href="https://twitter.com/intent/tweet?text=各SNSのシェアボタンの仕様一覧&url=http://okzk.org/blog/how-to-create-social-button/&via=tokzk&related=tokzk" rel="nofollow" target="_blank" title="Share on Twitter" class='btn btn-default btn-xs'>
      <i class="fa fa-twitter"><span>Twitter</span></i>
    </a>
  </li>
  <li>
    <a href="https://facebook.com/sharer.php?u=http://okzk.org/blog/how-to-create-social-button/" rel="nofollow" target="_blank" title="Share on Facebook"" class='btn btn-default btn-xs'>
      <i class='fa fa-facebook'><span>Facebook</span></i>
    </a>
  </li>
  <li>
    <a href="https://plus.google.com/share?url=http://okzk.org/blog/how-to-create-social-button/" rel="nofollow" target="_blank" title="Share on Google+" class='btn btn-default btn-xs'>
      <i class='fa fa-google-plus'><span>Google</span></i>
    </a>
  </li>
</ul>

I.N.G

各SNSのシェアボタンの仕様一覧

その他記事