Hướng dẫn thêm hộp thoại chia sẻ Facebook vào Blog

Thêm hộp thoại chia sẻ Facebook vào Blog là cách nhanh nhất tăng tương tác của người đọc, giúp mọi người có thể đăng tin riêng lẻ lên dòng thời gian của họ, dòng thời gian của bạn bè, nhóm, trang  hoặc trong một tin nhắn riêng tư trên Messenger.

Hộp thoại chia sẻ bao gồm 3 hộp thoại: Hộp thoại chia sẻ, hộp thoại gửi và hộp thoại cho nguồn cấp. Trong 3 hộp thoại này có sự khác nhau cơ bản cho nên bạn thấy hộp thoại nào phù hợp thì chèn vào Blog hoặc có thể chèn cả 3.

Lợi ích khi thêm hộp thoại vào Blog khi mọi người chis sẻ bài viết lên Facebook bạn có thể quản lý được link chia sẻ và đường link sẽ không bị thêm ?spref=fb điều này rất tốt cho SEO.

Yêu cầu bạn phải có một trang Fanpage đang hoạt động sử dụng tạo ứng dụng Facebook và quản lý ứng dụng, việc này vô cùng đơn giản và miễn phí. Dưới đây mình sẽ hướng dẫn các bước thêm hộp thoại chia sẻ vào Blog trong trường hợp bạn đã tạo ứng dụng.

Đầu tiên bạn chèn đoạn javascript gọi ứng dụng mặc định của Facebook vào trước thẻ đóng </body>

Copy

<div id='fb-root'/>

<script>

//<![CDATA[



(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 = 'https://connect.facebook.net/vi_VN/sdk.js#xfbml=1&version=v2.12&appID=app_id&autoLogAppEvents=1';

  fjs.parentNode.insertBefore(js, fjs);

  js.async=true;  

}(document, 'script', 'facebook-jssdk'));



//]]>

</script>

Thay app_id bằng id ứng dụng của bạn. Tiếp theo là cách thêm từng hộp thoại

Hộp thoại Chia sẻ

Hộp thoại Chia sẻ giúp mọi người có thể đăng tin riêng lẻ lên dòng thời gian của họ, dòng thời gian của bạn bè, nhóm hoặc trong một tin nhắn riêng tư trên Messenger. Điều này không yêu cầu Đăng nhập Facebook hoặc bất kỳ quyền mở rộng nào, vì vậy, đây là cách dễ nhất để bật chia sẻ trên web.

Lưu ý: Nếu mọi người đang sử dụng trình duyệt mà không đăng nhập bằng cookie, danh sách thả xuống để chọn đối tượng chia sẻ sẽ không hiển thị. Điều này cũng xảy ra nếu ứng dụng sử dụng hộp thoại nguồn cấp thay vì hộp thoại chia sẻ hoặc nếu ứng dụng sử dụng chế độ xem web iframe.

Thêm đoạn js dưới đây vào cùng và bên dưới đoạn js ở trên

Copy

document.getElementById('shareBtn').onclick = function() {

  FB.ui({

    method: 'share',

    display: 'popup',

    mobile_iframe: true,

    href: location.href,

  }, function(response){});

}

Chèn nút chia sẻ như sau:

Copy

<div id='shareBtn'>Share</div>

Hộp thoại Gửi

Với Hộp thoại Gửi, mọi người có thể gửi riêng tư nội dung đến những người bạn cụ thể. Họ sẽ có tùy chọn chia sẻ riêng tư một liên kết dưới dạng tin nhắn Facebook. Hộp thoại Gửi không yêu cầu bất kỳ quyền mở rộng nào.

Thêm js như sau:

Copy

document.getElementById('sendBtn').onclick = function() {

  FB.ui({

    method: 'send',

    display: 'popup',

    mobile_iframe: true,

    link: location.href,

  }, function(response){});

}

Chèn nút gửi:

Copy

<div id='sendBtn'>Send</div>

Hộp thoại cho nguồn cấp - Feed Dialog

Bạn có thể thêm hộp thoại cho nguồn cấp vào ứng dụng của mình để mọi người có thể đăng từng tin lên dòng thời gian của họ. Hộp thoại này bao gồm chú thích mà ứng dụng của bạn quản lý và bình luận cá nhân từ người chia sẻ nội dung.

Thêm js như sau:

Copy

document.getElementById('feedBtn').onclick = function() {

  FB.ui({

    method: 'feed',

    display: 'popup',

    mobile_iframe: true,

    link: location.href,

  }, function(response){});

}

Chèn nút feed

Copy

<div id='feedBtn'>Feed Dialog</div>

Như vậy bạn có thể chèn đoạn javascript đầy đủ

Copy

<div id='fb-root'/>

<script>

//<![CDATA[

(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 = 'https://connect.facebook.net/vi_VN/sdk.js#xfbml=1&version=v2.12&appID=app_id&autoLogAppEvents=1';

  fjs.parentNode.insertBefore(js, fjs);

  js.async=true;    

}(document, 'script', 'facebook-jssdk'));



document.getElementById('shareBtn').onclick = function() {

  FB.ui({

    method: 'share',

    display: 'popup',

    mobile_iframe: true,

    href: location.href,

  }, function(response){});

}



document.getElementById('sendBtn').onclick = function() {

  FB.ui({

    method: 'send',

    display: 'popup',

    mobile_iframe: true,

    link: location.href,

  }, function(response){});

}



document.getElementById('feedBtn').onclick = function() {

  FB.ui({

    method: 'feed',

    display: 'popup',

    mobile_iframe: true,

    link: location.href,

  }, function(response){});

}

//]]>

</script>

Tất nhiên khi thêm hộp thoại chia sẻ bạn cần phải có bộ thẻ meta chia sẻ dành riêng cho Facebook chèn trước thẻ đóng </head>. Các bạn xem bài viết Bộ thẻ meta open graph chia sẻ mạng xã hội cho blogspot.