facebookいいねボタン追加

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を動的に設定する

<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をエンコードする

$(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);
});

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です