Chèn nút Social Share WordPress không cần plugin

Chia sẻ bài viết lên các trang mạng xã hội như Facebook, Google Plus, Twitter,.. là điều tất yếu bạn cần phải làm sau khi xuất bản bài viết để người dùng có thể tiếp cận bài viết nhiều hơn. Chèn các nút chia sẻ mạng xã hội vào bài viết sẽ giúp bạn thực hiện chia sẻ một cách nhanh chóng và nếu người dùng đọc bài viết của bạn thấy hay thì có thế chia sẻ một cách dễ dàng hơn.

WordPress hiện cũng đã có rất nhiều plugin hỗ trợ chèn nút chia sẻ vào bài viết hay trên website đủ các kiểu style để cho người dùng lựa chọn, nhưng nếu đã có cài plugin thì tất nhiên web của bạn sẽ nặng thêm một tí nên mình chia sẻ cách để chèn các nút chia sẻ vào website WordPress mà không cần dùng đến plugin để website nhẹ hơn và cho những bạn nào chỉ thích code 😉

Code CSS gồm:

• Thư viện Font Awesome fontawesome.io gọi vào website
• File CSS button-social.css gọi vào website. (Đối với website sử dụng thư viện Bootstrap thì bạn có thể sử dụng file bootstrap-social.css)

Code PHP:

Bạn cần tìm ra đoạn code hiển thị nội dung bài viết trong mã nguồn website, thông thường hay nằm trong file single.php (có thể nằm ở file khác, Sublime Text có thể giúp bạn tìm nhanh hơn) và hàm thực hiện là the_content()

<?php
    $actual_link = "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
?>
<div>
    <a class="btn btn-social-icon btn-facebook" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo $actual_link; ?>" target="_blank"><span class="fa fa-facebook"></span></a>
    <a class="btn btn-social-icon btn-google" href="https://plus.google.com/share?url=<?php echo $actual_link; ?>" target="_blank"><span class="fa fa-google"></span></a>
    <a class="btn btn-social-icon btn-twitter" href="https://twitter.com/home?status=<?php echo $actual_link; ?>" target="_blank"><span class="fa fa-twitter"></span></a>
    <a class="btn btn-social-icon btn-linkedin" href="https://www.linkedin.com/shareArticle?mini=true&url=<?php echo $actual_link; ?>&title=<?php echo get_the_title(get_the_ID()); ?>&source=example.com" target="_blank"><span class="fa fa-linkedin"></span></a>
    <a class="btn btn-social-icon btn-pinterest" href="https://www.pinterest.com/pin/create/link/?url=<?php echo $actual_link; ?>&media=<?php echo the_post_thumbnail_url('large'); ?>&description=<?php echo get_the_title(get_the_ID()); ?>" target="_blank"><span class="fa fa-pinterest"></span></a>
</div>
<div>
    <?php the_content() ?>
</div>
<div>
    <a class="btn btn-social-icon btn-facebook" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo $actual_link; ?>" target="_blank"><span class="fa fa-facebook"></span></a>
    <a class="btn btn-social-icon btn-google" href="https://plus.google.com/share?url=<?php echo $actual_link; ?>" target="_blank"><span class="fa fa-google"></span></a>
    <a class="btn btn-social-icon btn-twitter" href="https://twitter.com/home?status=<?php echo $actual_link; ?>" target="_blank"><span class="fa fa-twitter"></span></a>
    <a class="btn btn-social-icon btn-linkedin" href="https://www.linkedin.com/shareArticle?mini=true&url=<?php echo $actual_link; ?>&title=<?php echo get_the_title(get_the_ID()); ?>&source=example.com" target="_blank"><span class="fa fa-linkedin"></span></a>
    <a class="btn btn-social-icon btn-pinterest" href="https://www.pinterest.com/pin/create/link/?url=<?php echo $actual_link; ?>&media=<?php echo the_post_thumbnail_url('large'); ?>&description=<?php echo get_the_title(get_the_ID()); ?>" target="_blank"><span class="fa fa-pinterest"></span></a>
</div>

Bạn chèn đoạn code các nút chia sẻ trước và sau hàm the_content() để hiển thị các nút lẫn cả đầu và cuối bài viết. Đoạn có example.com thì hãy thay thành domain của bạn nhé. Mình chỉ demo các mạng xã hội phổ biến, nếu bạn muốn nhiều hơn, hãy vào trang sharelinkgenerator.com để tạo ta chuỗi url sharing.

Chúc các bạn thành công!