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> <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>
.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:.likebutton{margin:0 0 0 20px}
<div class='post-footer-line post-footer-line-3'/>
Trong thời gian qua có 2 số bạn báo với mình rằng không tìm thấy đoạn code ở bước 3 này. Nguyên nhân là do có 1 số bạn chưa chọn vào mục 'Mở rộng mẫu tiện ích'. Nếu đã chọn vào mục đó mà vẫn không tìm đượcthì các bạn thử tìm với từ khóa line-3 hoặc line-2 hoặc line-1 xem có thấy đoạn code tương tự như vậy không. Nếu tìm không có nữa thì tìm đoạn code sau.<div class='post-footer'>Nếu cả đoạn code trên cũng không thấy thì bạn gửi mẫu template mình xem thử thế nào.
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='likebutton'>
</div>
<div class='likebutton'>
<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. <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><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 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 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.
thôi rồi làm đủ các bước mà không hiển thị??
ReplyDeleteTest dùm nhé: thcsgiaoan.tk
Bạn thủ tham khảo bài này nhe. bài này mình mới viết lại
Deletehttp://honguyen546.blogspot.com/2014/02/them-nut-like-facebook-google-plus-twitter-vao-blogspot.html