Home Web design Chèn nút chia sẻ mạng xã hội cho WordPress không dùng plugin

Chèn nút chia sẻ mạng xã hội cho WordPress không dùng plugin

10 min read
2
0
8
Chèn nút chia sẻ mạng xã hội cho WordPress không dùng 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.

Chèn nút chia sẻ mạng xã hội cho WordPress không dùng plugin
Chèn nút chia sẻ mạng xã hội cho WordPress không dùng plugin

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:

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.

Sau khi thực hiện như trên, bạn sẽ được các nút chia sẻ như blog của mình đây, chúc các bạn thành công!

Load More Related Articles
Load More By Dong
Load More In Web design