Facebookいいねボタンの追加
追加するための必要な要素は
https://developers.facebook.com/docs/plugins/like-button/
で作成できる
URL to like にサイトのURL
Send Button のチェックをはずし
Layout Styleが
standardだと解説がでてくるので
button_count
へ変更
widthへは任意のピクセルを入力
そして、get codeを押せば
コードの種類を選択できるので
IFRAMEを選択すれば作成される
作成されたコードを貼り付ければ
いいねボタンが設置される
ただし、これだとページごとに
コードを張ることになり面倒
あと、環境によってはURLがまだ未定ということもある
このためJavascriptで
画面初期表示のときに
iframe要素を書き換え、いいねボタンを設置するページのURLを動的に設定する
1 | <iframe class="like-btn" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:21px;" allowTransparency="true"></iframe> |
というように、もとのコードから
src=”” の部分を削除
変わりに
class=”like-btn”
を追加して書き換え対象にする
そして、Javascriptで
pageshowのタイミングで
class=”like-btn”を探し
.attr() で src=”” を設定する
.attr()については
http://semooh.jp/jquery/api/attributes/attr/properties/
を参考に
location.href は表示されているページのURLになるけど
特殊文字があるため
encodeURIComponent()
でURLをエンコードする
1 2 3 4 5 6 7 | $(document).on("pageshow",'[data-role=page],function(e){var src = '//www.facebook.com/plugins/like.php?href=';src += encodeURIComponent(location.href);src += '&send=false&layout=button_count&width=200&show_faces=true&action=like&colorscheme=light&height=21';$('.like-btn').attr('src':src);}); |