Tạo tiện ích nút like/share trượt cho blog

Đăng bởi Admin | 12/8/13 | 0 nhận xét

Hôm nay namkna chia sẻ cho các bạn tiện ích nút like/share lên các mạng xã hội cho bài viết của blog. Tiện ích được tạo bởi way2blogging. Tiện ích này có đặc điểm là hiển thị trên đầu bài viết của bạn, trong khi bạn di chuyển xuống dưới để đọc bài viết thanh ngang xã hội này được cố định trên cùng của bài viết. Rất thuận tiện cho độc giả like/ share (thích/chia sẻ) ngay lập tức trên thanh nổi. Widget này đi gồm các nút like của: Twitter, Facebook, Google plus, Pinterest, StumbleUpon và Digg nút.

Xem Demo: Demo for post
Ảnh minh họa:

☼ Cách tiến hành:
1- Đăng nhập vào Blog
2- Vào Mẫu (Template)

3- Chọn Chỉnh sử HTML (Edit HTML) -> Tiếp tục (Proceed)
4- Chọn Mở rộng tiện ích mẫu (Expand Template Widgets) -> Xem video:

5- Đây tiện ích dựa trên jQuery, và blog của bạn phải có plugin jQuery. nếu blog của bạn đã có một plugin jQuery mới nhất, thì hãy bỏ qua bước 5 này và trực tiếp thực hiện theo từ bước 6.

Nếu chưa có Jquery thì thêm đoạn mã dưới đây trước thẻ đóng </ head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>

6- Đoạn code tiếp theo không bao gồm lệnh gọi file Jquery nó chỉ chạy khi ta xem các bài viết do vậy sẽ giảm tải thời gian khi bạn xem các trang không phải bài viết như trang chủ, trang label,...

- Dán code bên dưới vào trước thẻ </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
 #w2bSocialFloat {clear:both;padding: 6px 0;display:block;background:#FFFFFF;}
 #w2bSocialFloat td{padding:4px;margin:0;border:none;}
 #w2bSocialFloat td iframe{max-width:82px;width:82px !important;}
 #w2bSocialFloat.w2bFloatSocial{position: fixed;top:0;z-index:9999999;border-bottom:1px solid #ccc;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.15);-moz-box-shadow:0 1px 1px rgba(0,0,0,0.15);box-shadow:0 1px 1px rgba(0,0,0,0.15);}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
// Set the Top Offset
$theOffset = 0;

jQuery(document).ready(function(b){var a=b("#w2bSocialFloat");a.wrap('<div id="w2bSocialPlaceholder"></div>').closest("#w2bSocialPlaceholder").height(a.outerHeight());a.width(a.outerWidth());e=a.offset().top-$theOffset;b("#w2bSocialFloat iframe[src*=plusone]").closest("div").css("max-width","82px");b(window).scroll(function(){d=b(this).scrollTop();d>=e?a.addClass("w2bFloatSocial"):a.removeClass("w2bFloatSocial");f=b(".post");if(f.length!=0){c=f.outerHeight()+f.offset().top;d>=c?a.stop().animate({top:"-150px"}):a.stop().animate({top:$theOffset+"px"})}else d>=e?a.css("top",$theOffset+"px"):a.css("top","0")})});
/*]]>*/
</script>
<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b_blogger_pinit.js"></script>
<script type="text/javascript">
/*<![CDATA[*/
 // Twitter
 (function(a,b,c){var d=a.getElementsByTagName(b)[0];if(!a.getElementById(c)){a=a.createElement(b);a.id=c;a.src="//platform.twitter.com/widgets.js";d.parentNode.insertBefore(a,d)}})(document,"script","twitter-wjs");
 // Google + (plus)
 (function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://apis.google.com/js/plusone.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();
 // Stumbleupon
 (function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://platform.stumbleupon.com/1/widgets.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();
 // Digg
 (function(){var a=document.createElement("SCRIPT"),b=document.getElementsByTagName("SCRIPT")[0];a.type="text/javascript";a.async=true;a.src="http://widgets.digg.com/buttons.js";b.parentNode.insertBefore(a,b)})();
/*]]>*/
</script>
</b:if>

7- Tiếp theo là chọn vị trí đặt button like/share trên bài viết.
- Thêm đoạn code bên dưới vào sau thẻ <data:post.body/> . 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id="w2bSocialFloat" class="w2bSocialFloat">
<table  width="100%" class="w2bSocialFloat">
 <tr>
  <td>
   <a href="https://twitter.com/share" class="twitter-share-button" expr:data-url="data:post.url" expr:data-text="data:post.title">Tweet</a>
  </td>
  <td>
   <iframe expr:src="&quot;//www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&quot;" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowTransparency="true"></iframe>
  </td>
  <td>
   <div expr:id="&quot;w2bPinit-&quot; + data:post.id" style="display: none;visibility: hidden;height: 0;width:0;overflow: hidden;" class="w2bPinitButton"> 
    <data:post.body/>
    <script type="text/javascript">
     w2bPinItButton({ 
      url:"<data:post.url/>", 
      thumb: "<data:post.thumbnailUrl/>", 
      id: "<data:post.id/>", 
      defaultThumb: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPhIw1cBW_VfcndwK0-EEOEfmlo3FuwENsxm9o3pa3GtPPWvKjV3fsOhg9ym_ljo7S_CrblqvGJha6-eJU5kTm94Vcq37jJn0O-mVk9AiSGCCn5E_Slk2MuU6ND8uMdWensb1rhhJ0KJlM/s1600/w2b-no-thumbnail.jpg", 
      pincount: "horizontal" 
     }); 
    </script> 
   </div>
  </td>
  <td>
   <div class="g-plusone" data-size="medium" expr:data-href="data:post.url"></div>
  </td>
  <td>
   <su:badge layout="1" expr:location="data:post.url"></su:badge>
  </td>
  <td>
   <a class="DiggThisButton DiggCompact"></a>
  </td>
 </tr>
</table>
</div>
</b:if>

8- Lưu mẫu lại

Lưu mẫu và kiểm tra các trang bài viết trên blog của bạn, một jQuery làm việc và tuyệt vời với các nút mạng xã hội thanh nằm ngang nổi  trên blog của bạn.

Cập nhật:
- Nếu blog của bạn sử dụng auto readmore bạn sẽ tìm thấy 3 thẻ <data:post.body/> . Khi đoa bạn hãy chèn đoạn code bên trên (bước 7) ngay sau đoạn code như bên dưới:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>

- Để đổi màu nền của thanh share, bạn hãy thay đổi phần màu đỏ background:#FFFFFF;ở bước 6. Bạn có thể lấy mãu màu Tại đây.
- Để sử dụng lâu dài các bạn hãy tải 2 file javarscrip là: w2b_blogger_pinit.js và jquery.jsvề (xem cách tải Tại đây) sau đó Uplaod lên host riêng (host Google code Tại đây hoặc Dropbox Tại đây) để sử dụng lâu dài nha.
Hy vọng tiện ích này là hữu ích cho bạn, xin vui lòng để lại ý kiến ​​của bạn, và chia sẻ bài viết.

Theo:way2blogging - Namkna

Thu thuat vi tinh