各種SNSへのシェアボタン設置方法まとめ

(自作ボタンで)facebookシェア

<a href="http://www.facebook.com/sharer.php?u=`シェアしたいurl`&amp;t=`シェアしたいタイトル`"
onClick="window.open(encodeURI(decodeURI(this.href)),
      'sharewindow',
      'width=550, height=450, personalbar=0, toolbar=0, scrollbars=1, resizable=!'
      ); return false;">

    `シェアボタンに相当する画像や文言など`

</a>

シェアした時の画像や文言などは、ogp（オープングラフプロトコル）に従う。
facebookにはキャッシュがあり、facebookキャッシュを削除しないと各種変更が反映されないこともあるので注意。

▼facebookキャッシュの削除は、下記urlから
https://developers.facebook.com/tools/debug/

(デフォルトボタンで)facebookいいね、シェア

• iframeによる実装
• javascriptによる実装

の2通りやり方がある。経験的に、iframeで埋め込んだ方がボタンの表示スピードが速い。
下記urlを参考に必要事項を記入すると、埋め込みurlを取得できる。
　↓
https://developers.facebook.com/docs/plugins/like-button

(自作ボタンで)twitterツイート

<a href="http://twitter.com/intent/tweet?text=`ツイートに入れたいテキスト`&amp;url=`入れたいurl`&amp;via=`入れたいアカウント名`"
      onClick="window.open(encodeURI(decodeURI(this.href)),
      'tweetwindow',
      'width=550, height=450, personalbar=0, toolbar=0, scrollbars=1, resizable=1'
      ); return false;">

    `シェアボタンに相当する画像や文言など`

</a>

(デフォルトボタンで)twitterツイート、フォロー

• iframeによる実装
• javascriptによる実装

の2通りやり方がある。経験的に、iframeで埋め込んだ方がボタンの表示スピードが速い。
下記urlを参考に必要事項を記入すると、埋め込みurlを取得できる。
　↓
https://about.twitter.com/resources/buttons

（data-count="vertical"のパラメータを追加すればbox_countの縦表示が可能）

(自作ボタンで)ameblo投稿

<a href="http://blog.ameba.jp/ucs/entry/srventryinsertinput.do?
entry_text=`本文に入れたい文言`" target="_blank">

    `シェアボタンに相当する画像や文言など`

</a>

本文に入れたい文言は%エンコーディングして表記すること。
下記urlは%エンコーディングの際に便利。
　↓
http://www.tagindex.com/tool/url.html

(デフォルトボタンで)はてぶ登録

下記urlを参考に必要事項を記入すると、埋め込みurlを取得できる。
　↓
http://b.hatena.ne.jp/guide/bbutton

(デフォルトボタンで)google+登録

下記urlを参考に必要事項を記入すると、埋め込みurlを取得できる。
　↓
https://developers.google.com/+/web/+1button/?hl=ja