UNIRRY

WEBデザインとホロスコープと宇宙のブログ

facebook feedDialogを使ってシェアボタンの表示要素を分岐させる

feedpiyoko

facebookのシェアボタンで文言や画像の出し分けをしたいときにも使用できるfeedDialogについて記載します。facebookともだちエレメンツでもシェアボタンの結果出し分けで使用しました。シェアボタンは廃止の方向でとのことなので、share.phpよりはこっちのほうがいいのかなと思っています。

Feed Dialog 公式仕様

http://fb.dev-plus.jp/reference/advancedtopics/dialogs/

サンプルコード(phpで使用)

// fb文言記入 twでも同じ変数を使用
$fbAppID = "__アプリID__";
$fbLink  = "__リンクさせたいURL__";
$fbName  = "__シェア時のタイトル部分__";
$fbCaption  = "";
$fbDescription  = "__シェア時のテキスト部分__";
$fbPicture  = "__シェア時のサムネイル画像__";
$fbRedirectUrl = "__リダイレクトさせるURL__";

//シェアボタンソース
$url = "<p class=\"fb\"><a target=\"_blank\" href=\"http://www.facebook.com/dialog/feed?app_id=" .$fbAppID. "&link=" .$fbLink. "&picture=" .$fbPicture. "&name=" .$fbName. "&caption=" .$fbCaption. "&description=" .$fbDescription. "&redirect_uri=" .$fbRedirectUrl. "\">シェアしてね!</a></p><p class=\"tw\"><a target=\"_blank\" href=\"http://twitter.com/intent/tweet?text=" .$fbDescription. "&url=" .$fbRedirectUrl. "\">ツイートしてね!</a></p>";

//出力
echo $url;

こんな感じなので、簡単に条件文で出し分けが可能です。例えばテキストをかえたいときはif文で切り替えておけばよしでした。
以下は、ともだちエレメンツの一部。

if ( $last == "fire") {
    $fbDescription  = "いつでも熱いファイアーエレメンツのともだちが多めでした!";
} else if ( $last == "water") {
    $fbDescription  = "親身で優しいウォーターエレメンツのともだちが多めでした!";
} else if ( $last == "earth") {
    $fbDescription  = "しっかり者なアースエレメンツのともだちが多めでした!";
} else if ( $last == "wind") {
    $fbDescription  = "広く浅くなウィンドエレメンツのともだちが多めでした!";
}

jsでも同様の形でできると思います。ただ、使用している環境の文字コードによっては、utf-8への変換が必要になりました。

share.phpとの相違点

アプリ経由のShareになるので、デベロッパー登録とアプリ登録をして、アプリIDを取得しなくてはダメ。

アプリ登録したページで、sandbox modeを無効にしないと開発者と登録した人しかテストできない。

投稿時のUIや文言はshare.phpのシェアとは異なる。


horoscope

“sozatu” animation!! >>    animation1   |   animation2   |   animation3