Hiện tại các theme đều có trang bị social share ở cuối bài viết, tuy nhiên có một số theme không có. Hôm nay mình chia sẻ đoạn code hiển thị các nút Social share ở cuối bài viết. Các bạn chỉ cần chèn nó vào functions.php của theme đang dùng là được. Không cần dùng plugin cho rườm rà.
// Code Social Share
function social_share($content) {
if(is_singular('post')) {
$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();
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 = ob_get_contents();
ob_end_clean();
return $content.$social_share;
}
else return $content;
}
add_filter('the_content', 'social_share',10);Để trang trí cho nó, các bạn thêm đoạn css sau vào style.css của theme hoặc Giao diện -> Tùy biến -> css bổ sung
/* css social share */
.cs-social-share {
margin: 15px 0 0 0;
padding: 3px 0px;
}
.cs-social-share {
display: flex;
align-items: center;
justify-content: space-between;
}
.cs-social-share .fa-brands {
padding: 8px 10px;
font-size: 12px;
text-align: center;
text-decoration: none;
margin: 5px 0px;
}
.cs-social-share .fa-brands:hover {
opacity: 0.7;
}
.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 */Kết quả hiện ra như sau:
Trường hợp các biểu tượng social chưa hiện ra, hãy thêm đoạn sau vào header của theme. Hoặc các bạn cài thêm plugin FontAwesome, hoặc cài thêm plugin Insert Header and Footer rồi dán đoạn code bên dưới vào phần header
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" />Chúc các bạn thành công!
