Hướng dẫn thêm số lượt thích và chia sẻ Facebook vào bài viết

Bài viết được chia sẻ lên mạng xã hội Facebook là thành phần không thể thiếu của mỗi blog giúp người đoc tiếp cận được bài viết nhanh hơn qua đó có thể thấy sự tương tác bằng hành động like và chia sẻ bài viết. Đôi khi chúng ta cần biết được tổng số lượt tương tác bằng hành động like và chia sẻ từ bài viết của người đọc qua đó lấy được mục đích ở những bài viết kế tiếp và chúng ta có thể chèn số lượt tương tác này vào bài viết gọi đó là thông tin giống như thông tin tác giả, thời gian đăng bài, lượt xem,.....



Ưu điểm của phương pháp này không bị plugin quảng cáo chặn nhưng nhược điểm nó chỉ hiện thông tin bằng số đếm mà không áp dụng được hành động giống như các nút like, chia sẻ của Facebook. Cách thực hiện cũng đơn giàn do tôi đã viết sẵn đoạn javascript bạn chỉ cần chèn nó vào temeplate thôi nhưng trước tiên bạn cần lấy được ID và Khóa bí mật của ứng dụng mà bạn đã tạo từ Facebook, nếu bạn chưa tạo ứng dụng có thể truy cập liên kết này. Khi tạo xong truy cập bảng điều khiển ứng dụng lấy ID và Khóa bí mật



Lấy được ID và Khóa bí mật của ứng dụng bạn thêm nó vào đoạn javascript dưới đây:


<script>
var token = 'ID|Khóa bí mật';
    url = window.location.href;

$.ajax({
url: 'https://graph.facebook.com/v2.7/',
dataType: 'jsonp',
type: 'GET',
data: {access_token: token, id: url},
success: function(data){
console.log(data);
$('#fb-like-count').append(data.share.share_count);
},
error: function(data){
console.log(data);
}
});
</script>

Tiếp tục chèn đoạn javascript trước thẻ đóng </body> trong template



Cuối cùng bạn cần chèn đoạn code sau đây vào nơi nào muốn hiển thị trong bài viết ví dụ như dưới tiêu đề hoặc cuối bài viết, nếu chèn dưới tiêu đề thì tìm đoạn dưới đây và chèn dưới nó


<h2 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>
<a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a>
    <b:else/>
        <data:post.title/>
    </b:if>
</h2>

Nếu chèn cuối bài viết thì tìm đoạn <div class='post-footer-line post-footer-line-1'> hoặc <div class='post-footer-line post-footer-line-2'>. Đoạn code cần chèn là:


 <i class='fa fa-heart'/> <span id='fb-like-count'/>

Trong đó <i class='fa fa-heart'/> là biều tượng fontawesome, nếu thích biểu tượng khác thì truy cập liên kết này. Yêu cầu trong template phải có thư viện. Nếu chưa có bạn có thể chèn liên kết bên dưới sau thẻ <head>


<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

Việc thêm số lượt thích và chia sẻ Facebook vào bài viết không ảnh hưởng đến tốc độ tải trang qua đó còn giúp tạo cho blog bạn thêm phần chuyên nghiệp.


Hướng dẫn thêm số lượt thích và chia sẻ Facebook vào bài viết Nguyễn Tuấn 5 of 5
Bài viết được chia sẻ lên mạng xã hội Facebook là thành phần không thể thiếu của mỗi blog giúp người đoc tiếp cận được bài viết nhanh hơn qu...

Tin khác


Loading...

  1. mình làm mà ko có hiện số đếm. site của mh: qthang.net

    Trả lờiXóa
    Trả lời
    1. Bạn thay token của mình chắc chắn được
      var token = '583598571819746|a40e774db26e510781a8f009cc9c50cf';

      Xóa
  2. Có 1 bài thêm plugin của a nhưng e chỉ muốn thêm 2 nút thích và gửi như blog a thì làm ntn ạ?

    Trả lờiXóa
    Trả lời
    1. <fb:like action='like' colorscheme='light' expr:href='data:post.canonicalUrl' font='arial' layout='button_count' send='false' show_faces='false' />
      <div class='fb-send'/>

      Xóa