ソフトウェアエンジニア現役続行

雑多なことを綴ります

Facebookのシェアボタンを隠しパラメーターでカスタマイズ

Facebookのシェアボタンの設置

Facebookのシェアボタンの設置自体は難しくありません。Googleで検索しても簡単に出てくるし、Facebookにも開発者向けに公式ページが用意されています。https://developers.facebook.com/docs/reference/plugins/share-links/

OGPタグによるシェアボタン押下後の表示のカスタマイズ

シェアボタンを押したあとのサムネイル画像・タイトル・説明文をカスタマイズしたい場合、WEBページにmetaタグでOGPタグを設置します。以下のページの説明が分かりやすいです。http://www.site-support.jp/?p=4281

FacebookのOGPタグの扱いにおける不具合

しかし、FacebookではこのOGPタグ(特にog:image)が正しく反映されないことがあり、バグレポートが上がっていますが、2013年7月27日時点では対応されていません。https://developers.facebook.com/bugs/239522122851150

隠しパラメーターによるシェアボタン押下後の表示のカスタマイズ

私もこの不具合にかなり悩まされ、調べていくうちに、OGPタグを使わずにsharer.phpの隠しパラメーターを使うことで、シェアされた場合の表示をカスタマイズできることが分かりました。http://ar.zu.my/how-to-really-customize-the-deprecated-facebook-sharer-dot-php/

簡単に説明すると、下記のようにs=100とp[]パラメーターでカスタマイズができます。下記URLをこのままコピーして、ブラウザに貼付ければシェアボタンが作成されます。

http://www.facebook.com/sharer.php?s=100
&p[url]=http://oswald.hatenablog.com/entry/2013/07/27/120717
&p[images][0]=https://fbcdn-sphotos-a-a.akamaihd.net/hphotos-ak-frc1/425113_276411052428693_1745927864_n.jpg
&p[title]=シェアボタンを隠しパラメーターでカスタマイズ
&p[summary]=シェアボタンが押されたあとの表示をsharer.phpの隠しパラメーターでカスタマイズする方法です
&m2w

モバイルユーザーの対応

なお、上記の例のm2wパラメーターはモバイルユーザーがこのシェアを作ろうとして場合にも正しくカスタマイズが反映されるようにするためです。というのも、この隠しパラメーターはsharer.phphttp://www.facebook.com/sharer.php)のみで有効なのですが、User Agentがモバイルだった場合、モバイル用のsharer.phphttp://m.facebook.com/sharer.php)にリダイレクトされてしまい、この隠しパラメーターが機能しません。m2wパラメーターは、上記のリダイレクトを禁止する隠しパラメーターです。

ボタン例