Hiện nay chúng ta đang sử dụng là tính năng share trên facebook mặc định do chính facebook cung cấp. Nhưng vì nhiều lý do khác nhau bạn cần tùy chỉnh lại nút chia sẻ sao cho phù hợp với website của bạn. Vì đơn giản là nút share facebook nhiều khi bạn không thể kiểm soát được nó và nó lấy ảnh thumbnail bài viết khi share không đúng hoặc không theo ý muốn của bạn và cả phần nội dung bài viết.
Facebook Develop: https://developers.facebook.com/docs/plugins/share-button?locale=vi_VN
Mặc định:
Nhưng Facebook đều cho chúng ta giải pháp riêng để có thể tùy chỉnh lại phần nút chia sẻ lại bằng ảnh hoặc bằng text theo ý muốn. Theo cách làm của mình thường thì mình dùng font-awesome hoặc dùng ảnh với cấu trúc riêng.
Vậy giải pháp chúng ta là gì?. Phải pháp là dùng FB.ui của chính facebook cung cấp cho chúng ta thông qua API của ứng dụng mà bạn tạo. Để tạo API cho website của bạn thì bạn sử dụng hướng dẫn ở bài viết: Hướng dẫn đăng ký tạo API Facebook cho website của bạn
Lưu ý: với phương pháp này thì bạn có thể gán hashtag mặc định vào nội dung bình luận cho người share. Cách này hữu ích trong trường hợp bạn muốn người ta biết đến chiến dịch hay gì đó của fanpage site của bạn thông qua hashtag và ngoài ra nó còn giúp bạn tùy chỉnh được nút share đẹp hơn phong cách hơn.
Mình demo với các bạn ngay trên mã nguồn wordpress
<div class="button_share float-right" id="shareBtn_<?php echo $post_id; ?>">
<?php
echo '<img alt="Share Facebook" width="100px" src="' . get_template_directory_uri() . '/images/share_button.png" />';
?>
</div>
<script type="text/javascript">
jQuery(document).ready(function($){
document.getElementById('shareBtn_<?php echo $post_id; ?>').onclick = function() {
FB.ui({
method: 'share_open_graph',
hashtag: '#thinhweb',
display: 'popup',
href: '<?php echo get_post_permalink($post_id); ?>',
action_type: 'og.shares',
action_properties: JSON.stringify({
object : {
'og:url': '<?php echo get_post_permalink($post_id); ?>', // your url to share
'og:title': '<?php $string = str_replace(' ', ' ', get_the_title()); echo $string; ?> - <?php echo get_bloginfo('sitename'); ?>',
'og:description': '<?php thinhweb_description_share_button(); ?>',
'og:image': '<?php echo $query->post->guid; ?>'
}
})
}, function(response){});
}
});
</script> Đó là đoạn code mình thường sử dụng với ý nghĩa như sau.
- Sử dụng FB.ui
- Method là cách thức fb cung cấp ở dạng open grap: share_open_graph
- hashtag: thẻ hashtag mà bạn muốn người đăng kèm theo hashtag này vì nó sẽ tự động add vào phần nội dung bình luận.
- href: là link đích khi người ta click vào chia sẻ trên facebook
- display: là hình thức sinh ra cửa sổ để chia sẻ là popup
- action_type là hình thức share og
- action_properties là phần gán cho facebook hiểu được lấy những nội dung gì và theo ý của bạn.
- og:url là phần link người ta muốn share đó là bài viết mà người ta đang truy cập.
- or:title là tiêu đề muốn hiển thị trên phần share.
- og:description là mô tả hiển thị dưới bức ảnh khi share trên facebook
- or:image là ảnh hiển thị trên phần description và trên title của hần nội dung share
Cách sử dụng đơn giản chỉ có vậy không phức tạp mà lại thuận tiện không sợ facebook load nhầm ảnh, tiêu đề, nội dung, link chia sẻ. Chúc các bạn thành công!
Xem thêm: Tạo nút chia sẻ mạng xã hộ đẹp không sử dụng iframe