Code php share bài viết facebook, pinterest, twitter

Trong lập trình theme việc thêm chức năng share lên các mạng xã hội là cần thiết để có thể tăng traffic cũng như tương tác cho bài viết hỗ trợ cho SEO. Tuy nhiên, việc chèn thêm chức năng sẵn có mà facebook hoặc các nền tảng này sẵn có thì sẽ bắt buộc phải chèn thêm javascript khiến website cần phải tải thêm thư viện javascript, điều này ảnh hưởng trực tiếp đến tốc độ load trang của website.

Sau đây mình xin hướng dẫn các bạn code chức năng share facebook, pinterest, twitter mà không cần tải thêm thư viện javascrpit.

Code share facebook

<a href="https://www.facebook.com/sharer/sharer.php?u=(url)" target="_blank"><i class="fa fa-facebook"></i></a>

Trong đó, (url) là đường dẫn của bài post.

Code share twitter

<a href="https://twitter.com/share?text=&url=url" target="_blank"><i class="fa fa-twitter"></i></a>

Trong đó (url) là đường dẫn của bài post.

Code share pinterest

<a href="https://www.pinterest.com/pin/create/button/?url=(url)&media=(image)&description=(excerpt)" target="_blank"><i class="fa fa-pinterest"></i></a>

Đối với pinterest chúng ta cần truyền vào 3 tham số. Trong đó (url) là đường dẫn bài post, (image) là hình ảnh thumbnail bài viết, (excerpt) là đoạn trích dẫn của bài post.

Nói dài dòng vậy thôi, chứ toàn bộ code như sau:

<div class="news_socail ml-auto">
  <a style="font-weight:bold;">Chia sẻ:</a>
  <a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo get_permalink(); ?>" target="_blank"><i class="fa fa-facebook"></i></a>
  <a href="https://twitter.com/share?text=&url=<?php echo urlencode(get_permalink()); ?>" target="_blank"><i class="fa fa-twitter"></i></a>
  <a href="https://www.pinterest.com/pin/create/button/?url=<?php echo urlencode(get_permalink()); ?>&media=<?php echo $img; ?>&description=<?php echo       string_limit_words(get_the_excerpt(),50); ?>" target="_blank"><i class="fa fa-pinterest"></i></a>
</div>

Đặt đoạn code share facebook này vào file single.php

Note: Đến bước này khi chúng ta đã có thể share bài viết rồi, tuy nhiên trình duyệt sẽ tự động nhảy ra 1 tab mới chứ không hiện lên popup như bình thường chúng ta vẫn thấy.

Mẹo cho việc này là hãy thêm 1 đoạn script hiện popup thay vì để trình duyệt tự động chuyển tab mới.

Đoạn javascript popup share facebook:

<script>
$(document).ready(function() {
$('.share').click(function(e) {
e.preventDefault();
window.open($(this).attr('href'), 'fbShareWindow', 'height=450, width=550, top=' + ($(window).height() / 2 - 275) + ', left=' + ($(window).width() / 2 - 225) + ', toolbar=0, location=0, menubar=0,         directories=0, scrollbars=0');
return false;
});
});
</script>

Đặt đoạn javascript popup share facebook này vào file footer.php

Sau đó bạn thêm class="share" cho thẻ a trong phần share như thế này là sẽ hoạt động

<div class="news_socail ml-auto">
<a style="font-weight:bold;">Chia sẻ:</a>
<a class="share" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo get_permalink(); ?>" target="_blank"><i class="fa fa-facebook"></i></a>
<a class="share" href="https://twitter.com/share?text=&url=<?php echo urlencode(get_permalink()); ?>" target="_blank"><i class="fa fa-twitter"></i></a>
<a class="share" href="https://www.pinterest.com/pin/create/button/?url=<?php echo urlencode(get_permalink()); ?>&media=<?php echo $img; ?>&description=<?php echo     string_limit_words(get_the_excerpt(),50); ?>" target="_blank"><i class="fa fa-pinterest"></i></a>
</div>

Sau khi gắn xong code thì thành quả chúng ta có được như sau:

Mình xin kết thúc phần hướng dẫn tại đây, xin cảm ơn!

Tôi là một freelancer, mọi kiến thức mà tôi chia sẻ cho bạn đều là miễn phí!