ソーシャルボタンのリンク URL を簡易な形に変更する
運営ウェブサイトに設置しているソーシャルボタンの見直し。公式ボタンをそのまま使うよりも、簡易な形のリンクに変更しておいたほうがカスタマイズが捗るようです。オリジナルのアイコンにしたり、Web フォントで表現したり、CSS で装飾しただけのフラットなボタンにしたり。そのような時に使える URL 成型の覚書。
なお、ソーシャルサービスではないものも含まれていますが、ここではソーシャルボタンと呼ぶことにします。
リンクの成型
ソーシャルボタンには、API を使用してカウントを表示させるなどの高機能のものがありますが、以下では、記事アドレスと記事タイトルを取得するだけの簡易リンクにしています。アドレスとタイトルはともに パーセントエンコーディング (URL エンコーディング) を施します。
Facebook でシェア
http://www.facebook.com/sharer.php?u=[アドレス]&t=[タイトル]Twitter でツイート
http://twitter.com/intent/tweet?url=[アドレス]&text=[タイトル]Google+ でシェア
https://plus.google.com/share?url=[アドレス]&title=[タイトル]Pocket に保存
http://getpocket.com/edit?url=[アドレス]&title=[タイトル]はてなブックマークに追加
http://b.hatena.ne.jp/add?url=[アドレス]「http://b.hatena.ne.jp/entry/[アドレス]」と違い、このままでページタイトル (title 要素の内容) を取得できます。また、パラメータに「title=[タイトル]」を加えることで、別のタイトルにすることが可能です (既にブックマークされている場合は無視されます)。
マルチバイト文字列を含むアドレスのツイートを考慮
Twitter は、ツイート内容に URL が含まれると自動でリンクするようになっています。が、アドレスに日本語が含まれているとそこでリンクが途切れてしまう仕様です。そのため、そうしたアドレスをツイートする時には、前以て短縮 URL にしてしまうか、パーセントエンコーディングを行う必要があります。
エンコードで対処する場合、上掲した簡易リンクの時には二重にエンコードします。というのは、リンク遷移後のツイート入力フォームで一度デコードされてしまうため。そのままつぶやけば途切れたリンクになってしまいますので、二重にエンコードし、% を %25 に置き換えます。こうすると、一度だけエンコードされた状態でフォーム上に表示されるようになります。
今日学んだこと
ソーシャルボタンのリンクの成型。URL にマルチバイト文字列が含まれる Twitter リンクは二重エンコードする。