自サイトにいいねボタンを設置したのはいいけど、コメント欄が画面外にはみ出てしまう問題が多々あります。
その場合はGraph APIを使いLikeボタンのCallbackを取得し、DOMオブジェクト毎画面内に移動させることで、なんとかなる場合があります。
以下はその際のコールバックの取得方法。
position:absolute;
で配置しないと他要素にも影響を与えてしまうので、そこだけ注意。
あとはパフォーマンスを重視するサイトの場合、API側でイベントの監視が行われるので若干処理が重くなる可能性があります。
[URL]: 設置するURL
index.html
<div id="fb-container">
<div id="fb-root"></div>
<div class="fb-like" data-href="[URL]" data-width="80" data-layout="button" data-action="like" data-show-faces="false" data-share="false"></div>
</div>
[Facebook App ID]: FacebookのアプリID
fb.js
window.fbAsyncInit = function() {
FB.init({
appId : '[Facebook App ID]',
xfbml : true,
version : 'v2.2'
});
var dom = $('#fb-container');
FB.Event.subscribe( 'edge.create', function(response) {
dom.animate({ right: 370 }, 0, 'swing', function(){});
});
FB.Event.subscribe( 'edge.remove', function(response) {
dom.animate({ right: '' }, 0, 'swing', function(){});
});
FB.Event.subscribe( 'comment.create', function(response) {
dom.animate({ right: '' }, 0, 'swing', function(){});
});
FB.Event.subscribe( 'comment.remove', function(response) {
dom.animate({ right: '' }, 0, 'swing', function(){});
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/ja_JP/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
イベントの説明
- edge.create: Likeボタンが押された時
- edge.remove: Likeボタンをキャンセルした時
- comment.create: コメントを投稿した時
- comment.remove: コメントをキャンセルした時
その他のイベントは以下を参照。
https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/v2.2