[Blogger] Hướng dẫn tích hợp Facebook Sharing vào blogspot

Chia sẻ bài viết lên các mạng xã hội luôn là tiêu chí được các blogger hướng tới để tăng traffic cho trang của mình. Facebook Social Plugins thường được sử dụng vì nó đơn giản dễ tích hợp và nhiều chức năng, bên cạnh đó Facebook Sharing cũng là một bộ plugin tuyệt vời, nhất là khi chức năng gửi bài viết (fb-send) của Facebook Social Plugins đã ngừng hoạt động

Trong bài viết này, hung1001 sẽ cùng bạn tìm hiểu cách tích hợp Facebook Sharing vào blog giúp tăng tương tác với người dùng

Điều kiện: bạn cần tạo cho mình một facebook apps và đặt nó ở chế độ public. Truy cập https://developers.facebook.com/apps để tạo mới apps.

Cái này bạn tự làm nhé vì nó khá dễ

Sau khi tạo xong bạn sẽ cần nhúng SDK của facebook vào trang web của mình bằng đoạn code sau

<div id="fb-root"></div>
<script type='text/javascript'>//<![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/en_US/sdk.js#xfbml=1&version=v2.12&appId=285887815280112&autoLogAppEvents=1';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]></script>

Thay màu đỏ thành AppID của bạn vừa tạo. Có thể thêm js.async=true; để tăng tốc tải trang. Hiện tại Facebook Sharing với nền web cung cấp cho bạn 3 nút đó là Share, Send và Feed

1. Nút Share (Share Dialog) 

Khi đã tích hợp SDK bạn có thể gọi nút này qua FB.UI cụ thể như sau

- Tạo button

<a href="javascript:void(0)" id="shareBtn">Share</a>

Gọi sự kiện click

$('#shareBtn').click(function() {
    FB.ui({
        method: 'share',
        href: 'xxx',
        ...
    }, function(response) {});
});

Trong đó các thông số bạn lấy tại https://developers.facebook.com/docs/sharing/reference/share-dialog. Hoặc dùng code tạo sẵn

$('#shareBtn').click(function() {
    FB.ui({
        method: 'share',
        display: 'popup',
        mobile_iframe: true,
        href: location.href,
    }, function(response) {});
});

Quan trọng nhất là method và href

2. Nút Send (Send Dialog) 

 - Tạo button

<a href="javascript:void(0)" id="sendBtn">Send</a>

Gọi sự kiện click

$('#sendBtn').click(function() {
    FB.ui({
        method: 'share',
        link: 'xxx',
        ...
    }, function(response) {});
});

Trong đó các thông số bạn lấy tại https://developers.facebook.com/docs/sharing/reference/send-dialog. Hoặc dùng code tạo sẵn

$('#sendBtn').click(function() {
    FB.ui({
        method: 'send',
        display: 'popup',
        mobile_iframe: true,
        link: location.href,
    }, function(response) {});
});

Quan trọng nhất là method và link

3. Nút Feed (Feed Dialog)

 - Tạo button

<a href="javascript:void(0)" id="feedBtn">Feed</a>

Gọi sự kiện click

$('#feedBtn').click(function() {
    FB.ui({
        method: 'feed',
        link: 'xxx',
        ...
    }, function(response) {});
});

Trong đó các thông số bạn lấy tại https://developers.facebook.com/docs/sharing/reference/feed-dialog. Hoặc dùng code tạo sẵn

$('#feedBtn').click(function() {
    FB.ui({
        method: 'feed',
        display: 'popup',
        mobile_iframe: true,
        link: location.href,
    }, function(response) {});
});

Quan trọng nhất là method và link

Một điều khá quan trọng là bạn cần đặt các code gọi sự kiện click dưới code sdk nhé. Vẫn còn thiếu một thứ gì đó đúng không :). Đó là css, cái này thì tùy bày trí của bạn nên tôi không thêm vào.

Với bộ plugin này chắc chắn rằng website của bạn sẽ trở nên chuyên nghiệp hơn rồi đó. Bạn có thể thử code online tại đây

Chúc bạn thành công !