What's new

Welcome to roeaw | Welcome My Forum

Join us now to get access to all our features. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, and so, so much more. It's also quick and totally free, so what are you waiting for?

Tùy chỉnh nội dung theo ý bạn khi bạn thực hiện bấm share lên fb

Hoca

Administrator
Staff member
Joined
Mar 22, 2024
Messages
297
Reaction score
0
Points
16
button-share.jpg
button-share.jpg


Hiện nay chúng ta đang sử dụng là tính năng share trên fb mặc định do chính fb 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 web site của bạn. Vì đơn giản là nút share fb 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.

Fb Develop: https://builders.fb.com/docs/plugins/share-button?locale=vi_VN

Mặc định:

button-share-default.jpg
button-share-default.jpg


Nhưng Fb đề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 textual content 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 fb 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 web site 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 Fb cho web site 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 web 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 Fb" width="100px" src="' . get_template_directory_uri() . '/pictures/share_button.png" />';
?>
</div>
<script sort="textual content/javascript">
jQuery(doc).prepared(operate($){
doc.getElementById('shareBtn_<?php echo $post_id; ?>').onclick = operate() {
FB.ui({
methodology: 'share_open_graph',
hashtag: '#thinhweb',
show: '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('&nbsp;', ' ', get_the_title()); echo $string; ?> - <?php echo get_bloginfo('sitename'); ?>',
'og:description': '<?php thinhweb_description_share_button(); ?>',
'og:picture': '<?php echo $query->post->guid; ?>'
}
})
}, operate(response){});
}
});
</script>

Đó là đoạn code mình thường sử dụng với ý nghĩa như sau.

  • Sử dụng FB.ui
  • Technique 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à hyperlink đích khi người ta click on vào chia sẻ trên fb
  • show: 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 fb hiểu được lấy những nội dung gì và theo ý của bạn.
  • og:url là phần hyperlink 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 fb
  • or:picture 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ợ fb load nhầm ảnh, tiêu đề, nội dung, hyperlink 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

Có liên quan

 
Top Bottom