Share Linksの和訳です。これを利用することで、2012年7月18日にとうとう廃止されてしまったシェアボタンと同等の機能を実装できます。ただし、公式ドキュメントのどのページからも、このドキュメントへの導線はありません。リンク全部をごっそり持ってきて管理しているFBDocsで見つからなかったくらい。。
なので、どこまでサポートが続けられるのかは分かりません。この方法を使う場合は気をつけてください。
以下、和訳内容です。
サイト訪問者にFacebook上でコンテンツを共有させるベストな方法は、いいね!ボタンを使うことです。ワンクリックでコンテンツとの繋がりを持つことができ、友だちのうちで誰が既に繋がっているかを知ることができるため、CTRを上げることができます。外部のJavaScriptを利用できない環境であったり、ボタンのスタイルをカスタマイズしたい場合は、シンプルなシェアリンクを利用できます。
Simple example
このリンクのように、シェアダイアログへのシンプルなリンクを作成できます。コードは以下の通りです。
<a href="https://www.facebook.com/sharer/sharer.php?u=example.org" target="_blank">
Share on Facebook
</a>
この実装で必要なのは、www.facebook.com/sharer/sharer.phpへのリンクを生成するだけです。これは廃止対象となったシェアボタンで使われていた物と同じです。
新規ウィンドウもしくはポップアップを使ってこのURLを開くだけです。JavaScriptを用いて新規ウィンドウを開くのであれば、閲覧中のページURLをlocation.hrefでも取得できます。この実装方法であれば、全てのページで共通して使えるコードになります。
var sharer = "https://www.facebook.com/sharer/sharer.php?u=";
window.open(sharer + location.href, 'sharer', 'width=626,height=436');
User experience
いいね!ボタンの代わりにシェアリンクを使うのであれば、一貫性のあるユーザ体験を提供するよう意識してください。たとえば、多くのユーザはすでにいいね!ボタンに慣れていて、これを押したときに何が起こるべきか知っています。それと同様に、ユーザは廃止されたシェアボタンにも慣れ親しんでいます。ここで紹介するシェアリンクはシェアボタンと全く同じというわけではありません(たとえばシェア数がリンク横に表示されません)が、以下のポイントを押さえることでシェアボタンと似たような動作にすることはできます。- Facebookアイコンのあるボタン画像を使うことで、ルック&フィールを近づける
- クリック時には新規ウィンドウでsharer.phpを開く
- サイズは横626px、高さ436pxにする
Images
Facebookのエッジサーバにある画像を利用することができます。これらの画像は、ブラウザにキャッシュさせてページのロード時間を短縮するため、Expiresヘッダを遥か先の時刻に指定してあります。
既に持っているCSS Sprite画像の一部にするなどの理由で、自分のサーバに置いて利用することも可能です。その際は、以下の画像のうち欲しい物を右クリックで保存してください。
画像 | 説明 |
---|---|
18x18px | |
22x22px | |
25x25px | |
39x39px | |
18x18px, RTL | |
22x22px, RTL | |
25x25px, RTL | |
39x39px, RTL |