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.

Xem Demo

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 sau thẻ <body>

Lưu ý: với 1 số blog thì thẻ body có dạng

<body expr:class=’&quot;loading&quot; + 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 == &quot;item&quot;’>

<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.

Xong rồi lưu template lại và tận hưởng kết quả nào 🙂

Chú ý là khung button này chỉ hiện khi mở 1 bài viết nào đó. Nó không hiện trên trang chủ, trang label và trang archive nha.

Nếu có vấn đề gì thì bạn để lại lời nhắn nha. Mình sẽ trả lời trong thời gian sớm nhất.