Thích trang
    Trở thành fan của Tanchau123.blogspot.com

    Bạn muốn nhận tin tức mới nhất từ Tanchau123.blogspot.com? Hãy nhấn nút "Thích" bên dưới để nhận thông tin mới nhất từ chúng tôi trên Facebook.

T

a

n

chau123

Blog Giải Trí Tổng Hợp

trang chủ
Báo lỗi bài
    Báo lỗi thông tin bài viết

    Nhập thông tin báo lỗi vào ô bên dưới

12:50 ngày 25/2/12

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='&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.

5. Lưu template lại và tận hưởng kết quả
Chúc bạn thành công!!!


Theo Voquocan

Mới cập nhật

1 nhận xét

· Thêm biểu tượng cảm xúc

  1. Nặc danh20:14 8/12/12

    Aw, thiѕ was an іncredibly gоod poѕt.
    Taking the time and aсtual effort tο сreate a гeаlly goοԁ агticle… but whаt can
    I saу… Ι hеsitate a lot and dοn't manage to get nearly anything done.

    Also visit my webpage :: ycl.eu
    Check out my web blog :: Twitter Followers

    Trả lờiXóa