Tạo Bộ Nút Like Facebook, Google+, Share Cho Wepsite

Tạo Bộ Nút Like Facebook, Google+, Share Cho Wepsite

Hùng Chiều / lúc 1:17:00 AM ngày Thursday, November 3, 2016 / 0 bình luận

Chia sẻ

Chọn hình thức muốn chia sẻ:
• Copy liên kết
• Facebook
• Google +
• Email

Theo dõi Ngô Hùng Chiều để nhận nhiều thủ thuật hay, hữu ích nhé!

Mẫu 1: Bộ nút Like Facebook, Google+, Share tổng hợp cho Blogspot theo chiều dọc.

/* LIKE G+ SHARE */ <style>
.sharing_box {
position: fixed;
top: 38%;
right: 0;
border: 0px solid #00EE00;
padding: 1px;
-moz-border-radius: 4px;
-webkit-border-radius: 0px;
border-radius: 0px;
background: #F0FFFF;
width: 50px;
min-height: 257px;
}
.sharing_box .item {
width: 50px;
margin: 1px;
}
.twitter_float iframe
{
width:50px!important;
}
</style>
<!-- SHARING BOX Fixed-Positioned Toolbox -->
<div class='sharing_box'>
<div style='text-align:center; margin-top:5px'>

</div>
<!-- TWITTER -->
<div class='item twitter_float' style='margin-left:0px'>
<a class='twitter-share-button' data-count='vertical' data-lang='en' href='https://twitter.com/share'>Tweet</a>
</div>
<!-- FACEBOOK -->
<div class='item' style='margin-left:0px'>
<div class='fb-like' data-font='verdana' data-layout='box_count' data-send='false' data-show-faces='true' data-width='44'>
</div>
<div id='fb-root'>
</div>
</div>
<!-- G+ -->
<div class='item' style='margin-left:0px'>
<!-- Place this tag where you want the +1 button to render -->
<g:plusone size='tall'></g:plusone>
</div>
<!-- OTHERSHARE -->
<div class='item' style='margin-left:0px'>
<!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style '>
<a class='addthis_counter'></a>
</div>
<!-- AddThis Button END -->
</div>
</div>
<!-- FAST SHARING SCRIPT -->
<!-- TWITTER SCRIPT -->
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- G+ SCRIPT -->
<!-- Place this render call where appropriate -->
<script type='text/javascript'>gapi.plusone.go();</script>
<!-- STUMBLEUPON SCRIPT -->
<!-- Place this snippet wherever appropriate -->
<script type='text/javascript'> 
(function() { 
var li = document.createElement('script'); li.type = 'text/javascript'; li.async = true; 
li.src = 'https://platform.stumbleupon.com/1/widgets.js'; 
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s); 
})(); 
</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f660fb932fd0f15"></script>
<!-- END ALL -->

Mẫu 2: Bộ nút Like Facebook, Google+, Share tổng hợp cho Blogspot theo chiều ngang khá đẹp.

Bộ nút Like Facebook, Google+, Share tổng hợp cho Blogspot theo chiều ngang

<!-- Share BEGIN -->

<center>

<style>

.botpost{margin: 0 0 0 10px;width:290px;height:68px;}

.google {float:left;width:290px}

.wdt_button{float:left;margin:5px}

</style>

<div class='botpost'>

<div class='google'>

<div class='wdt_button'>
<a class='addthis_button_facebook_like' fb:like:layout='box_count'/></a></div>
<div class='wdt_button'>
<a class='addthis_button_tweet' tw:count='vertical'/></a></div>
<div class='wdt_button'>
<a class='addthis_button_google_plusone' g:plusone:size='tall'/></a></div>
<div class='wdt_button'>
<a class='addthis_counter'/></a></div>
</div>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4d2267003d6799cf' type='text/javascript'/>

<!-- AddThis Button END -->

</script>

</center>