2017年 2月 24日更新

ソーシャルボタンの埋め込み方法

　facebook、Twitter、LINE、Feedly、Google+、GREE、はてなブックマーク、Tumblr、Pocket、LinkedIn、Pinterestの11個分のソーシャルボタンの作り方を調べてみました。

facebook いいねボタン+シェアボタン

ボタンが作れるページ https://developers.facebook.com/docs/plugins/like-button

　手順もシンプルです。ボタンの種類を選ぶ→生成されたコードを貼り付けるという簡単なもの。

Twitter ソーシャルボタンの作製

ボタンが作れるページ https://about.twitter.com/ja/resources/buttons#tweet

　ツイッターの場合は、リンクを共有する、フォローする、ハッシュタグをつける、ユーザーやツイート本文も指定可能です。

LINE ソーシャルボタンの作製

ボタンが作れるページ https://media.line.me/howto/ja/

　ラインの場合は、ボタンの選択のみ。

Feedly ソーシャルボタンの作製

ボタンが作れるページ https://www.feedly.com/factory.html

　フィードリーの場合は、ボタンの選択をして埋め込むページのURLを入力する必要があります。

　フィードリー自体、RSSリーダーとして有名ですがあまり使っている人を見たことがないので、必要なのかな?という程度です。

Google+ ソーシャルボタンの作製

ボタンが作れるページ https://developers.google.com/+/web/+1button/

　グーグルプラスの場合は、ボタンの種類の選択のみ。

GREE ソーシャルボタンの作製

ボタンが作れるページ https://docs.developer.gree.net/ja/platform/connect/socialfeedback

　グリーの場合は、meta propertyの記述をしておくか、作製画面でURLを入力する必要あり。

例)
<meta property="og:title" content="ソーシャルボタンの埋め込み方法@seotech">
<meta property="og:url" content="http://seotech.click/seo-20170223-socialbutton.html">

はてなブックマーク ソーシャルボタンの作製

ボタンが作れるページ http://b.hatena.ne.jp/guide/bbutton

　はてなブックマークの場合は、ボタンの選択と設定のみ。

Tumblr ソーシャルボタンの作製

ボタンが作れるページ https://www.tumblr.com/buttons

　タンブラーの場合は、ボタンの選択のみ。

Pocket ソーシャルボタンの作製

ボタンが作れるページ https://getpocket.com/publisher/button

　ポケットの場合は、ボタンの選択のみ。

Linkedin ソーシャルボタンの作製

ボタンが作れるページ https://developer.linkedin.com/plugins/share

　リンクトインの場合は、ボタンと言語の選択。

Pinterest ソーシャルボタンの作製

ボタンが作れるページ https://developers.pinterest.com/tools/widget-builder/?

　ピンタレストの場合は、ボタンと言語の選択。

　多くつけても重くなるだけなで、facebookとツイッターとラインぐらいでいいのではないかと思っています。