Saturday, February 25, 2012
Hướng dẫn tạo Button Facebook Like, Follow Twitter và Google +1 cho bài viết
Thay vì sử dụng bookmark sharing is sexy gồm toàn những mạng xã hội ít thông dụng ở Việt Nam thì mình đã nghĩ tới 1 hướng khác là tại sao mình lại không sử dụng bộ button của những mạng xã hội lớn như google, facebook, twitter. Tuy ít button hơn nhưng hiệu quả nó đem lại thì cao hơn nhiều. Cũng chính vì suy nghĩ này mà bài viết này đã ra đời. Mình cũng đã chỉnh sửa 1 tí cho nó trượt dọc qua bên trái luôn.
1. Vào thiết kế --- chỉnh sửa HTML --- Mở rộng tiện ích mẫu.
Chèn đoạn code bên dưới vào sao thẻ <body>
Lưu ý: với 1 số blog thì thẻ body có dạng
<body expr:class='"loading" + data:blog.mobileClass'>
Nói chung là cứ tìm với từ khóa <body là ok thôi.
<div id="fb-root"></div>
<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/vi_VN/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
2. Tiếp tục chèn đoạn code sau vào phía trên ]]></b:skin>
.likebutton-outer{z-index:30;top:100px;left:10px;position:fixed;width:90px; height:370px;background :#ddd;border-radius:10px; box-shadow: 5px 5px 5px #666}
.likebutton{margin:0 0 0 20px}
3. Tìm đoạn code sau:
<div class='post-footer-line post-footer-line-3'/>
4. Chèn đoạn code sau vào phía dưới đoạn code ở bước 3.
<b:if cond='data:blog.pageType == "item"'>
<div class='likebutton-outer'>
<div class='likebutton'>
<div class='fb-like' data-layout='box_count' data-send='false' data-show-faces='true' expr:href='data:post.url'/>
</div>
<div class='likebutton'>
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'/>
<g:plusone count='true' expr:href='data:post.url' size='tall'/>
</div>
<div class='likebutton'>
<a href="https://twitter.com/share" class="twitter-share-button" expr:href="data:post.url" data-lang="en" data-related="anywhereTheJavascriptAPI" data-count="vertical">Tweet</a>
<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>
</div>
<div class='likebutton'>
<script type="text/javascript">var linkhay_title = '';</script>
<script type="text/javascript">var linkhay_url = '';</script>
<script type="text/javascript">var linkhay_desc = '';</script>
<script type="text/javascript">var linkhay_style = '1';</script>
<script type="text/javascript" src="http://voquocan.googlecode.com/files/linkhay.js"></script>
</div>
<div class='likebutton'>
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_counter"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4ed73c0375dd2fe2"></script>
</div>
</div>
</b:if>
Đoạn code màu đỏ là chèn nút like của facebook.
Đoạn code màu xanh dương là chèn nút Google +1.
Đoạn code màu xanh lá là chèn nút follow của twitter.
Bonus thêm đoạn code màu tím là nút addthis chia sẻ lên những mạng xã hội lớn. có cả zing me nữa.
Đoạn code màu cam là chia sẻ lên link hay.
Các bạn nhớ chọn lọc lại nha. Xài hết cũng không vấn đề gì. Không xài cái nào thì xóa cái đó đi.
5. Lưu template lại và tận hưởng kết quả
Chúc bạn thành công!!!
Theo Voquocan
Comments[ 0 ]
Post a Comment