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

05/06/2012

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, twittergoogle + 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á.

cach lam floating share box

ả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;width=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; width:50px; height:62px;" allowTransparency="true"></iframe>
	</div>
	<div class="sf-plusone">
		<!-- Place this tag in your head or just before your close body tag -->
		<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
		<!-- Place this tag where you want the +1 button to render -->
		<g:plusone size="tall" href="<?php echo $url; ?>"></g:plusone>
	</div>
</div><!-- /social-float -->

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;
	width: 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:

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

Nếu các bạn thấy bài viết hữu ích thì giúp mình Like cái nhé !
  • Trần

    Bạn ơi sao mình làm nó báo lỗi ngay dòng code if( is_singular()) bạn có thể giải thích giúp mình được không, thanks.

    • Bạn kiểm tra xem có dư hay thiếu dấu { hoặc } trong các câu lệnh if, else hay không? Nếu có thể bạn copy đòng chữ thông báo lỗi cho mình nhé.