Cách làm hộp chia sẻ facebook, google + trượt theo web

Hôm nay mình sẽ chia sẻ với các bạn cách tích hợp các cộng cụ của các mạng xã hội nổi tiếng hiện nay như facebook, twitter và google + vào web / blogs của bạn. Có rất nhiều plugins và thủ thuật khác nhau để làm điều này , tuy nhiên mình sẽ giới thiệu đến các bạn cái mà mình đang dùng vì với mình nó là cái tốt nhất, bạn hãy cùng thử nghiệm và làm xem sao nhá.

ảnh minh họa

Bước 1 :
Vào file footer.php trong theme hiện tại đang dùng của bạn,tìm vị trí trước thẻ </body> và past đoạn code sau :

<?php
// URL to share
if( is_singular() ) {
	$url = get_permalink();
	$text = the_title(', ', false);
} else if ( is_category() || is_tag() ) {
	if(is_category() ) {
		$cat = get_query_var('cat');
		$url = get_category_link($cat);
	} else {
		$tag = get_query_var('tag_id');
		$url = get_tag_link($tag);
	}
	$text = single_cat_title(', false) . ' on ' . get_bloginfo('name');
} else {
	$url = get_bloginfo('url');
	$text = get_bloginfo('name') . ' - ' . get_bloginfo('description');
}
?>

Bước 2 : Copy đoạn code sau và past ngay sau đoạn code trên

<div id="social-float">
	<div class="sf-twitter">
		<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="thuthuatweb" data-url="<?php echo $url; ?>" data-text="<?php echo $text; ?>">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
	</div>
	<div class="sf-facebook">
		<iframe src="http://www.facebook.com/plugins/like.php?app_id=186708408052490&amp;href=<?php echo urlencode($url); ?>&amp;send=false&amp;layout=box_count&amp;awidth=50&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=62" scrolling="no" frameborder="0" style="border:none; overflow:hidden; awidth:50px; height:62px;" allowTransparency="true"></iframe>
	</div>
	<div class="sf-plusone">
		 
		<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
		 
		<g:plusone size="tall" href="<?php echo $url; ?>"></g:plusone>
	</div>
</div> 

Chú ý : ở phần twitter chỗ đoạn data-via=”thuthuatweb” bạn nhớ đổi tên thuthuatweb thành user name trên twitter của bạn.

Bước 3 : Đến đây bạn chỉ cần tạo css nữa là xong, và bạn past đoạn css sau vào style.css trong theme của bạn.

/** * Floating Social Buttons */
#social-float {
	position: fixed;
	left: 10px;
	bottom: 10px;
	awidth: 55px;
	padding: 10px 5px;
	text-align: center;
	background-color: #fff;
	border: 5px solid rgba(180, 180, 180, .7);
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	display: none;
}
.sf-twitter {
	height: 62px;
	margin-bottom: 10px;
}
.sf-facebook {
	height: 60px;
	margin-bottom: 10px;
}
.sf-plusone {
	height: 60px;
}

Vậy là đã hoàn tất, nếu có bạn nào làm không được chỗ nào thì để lại lời nhắn nha, mình sẽ giúp các bạn , chúc các bạn thành công.

Chuyên Mục: WordPress

Bài viết được đăng bởi webmaster