Hướng dẫn tạo nút Like và Share Facebook cho bài viết Blogger ~ MECHIASE24

Thứ Sáu, 14 tháng 4, 2017

Hướng dẫn tạo nút Like và Share Facebook cho bài viết Blogger

By Unknown tháng 4 14, 2017 No comments

Bạn muốn bài viết Wapsite của mình có nút like và Share để mọi người like và chia sẻ bài viết của bạn? Trong bài viết hôm nay mình sẽ hướng dẫn các bạn tạo nút Like và Share facebook cho bài viết Blogspot (Blogger).

Demo như sau:

Để tạo nút Like và Share Facebook bạn cần có một ứng dụng Facebook.
Truy cập: https://developers.facebook.com/apps/ để tạo ứng dụng (Chọn nền tảng trang WEB nhé)
Với những bạn có ứng dụng rồi hoặc đã từng chèn comment Facebook thì bạn có thể bỏ qua và theo dõi bước cuối luôn.

Sau khi đã tạo ứng dụng bạn truy cập: Cài đặt -> Thông tin cơ bản được giao diện như sau:

Hướng dẫn tạo ứng dụng nút like và share Facebook

Chọn +Thêm nền tảng :

Chọn Trang Web :

Tiến hành nhập địa chỉ Web của bạn.

Sau đó bạn vào chỉnh sửa mẫu Template thêm code sau trước thẻ </body> thường ở cuối cuối cùng mẫu.

Thay đổi id ứng dụng 1317768701640855 thành id ứng dụng của bạn.

Code:

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : '1317768701640855',
      xfbml      : true,
      version    : 'v2.8'
    });
    FB.AppEvents.logPageView();
  };

  (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/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

Như hình sau:

Bạn muốn thêm nút like và Share ở đâu thêm code này ở vị trí đó:

Code:

<div
  class="fb-like"
  data-share="true"
  data-width="450"
  data-show-faces="true">
</div>

Thông thường mình chèn cuối bài viết sau code ( Ctrl + F tìm code sau và Pate sau nó):

Code:

<data:post.body/>

Thêm thuộc tính vào các thẻ Meta sau thẻ <head>:

Code:

<meta content='1317768701640855' property='fb:app_id'/>

Lời kết: Trên đây là cách tạo nút Like và Share Facebook cho bài viết Blogger-Blogspot cập nhật mới nhất, hi vọng với chia sẻ trên có thể giúp được các bạn phần nào, mọi góp ý nếu có thắc mắc các bạn comement bên dưới. .

MECHIASE24

Thứ Sáu, 14 tháng 4, 2017