Hướng Dẫn Thêm Nút Social Share Cuối Bài Viết WordPress (Không Cần Plugin)

// Code hiển thị các nút Social Share ở cuối bài viết
function aivietnam_social_share_buttons($content) {
// Chỉ hiển thị trên các trang bài viết chi tiết (single post)
if(is_singular(‘post’)) {
// Lấy thông tin bài viết hiện tại
$title = htmlspecialchars(urlencode(html_entity_decode(get_the_title(), ENT_COMPAT, ‘UTF-8’)), ENT_COMPAT, ‘UTF-8’);
$link = urlencode(get_permalink());
$thumb = get_the_post_thumbnail_url();

// Bắt đầu bộ đệm đầu ra để lưu trữ HTML
ob_start();
?>
<div class=”cs-social-share”>
<div class=”title-share”>Chia sẻ bài này cho bạn bè:</div>
<div class=”share-icon”>
<a href=”https://www.facebook.com/sharer/sharer.php?u=<?php echo $link;?>” target=”_blank” class=”fa-brands fa-facebook-f” onclick=”window.open(this.href, this.title, ‘width=500,height=500,top=300px,left=300px’); return false;”></a>
<a href=”https://twitter.com/intent/tweet?text=<?php echo $title;?>&url=<?php echo $link;?>” class=”fa-brands fa-twitter” target=”_blank” onclick=”window.open(this.href, this.title, ‘width=500,height=500,top=300px,left=300px’); return false;”></a>
<a href=”https://www.linkedin.com/shareArticle?mini=true&url=<?php echo $link;?>&title=<?php echo $title;?>” class=”fa-brands fa-linkedin-in” target=”_blank” onclick=”window.open(this.href, this.title, ‘width=500,height=500,top=300px,left=300px’); return false;”></a>
<a href=”https://pinterest.com/pin/create/button/?url=<?php echo $link;?>&media=<?php echo $thumb; ?>’&description=<?php echo $title;?>” class=”fa-brands fa-pinterest-p” target=”_blank” onclick=”window.open(this.href, this.title, ‘width=500,height=500,top=300px,left=300px’); return false;”></a>
<a href=”https://www.tumblr.com/widgets/share/tool?canonicalUrl=<?php echo $link;?>” class=”fa-brands fa-tumblr” target=”_blank” onclick=”window.open(this.href, this.title, ‘width=500,height=500,top=300px,left=300px’); return false;”></a>
<a href=”https://www.reddit.com/submit?url=<?php echo $link;?>&text=<?php echo $title;?>” class=”fa-brands fa-reddit-alien” target=”_blank” onclick=”window.open(this.href, this.title, ‘width=500,height=500,top=300px,left=300px’); return false;”></a>
</div>
</div>
<?php
$social_share_html = ob_get_contents();
ob_end_clean();

// Nối chuỗi HTML của các nút share vào cuối nội dung bài viết
return $content . $social_share_html;
} else {
// Nếu không phải trang bài viết, trả về nội dung gốc
return $content;
}
}
add_filter(‘the_content’, ‘aivietnam_social_share_buttons’, 10);

Bước 2: Thêm CSS để trang trí cho các nút Share

Sau khi thêm code PHP, các nút chia sẻ đã xuất hiện nhưng chưa có giao diện. Bây giờ, chúng ta sẽ thêm CSS để chúng trông đẹp mắt hơn.

Cách an toàn và dễ dàng nhất là vào Giao diện -> Tùy biến -> CSS bổ sung và dán đoạn code dưới đây vào:

/* === CSS Social Share === */
.cs-social-share {
margin: 25px 0 10px 0;
padding: 15px 10px;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap; /* Giúp xuống dòng trên màn hình nhỏ */
}

.cs-social-share .title-share {
font-weight: bold;
margin-right: 15px;
}

.cs-social-share .share-icon a {
display: inline-block;
padding: 8px 12px;
font-size: 16px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 4px;
transition: opacity 0.3s ease;
}

.cs-social-share .share-icon a:hover {
opacity: 0.8;
}

/* — Màu sắc đặc trưng cho từng mạng xã hội — */
.cs-social-share .fa-facebook-f { background: #3B5998; color: white; }
.cs-social-share .fa-twitter { background: #55ACEE; color: white; }
.cs-social-share .fa-linkedin-in { background: #007bb5; color: white; }
.cs-social-share .fa-pinterest-p { background: #cb2027; color: white; }
.cs-social-share .fa-tumblr { background: #2c4762; color: white; }
.cs-social-share .fa-reddit-alien { background: #ff5700; color: white; }
/* === End Social Share === */

Xử lý sự cố: Icon không hiển thị?

Nếu sau khi thực hiện các bước trên mà bạn chỉ thấy các ô màu trống rỗng, nguyên nhân là do website của bạn chưa được nhúng thư viện icon Font Awesome.

Để khắc phục, bạn chỉ cần thêm đoạn mã sau vào phần <head> của website. Cách dễ nhất là sử dụng plugin Insert Headers and Footers và dán đoạn code sau vào ô “Scripts in Header”:

<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css” />

Lời Kết

Vậy là chỉ với vài bước đơn giản, bạn đã thành công tích hợp các nút chia sẻ mạng xã hội vào cuối bài viết mà không cần đến plugin. Giải pháp này không chỉ giúp tăng tương tác cho bài viết mà còn đảm bảo hiệu suất tối ưu cho website của bạn.

Chúc các bạn thành công! Nếu có bất kỳ thắc mắc nào, đừng ngần ngại để lại bình luận bên dưới.