実は簡単に設置できるシェアボタン

代表的なSNSであるTwitter,Facebook、LINEのシェアボタン。ブログやWEBサイトでSNSによる拡散を求める場合は必須とも言えるこの機能。

各SNSのデベロッパーサイトに行くと、公式のタグが払い出されます。公式タグはボタンのデザインやシェア数などのカウントもついていたりするので便利ですが、各SNSのボタン、サイズ感が地味に揃っていなかったり、デザイン上どうしてもオリジナルのボタンを設置したい場合などもありますよね。

実は、オリジナルのボタンは簡単にできるんです。

共有用のURLに引数を渡すだけ

Aタグに各種SNSの共有用URLを記述するだけでオリジナルのシェアボタンは簡単に作れます。

Facebook

<a href="http://www.facebook.com/share.php?u={URL}" rel="nofollow" target="_blank">テキストやボタンの画像</a>

Twitter

<a href="https://twitter.com/share?url={URL}" rel="nofollow" target="_blank">テキストやボタンの画像</a>

LINE

<a href="https://social-plugins.line.me/lineit/share?url={URL}" rel="nofollow" target="_blank">テキストやボタンの画像</a>

上記href内の{URL}をシェアしたいページのURLに書き換えるだけでシェアボタンの完成です。ただのAタグなので、テキストや画像など自由にシェアボタンを作成することが出来ます。おためしあれ

OGPも合わせて正しく設定しよう

SNSでシェアされるページのOGPタグを正しく設定していると、SNS側の機能で、シェアされたページの頭出しをしてくれます。画像やサイト名、記事タイトルなどを設定できるので、合わせてOGPタグも正しく設定しましょう。