【Facebook】いいね！ボタンを押した時のコメント欄対応あれこれ[備忘録]
広告
Facebookのいいね！ボタン設置関係で今まで色々頭を悩ませたので、備忘録意味を込めて書き記しておきます。
いいねボタンのコメント欄が途切れる件いいねボタンを押した時に表示されるコメント欄表示させる場合は下記 |
いいねボタンのコメント欄自体を表示させないこれは「CSSで対応できる」という記事を見かけますが、全く効果が無かった（やり方が悪かった？）ので、僕が出した結論は iframe版の「いいねボタン」を使う これです。 モバイルテーマだと、コメント欄が表示されるとはみ出してしまって困るんですよね。 実はボタン押下時にコメント欄が表示されるのはHTML5版とXFBML版だけ（特定条件でiframeでも表示される場合はある）なので、モバイルページなどに設置する場合はiframe版をオススメします。 ボタンのコードの取得は「Facebook開発者ページ」からどうぞ。 |
iframe版いいねボタンを記事別に対応するiframe版には１つだけ欠点？があるんです、それは 指定したURLでしかコードが発行できない これです。 「Facebook開発者ページ」の「 (?)」の項目にURLを入れないとiframe版のコードが発行できないんですよねー・・・。 これを無理矢理対応させる方法（WordPressの場合）はこれをコピペで貼り付け <iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink(); ?>&layout=button_count&show_faces=false&width=200&action=like&font&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:21px;" allowTransparency="true"></iframe> その他はこちらのサイトで詳しく書かれています。 「Facebookいいね！ボタン」をホームページやブログに設置～ワードプレス、ムーバブルタイプ～
|
というわけでPCテーマはHTML5版またはFBML版、モバイルテーマはiframe版がオススメです。
本当はHTML5版、FBML版でコメント欄表示の有無を指定できたら一番良いんですけどねぇ・・・。
',
enableHover: false,
enableTracking: true,
buttons:{layout: 'box_count'},
click: function(api, options){
api.simulateClick();
api.openPopup('facebook');
}
});
// Scrollable sharrre bar, contributed by Erik Frye. Awesome!
var $_shareContainer = $(".sharrre-container"),
$_header = $('#header'),
$_postEntry = $('.entry'),
$window = $(window),
startSharePosition = $_shareContainer.offset(),//object
contentBottom = $_postEntry.offset().top + $_postEntry.outerHeight(),
topOfTemplate = $_header.offset().top,
topSpacing = _setTopSpacing();
//triggered on scroll
shareScroll = function(){
var scrollTop = $window.scrollTop() + topOfTemplate,
stopLocation = contentBottom - ($_shareContainer.outerHeight() + topSpacing);
$_shareContainer.css({position : 'fixed'});
if( scrollTop > stopLocation ){
$_shareContainer.css( { position:'relative' } );
$_shareContainer.offset(
{
top: contentBottom - $_shareContainer.outerHeight(),
left: startSharePosition.left,
}
);
}
else if (scrollTop >= $_postEntry.offset().top - topSpacing){
$_shareContainer.css( { position:'fixed',top: '100px' } );
$_shareContainer.offset(
{
//top: scrollTop + topSpacing,
left: startSharePosition.left,
}
);
} else if (scrollTop < startSharePosition.top + ( topSpacing - 1 ) ) {
$_shareContainer.css( { position:'relative' } );
$_shareContainer.offset(
{
top: $_postEntry.offset().top,
left:startSharePosition.left,
}
);
}
},
//triggered on resize
shareMove = function() {
startSharePosition = $_shareContainer.offset();
contentBottom = $_postEntry.offset().top + $_postEntry.outerHeight();
topOfTemplate = $_header.offset().top;
_setTopSpacing();
};
/* As new images load the page content body gets longer. The bottom of the content area needs to be adjusted in case images are still loading. */
setTimeout( function() {
contentBottom = $_postEntry.offset().top + $_postEntry.outerHeight();
}, 2000);
function _setTopSpacing(){
var distanceFromTop = 20;
if( $window.width() > 1024 ) {
topSpacing = distanceFromTop + $('.nav-wrap').outerHeight();
} else {
topSpacing = distanceFromTop;
}
return topSpacing;
}
//setup event listeners
$window.on('scroll', _.throttle( function() {
if ( $window.width() > 719 ) {
shareScroll();
} else {
$_shareContainer.css({
top:'',
left:'',
position:''
})
}
}, 50 ) );
$window.on('resize', _.debounce( function() {
if ( $window.width() > 719 ) {
shareMove();
} else {
$_shareContainer.css({
top:'',
left:'',
position:''
})
}
}, 50 ) );
});
『【Facebook】いいね！ボタンを押した時のコメント欄対応あれこれ[備忘録]』 #QlayJP http://t.co/sdTRondgix
【Facebook】いいね！ボタンを押した時のコメント欄対応あれこれ[備忘録]: Facebookのいいね！ボタン設置関係で今まで色々頭を悩ませたので、備忘録意味を込めて書き記しておきます。 いいねボタンのコメント欄が途… http://t.co/SJjsyyEQ8Y
メモ(ヽ’ω`) RT 『【Facebook】いいね！ボタンを押した時のコメント欄対応あれこれ[備忘録]』 #QlayJP http://t.co/BCSiGreuUj