Code chèn nút chia sẻ mạng xã hội vào WordPress

Bạn muốn thêm các nút chia sẻ các trang xã hội như Facebook, Twitter, Google + vVv… vào website của bạn? OK! Hôm nay mình sẽ hướng dẫn cách chèn nút chia sẻ mạng xã hội vào WordPress không sử dụng đến plugin.

Mình sẽ hướng dẫn các bạn cách đơn giản dễ nhất để bạn có thể chèn nút chia sẻ mạng xã hội vào WordPress một cách dễ hiểu và hình dung ra được, nếu bạn muốn chuyên nghiệp hơn bạn có thể tạo một shortcode để có thể gọi ra nơi nào mà bạn muốn không phải code lại cho mệt hihi.

Hướng dẫn chèn nút chia sẻ mạng xã hội vào WordPress

Bước 1: Bạn cần xác định vị trí mà bạn muốn đặt ở bất cứ đâu mà bạn muốn và dán đoạn mã bên dưới vào:

<a class="icon icon-facebook icon-replacement" href="http://www.facebook.com/sharer/sharer.php?s=100&p[url]=<?php echo urlencode(get_permalink()); ?>" target="_blank">Like This Page on Facebook</a>
<a class="icon icon-twitter icon-replacement" href="https://twitter.com/intent/tweet?text=<?php echo urlencode(get_the_title()); ?>+<?php echo get_permalink(); ?>" target="_blank">Tweet This Page</a>
<a class="icon icon-google-plus icon-replacement" href="https://plus.google.com/share?url=<?php echo urlencode(get_permalink()); ?>" target="_blank">Plus One on Google</a>

Bạn có thể chỉnh sửa lại theo cấu trúc html bạn muốn với các thẻ bao bên ngoài và icon. Và code trên mình chỉ liệt kê 3 liên kết phổ biến.

Bước 2: Bạn cần thêm một chút CSS để làm cho mọi thứ đẹp hơn:

.share-button {
    background: black;
    color: white;
    border-radius: 2px;
    padding: .5em;
    text-decoration:none;
}
.share-button:before {margin-right:.5em;}
.share-button.icon-facebook {background:#4867aa;}
.share-button.icon-twitter {background:#5ea9dd;}
.share-button.icon-google-plus {background:#db4b40;}

Tổng kết

Cách chèn các button chia sẻ mạng xã hội không sử dụng plugin là một trong những cách rất tốt cho ai muốn làm theme và không muốn dùng quá nhiều plugin. Bạn cũng có thể sử dụng các plugin đễ hỗ trợ các công việc này một cách nhanh gọn lẹ và có thể là đẹp hơn.

Nhưng nếu bạn bỏ ra chút thời gian để code sẽ giúp website của bạn load nhanh hơn, đương nhiên khi bạn sử dụng nhiều plugin cho website thì web của bạn sẽ bị chậm đi.

Nếu bạn biết chút về code bạn có thể trang trí cho các button của bạn đẹp hơn rất nhiều so với sử dụng các plugin có sẵn và sẵn sàng đặt nó ở mọi chỗ nào mà bạn muốn.

Leave a Reply

Your email address will not be published. Required fields are marked *

arrow