Code social share cuối bài viết

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">
			<a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo $link;?>" target="_blank" class="fa fa-facebook" 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;?>&amp;url=<?php echo $link;?>" class="fa 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;?>&amp;title=<?php echo $title;?>" class="fa fa-linkedin"  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;?>&amp;media=<?php echo $thumb; ?>'&amp;description=<?php echo $title;?>" class="fa fa-pinterest"  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 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;?>&amp;text=<?php echo $title;?>" class="fa fa-reddit"  target="_blank" onclick="window.open(this.href,this.title,'width=500,height=500,top=300px,left=300px');  return false;"></a>  
		</div>
		<?php
		$social_share = ob_get_contents();
		ob_end_clean();
		return $content.$social_share;
	}
    else return $content;
}
add_filter('the_content', 'social_share', 25);

Để 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 {
    border: 1px solid #e8e8e8;
    border-radius: 0;
    margin: 15px 0 0 0;
    padding: 3px 5px;
}
.cs-social-share .fa {
    padding: 10px 20px;
    font-size: 20px;
    text-align: center;
    text-decoration: none;
    margin: 5px 2px;
}

.cs-social-share .fa:hover {
    opacity: 0.7;
}

.cs-social-share .fa-facebook {
  background: #3B5998;
  color: white;
}

.cs-social-share .fa-twitter {
  background: #55ACEE;
  color: white;
}

.cs-social-share .fa-linkedin {
  background: #007bb5;
  color: white;
}
.cs-social-share .fa-pinterest {
  background: #cb2027;
  color: white;
}

.cs-social-share .fa-tumblr {
  background: #2c4762;
  color: white;
}

.cs-social-share .fa-reddit {
  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/4.7.0/css/font-awesome.min.css" />

Chúc các bạn thành công!