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

 facebookTwitterLINEFeedlyGoogle+GREEはてなブックマークTumblrPocketLinkedInPinterestの11個分のソーシャルボタンの作り方を調べてみました。

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

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

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

facebookソーシャルボタン作製ページ画面

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

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

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

Twitterソーシャルボタン作製ページ画面

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

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

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

LINEソーシャルボタン作製ページ画面

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

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

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

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

feedlyソーシャルボタン作製ページ画面

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

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

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

Google+ソーシャルボタン作製ページ画面

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">

GREEソーシャルボタン作製ページ画面

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

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

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

hatenaソーシャルボタン作製ページ画面

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

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

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

tumblrソーシャルボタン作製ページ画面

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

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

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

pocketソーシャルボタン作製ページ画面

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

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

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

Linkedinソーシャルボタン作製ページ画面

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

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

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

Pinterestソーシャルボタン作製ページ画面

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