SNSシェアボタンをカスタム画像などで設置するコードまとめ

SNSの恩恵を得るために、シェアボタンなどを設定することが当たり前になりましたが、それらSNSボタンをオリジナル画像などで設置するコードをまとめます。

以前は、TwitterのツイートボタンやFacebookのいいねボタンなどを中心に、押された回数を示すカウントをサイトのステータスとして表示するのが定番でした。
IE6など一部古いブラウザではうまく表示されなかったり、レイアウトが崩れたりと、四苦八苦したのをおぼえています。。。

時代は移り、最近では押された回数よりも、いかにしてSNSで共有してもらい、そこからのアクセス流入を期待する方向へと移行してるように思われます。つまり、「いいねの回数」といった指標より、どれだけ「シェア」の効果が得られるかが重要になってきています。
実際に多くのサイトでも、カウントを表示するための公式のボタンは使用されなくなり、サイトのデザインに馴染むようなオリジナルのボタンを設置しているのを見かけます。

また、一時期話題になったmixiボタンを見かけなる一方で、LINEボタンやLinkedInボタンを機会が増えるなど、とにかくSNSボタンのトレンドの移り変わりが激しいです。

ボタンを設置するサイトを運用する側からすれば、その都度、どのように設定すれば効果が期待できるのか、その動向を探るのが作業負荷となっています。
そこで、随時、最新の設置方法などをまとめて、更新していきたいと思います。

• オリジナルボタンはテキスト・画像のどちらでも構いませんが、とりあえず公式ではなくオリジナルの画像設置を目標としています
• 本サイト「https://helog.jp/」をシェアするサンプルを用意しています
• 各URLに負荷するパラメータの値は、基本的にUTF-8でURLエンコードします

Facebookのシェアボタンをカスタマイズ

Facebookのシェアを機能させるためには、対象となるページにogタグが設置されていることが前提となります。
シェアするためには「http://www.facebook.com/sharer/sharer.php」にパラメータ「u」にシェアするページのURLをセットします。
オリジナル画像「facebook_icon.jpg」をシェアボタンとした場合、設置するコードは以下のようになります。

<a href="http://www.facebook.com/sharer/sharer.php?u=http%3a%2f%2fhelog%2ejp%2f" target="_blank"><img src="facebook_icon.jpg" alt="Facebookシェア"></a>

Twitterのツイートボタンをカスタマイズ

Tweetボタンは「https://twitter.com/share」にパラメータを設定することで、任意のリンクに機能を設置することができます。
Tweet Button Parameter Reference | Twitter Developers
基本的にはパラメータ「url」にシェアするページ、「text」にページタイトルなどを設置すれば問題ないでしょう。
オリジナル画像「twitter_icon.jpg」をツイートボタンとした場合、設置するコードは以下のようになります。

<a href="https://twitter.com/share?url=http%3a%2f%2fhelog%2ejp%2f&amp;text=helog" target="_blank"><img src="twitter_icon.jpg" alt="Twitterツイート"></a>

パラメータ「hashtags」でハッシュタグを設定できます。複数設定する場合はカンマ区切りで「PHP,HTML,CSS」のように設定します。
さらに「via」でツイッターのユーザ名を追加できます。例えば私のアカウント「thee_heron」を追加するとツイートに「@thee_heronさんから」といったメッセージを追加することができます。

<a href="https://twitter.com/share?url=http%3a%2f%2fhelog%2ejp%2f&amp;text=helog&hashtags=PHP%2cHTML%2cCSS&via=thee_heron" target="_blank"><img src="twitter_icon.jpg" alt="Twitterツイート"></a>

LINEで送るボタンをカスタマイズ

LINEで送るボタンは「http://line.me/R/msg/text/」にパラメータを設置することで、任意のリンクに機能を設置することができます。
設置方法｜LINEで送るボタン
パラメータにはサイトタイトルとサイトURLの間に改行コード「%0D%0A」を挿入した形式で設置します。
オリジナル画像「line_icon.jpg」をLINEで送るボタンとした場合、設置するコードは以下のようになります。

<a href="http://line.me/R/msg/text/?helog%0D%0Ahttp%3a%2f%2fhelog%2ejp%2f" target="_blank"><img src="line_icon.jpg" alt="LINEで送る"></a>

Googleシェアボタンをカスタマイズ

Googleシェアボタンは「https://plus.google.com/share」にパラメータを設定することで、任意のリンクにシェア機能を設置することができます。
Share | Google+ Platform for Web | Google Developers
パラメータ「url」にシェアするページのURLをセットします。
オリジナル画像「google_icon.jpg」をシェアボタンとした場合、設置するコードは以下のようになります。

<a href="https://plus.google.com/share?url=http%3a%2f%2fhelog%2ejp%2f" target="_blank"><img src="google_icon.jpg" alt="Googleシェア"></a>

純性のSNSボタンはやたらJavaScriptを読み込みます。
オリジナルのリンクに置き換えることで、ページの表示スピードの改善にもつながるかもしれませんね。