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

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.

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'></div>

<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 Facebook của bạn, nếu không có có thể tạo mới. 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

$('#shareBtn').click(function() {

    FB.ui({

        method: 'share',

        display: 'popup',

        mobile_iframe: true,

        href: location.href,

    }, function(response) {});

});

Chèn nút Share: <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

$('#sendBtn').click(function() {

    FB.ui({

        method: 'send',

        display: 'popup',

        mobile_iframe: true,

        link: location.href,

    }, function(response) {});

});

Chèn nút gửi: <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

$('#feedBtn').click(function() {

    FB.ui({

        method: 'feed',

        display: 'popup',

        mobile_iframe: true,

        link: location.href,

    }, function(response) {});

});

Chèn nút Feed: <div id='feedBtn'>Feed Dialog</div>

Lưu ý: Yêu cầu bạn phải thêm miền ứng dụng trong phần cài đặt của ứng dụng Facebook của bạn thì mời sử dụng được các nút này.

Chấm hết bài!!!

Nội dung chính