Code PHP chức năng chia sẻ bài viết qua Facebook, Pinterest, Twitter

Bạn muốn có các nút chia sẻ mạng xã hội trên trang web WordPress của mình… nhưng bạn đang đấu tranh để chọn lọc qua hàng ngàn plugin nút chia sẻ xã hội có sẵn trên Internet. Vì vậy, nay mình sẽ bắt tay Code chức năng chia sẻ bài viết qua Facebook, Pinterest, Twitter

Chia sẻ bài viết qua Facebook, Pinterest, Twitter

Chức năng chia sẻ bài viết qua Facebook, Pinterest, Twitter

Cơ bản nó sẽ là, với (url) là đường dẫn bài viết

<!-- Facebook -->
<a href="https://www.facebook.com/sharer/sharer.php?u=(url)" target="_blank"><i class="fa fa-facebook"></i></a><!-- Twitter -->
<a href="https://twitter.com/share?text=&url=url" target="_blank"><i class="fa fa-twitter"></i></a>
<!-- 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>

Với Pinterest, ngoài (url) chúng ta cần truyền vào 2 tham số nữa là (image) thumbnail bài viết, (excerpt) là đoạn trích dẫn của bài post. Để lấy được (url) bài viết, ta sử dụng hàm <?php echo get_permalink(); ?> và code hoàn chỉnh sẽ là,

<div class="social-share-box>
  <span style="font-weight:bold;">Chia sẻ:</span>
  <!-- Facebook -->
  <a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo get_permalink(); ?>" target="_blank"><i class="fa fa-facebook"></i></a>
  <!-- Twitter -->
  <a href="https://twitter.com/share?text=&url=<?php echo urlencode(get_permalink()); ?>" target="_blank"><i class="fa fa-twitter"></i></a>
  <!-- Pinterest -->
  <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>

Dán đoạn Code phía trên vào nơi bạn cần sử dụng thường thì sẽ cuối file single.php(trang bài viết)



Tạo popup chia sẻ

Như hình dưới,

Chia sẻ bài viết qua Facebook, Pinterest, Twitter

Thực hiện đơn giản với 1 đoạn Javascrpit dưới đây

<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>

Lưu ý: .share

Sau đó bạn chỉ cần thêm class .share vào từng thẻ <a> (code chia sẻ), Để mỗi lần sử dụng nút Share javascpirt sẽ được gọi

<div class="social-share-box>
  <span style="font-weight:bold;">Chia sẻ:</span>
  <!-- Facebook -->
  <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>
  <!-- Twitter -->
  <a class="share" href="https://twitter.com/share?text=&url=<?php echo urlencode(get_permalink()); ?>" target="_blank"><i class="fa fa-twitter"></i></a>
  <!-- Pinterest -->
  <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>

Ảnh phía trên là thành quả :)))

Tham gia thảo luận trên Facebook tại đây!

Bình luận