facebookのsendボタン。data-hrefにパラメーター付きのURLを設定したいときの対処法

この記事は約 3 分で読めます。

facebookソーシャルプラグイン。Send Buttonウェブサイトからfacebookのメッセージを送信することができるfacebookのソーシャルプラグイン「Send Button」を設置しようと思ったときに問題発生。

data-hrefにパラメータ付きのURLを指定したのですが、実際のメッセージ内にはパラメータが削除されたURLが挿入されてしまいます。

同じ現象に直面して困っている方の参考になれば幸いです。

facebookはdata-hrefよりもOG:urlを優先する

同様の現象に関するQ&Aを探したところ、どうやらOG:urlにパラメータなしのURLが設定されていたことが原因のようです。
data-hrefのURLのパラーメータが削除されたのではなく、facebookではdata-hrefの設定よりもOG:urlの設定を優先するためOG:urlに設定されたパラメータなしのURLが挿入されてしまうようです。

対処法:ref属性を使う

OG:urlにパラメータ付きのURLを設定できればそれで良いのですが、そうでない場合はdata-href属性に加え、ref属性を使うと問題が解決できます。
ref属性にはパラメータの値を入れます。

例)
メッセージに挿入したいURL:http://yourdomain.com/?id=unique-parameter-value
の場合、

</p><div class="fb-send" data-href="http://yourdomain.com/" ref="unique-parameter-value">&nbsp;</div><p>

このように書きます。

すると、facebookメッセージ内に挿入されるURLは
http://yourdomain.com/?fb_ref=unique-parameter-value&fb_source=message
となるので、上記リンク先ページでfb_refを必要に応じて処理すればOK。

後から気づいたのですが、facebook DEVELOPERSの「Get a Send button」の属性の説明欄にref属性についての説明がちゃんと書かれていました。

もしかして、この現象でつまずいたのは私だけだったかも。。。
私と同じようにおっちょこちょいな方の参考になれば幸いですw

【参考リンク】
stackoverflow-Facebook Like/Send data-href vs. og:url Pickle
Send Button – Facebook開発者

 

こちらもあわせてどうそ
いかがでしたか?参考になりましたでしょうか?



野崎 雷太 の紹介

世田谷区桜丘で規模は小さく、夢は大きく、ネット企業をやっています。主にWEBで自社サービス提供したりWEB系・アプリ系システム開発をしたりしています。 夫婦とヨチヨチ歩きの男の子の3人家族。 息子と一緒にプラレールで遊ぶのが大好き。 このブログでは、自分自身が感動したり、解決できたりして「知ってよかった」と思った話題をコツコツアップしています。いつか誰かの役に立てられたらいいなぁ、と思いつつ。
カテゴリー: コーディング   タグ: ,   この投稿のパーマリンク