Tạo Facebook Like Box và Comment Responsive - Blogger Tips, Widget, Template


Facebook là một phương tiện truyền thông xã hội có một số lượng người dùng rất nhiều. Tại Indonesia, chỉ có 47% người sử dụng internet có một tài khoản facebook. Ngoài phương tiện truyền thông xã hội facebook cũng cung cấp nhiều công cụ cho người sử dụng blog. Trong số fasilita như facebook như hộp, nút facebook, facebook nhận xét. 
Tốt cho những người bạn của người dùng Facebook và cũng cài đặt facebook như hộp hoặc facebook comment trong blog của bạn có thể quan tâm đến lời khuyên về việc này. Những lời khuyên tôi cho điều này là làm thế nào để làm cho họ có phản ứng. Nó phù hợp cho người dùng mẫu đáp ứng. 
Từ các kết quả tìm kiếm và các thí nghiệm tôi đã làm, tôi thấy hai phương pháp để làm cho nó. Đó là bằng cách sử dụng CSS và jQuery cách. Tốt cho những người bạn của những người quan tâm có thể làm theo các cách sau đây.

Sử dụng CSS

Phương pháp sử dụng CSS có thể được thực hiện bằng cách thêm mã CSS sau vào template blogspot của bạn:

Facebook Like Box

.fb-like-box, .fb-like-box span, .fb-like-box iframe[style] {
width: 100% !important;
}

Facebook Comment Box

.fb-comments, .fb-comments span, .fb-comments iframe[style] {
width: 100% !important;
}

Phương pháp JQuery

Một phương pháp có phần phức tạp hơn bởi vì nó đã phải sử dụng jQuery. Vì vậy, để áp dụng ít nhất một blog bạn không có jQuery librarynya. 
Nói chung, nếu bạn thực hiện một facebook như thế và cũng comment facebook (HTML5) sẽ có hai hộp để sao chép mã. 
Mã là javascriptnya mã đầu tiên được gọi với Javascript SDK. Mã này nên được đặt chỉ một lần. Và đề nghị đặt sau thẻ <body>. Nếu không có một hình thức mã như thế này:
<div id="fb-root"></div>
<script>
(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/en_US/all.js#xfbml=1&appId=ID Aplikasi Facebook Anda";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
Mục đích của mã này sẽ tìm kiếm một thẻ script đầu tiên và đưa mã script với facebook id-jssdk sau đó. Vì vậy, các mã như trên có thể được thay thế bằng đoạn mã sau và đặt nó sau thẻ <body>.
<div id="fb-root"></div>
<script id="facebook-jssdk" src="http://connect.facebook.net/en_US/all.js#xfbml=1&amp;appId=ID Aplikasi Facebook Anda"></script>

Facebook Like Box

Các mã thứ hai của FB như hộp sẽ được như thế này:
<div class="fb-like-box" data-href="URL Facebook Page Anda" data-width="292" data-show-faces="true" data-stream="true" data-header="true"></div>
Đoạn mã trên là dimunculkannya hộp như thế. Giá trị mặc ​​định như hộp (hồ sơ, suối, và các tiêu đề xuất hiện). Để thay đổi nó hãy thay thế các giá trị thực sự được thay thế bằng giả. Giả sử bạn muốn loại bỏ các tiêu đề sau đó chuyển đổi thành một data-header = "false". 
Vì chúng ta sẽ làm được đáp ứng cũng phải nói thêm một chút mã html và jQuery như thế này.
<div id="container-likefb" style="width:100%;">
  <div class="fb-like-box" data-href="URL Facebook Page Anda" data-width="292" data-show-faces="true" data-stream="true" data-header="true"></div>
</div>
<script type="text/javascript">
$(window).bind("load resize", function(){    
  var container_width = $('#container-likefb').width();    
    $('#container-likefb').html('<div class="fb-like-box" ' + 
    'data-href="URL Facebook Page Anda"' +
    ' data-width="' + container_width + '" data-show-faces="true" ' +
    'data-stream="true" data-header="true"></div>');
    FB.XFBML.parse( );    
}); 
</script>

Facebook Comment

Như trong hộp như thế, FB comment mẫu mã cả hai nhiều hơn hoặc ít hơn như thế này (cho các blogger):
<div class='fb-comments' expr:data-href='data:post.url' data-width='470' data-num-posts='10'></div>
Gần như giống nhau, chúng tôi đã làm trong như hộp, nhưng có rất ít bình luận thêm fb mã Javascript. Vì vậy, các mã sẽ được như thế này.
<div id="container-commentfb" style="width:100%;">
  <div class='fb-comments' expr:data-href='data:post.url' data-width='470' data-num-posts='10' ></div>
</div>
<script type="text/javascript">
//<![CDATA[
$(window).bind("load resize", function(){   
  var url = location.protocol+'//'+location.host+location.pathname;
  var containercm_width = $('#container-commentfb').width();    
    $('#container-commentfb').html('<div class="fb-comments" ' + 
    'data-href="'+url+'"' +
    ' data-width="' + containercm_width + '" data-num-posts="10"></div>');
    FB.XFBML.parse( );    
}); 
//]]>
</script>

Hi vọng có thể giúp đỡ được các bạn. Chúc các bạn thành công.

0 comments:

Post a Comment

 
Top