Chèn nút share mạng xã hội vào bài viết WordPress không cần plugin

Bạn đang có một website làm bằng wordpress. Bạn đang cần tạo nút Share bài viết lên facebook,…. Trên mạng đã có nhiều bài hướng dẫn các plugin share nhưng phần lớn đều dùng plugin. Bản thân tôi thì chẳng thích dùng plugin mấy. Trừ những trường hợp cần thiết tôi mới sử dụng đến plugin.

Bài viết này tôi xin chia sẻ cách chèn nút share mạng xã hội vào bài viết WordPress không cần plugin. Nào, hãy tham khảo bài viết dưới đây của tôi. 

Cách chèn nút share mạng xã hội vào bài viết WordPress không cần plugin

Bài này tôi chỉ làm các mạng xã hội hay dùng nhất hiện nay. Để hiển thị được các nút chia sẻ ta cần chuẩn bị các phần dưới đây

Chuẩn bị CSS

    .socials-share {
    text-align: left;
    margin-bottom: 30px;
}

.socials-share a {
    padding: 1px 20px;
    color: #fff;
    line-height: 2em;
    text-decoration: none;
    border-radius: 2px;
    white-space: nowrap;
    display: inline-block;
    margin-bottom: 4px;
}

.socials-share span.fa {
    margin-right: 3px;
}

.bg-facebook {
    background: #3a5899;
}

.bg-facebook:hover, .bg-facebook:focus {
    background: #1d418d;
}

.bg-twitter {
    background: #00acee;
}

.bg-twitter:hover, .bg-twitter:focus {
    background: #0b93c7;
}

.bg-pinterest {
    background: #cb1e26;
}

.bg-pinterest:hover, .bg-pinterest:focus {
    background: #ae0e15;
}

Chuẩn bị html

<div class="socials-share">
    <h5 style="border-width: 0 0 0 3px;border-style: solid;border-color: #ff5b00;letter-spacing: 1px;padding-left: 10px;line-height: 1;color: black;">Chia sẻ:</h5>
    <a class="bg-facebook" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo $actual_link; ?>" target="_blank"><span class="fa fa-facebook">&ensp;Facebook</span></a>
 
    <a class="bg-twitter" href="https://twitter.com/share?text=&url=<?php echo $actual_link; ?>" target="_blank"><span class="fa fa-twitter">&ensp;Twitter</span></a>
    
    <a class="bg-pinterest" href="https://www.pinterest.com/pin/create/button/?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">&ensp;Pinterest</span></a>
</div>

Tổng code nguyên bài

<style>
    .socials-share {
    text-align: left;
    margin-bottom: 30px;
}

.socials-share a {
    padding: 1px 20px;
    color: #fff;
    line-height: 2em;
    text-decoration: none;
    border-radius: 2px;
    white-space: nowrap;
    display: inline-block;
    margin-bottom: 4px;
}

.socials-share span.fa {
    margin-right: 3px;
}

.bg-facebook {
    background: #3a5899;
}

.bg-facebook:hover, .bg-facebook:focus {
    background: #1d418d;
}

.bg-twitter {
    background: #00acee;
}

.bg-twitter:hover, .bg-twitter:focus {
    background: #0b93c7;
}

.bg-pinterest {
    background: #cb1e26;
}

.bg-pinterest:hover, .bg-pinterest:focus {
    background: #ae0e15;
}

</style>


<div class="socials-share">
    <h5 style="border-width: 0 0 0 3px;border-style: solid;border-color: #ff5b00;letter-spacing: 1px;padding-left: 10px;line-height: 1;color: black;">Chia sẻ:</h5>
    <a class="bg-facebook" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo $actual_link; ?>" target="_blank"><span class="fa fa-facebook">&ensp;Facebook</span></a>
 
    <a class="bg-twitter" href="https://twitter.com/share?text=&url=<?php echo $actual_link; ?>" target="_blank"><span class="fa fa-twitter">&ensp;Twitter</span></a>
    
    <a class="bg-pinterest" href="https://www.pinterest.com/pin/create/button/?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">&ensp;Pinterest</span></a>
</div>

=> Tìm vị trí mà bạn muốn nó hiển thị rồi dán vào là xong. Thông thường tôi hay đặt vào file singer.php. 

Lời kết

Hy vọng bài viết này sẽ giúp ích cho các bạn. Chúc các bạn thành công!

Xem chi tiết