Tiện ích Social Sharing trượt cho blogspot - Thêm nút chia sẻ Facebook, Twitter, Digg and Stumble Upon cho Blogger

Hôm nay Tin Học Việt Nam 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.

Thêm nút chia sẻ Facebook, Twitter, Digg and Stumble Upon cho Blogger
Thêm nút chia sẻ Facebook, Twitter, Digg and Stumble Upon cho Blogger

Cách tiến hành thêm nút chia sẻ Facebook, Twitter, Digg and Stumble Upon cho Blogger:

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: "http://4.bp.blogspot.com/-YZe-IcKvGRA/T8op1FIjwYI/AAAAAAAABg4/j-38UjGnQ-Q/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.jsjquery.js về (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 Thêm nút chia sẻ Facebook, Twitter, Digg and Stumble Upon cho Blogger 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.


Thêm nút chia sẻ Facebook, Twitter, Digg and Stumble Upon cho Blogger


0 comments:

Post a Comment

All the comments on the website Vietnam Informatics will be moderated before being published on the blog. Note: If you leave backlink to your website, as long as accompanied by comments of Management commented that it will be accepted. If you want to display HTML code, you need to convert before using the tool below.


- You are free to comment with your own words if that is your personality
- All your comments are not controlled and will be posted immediately.
- Post by the blog's author wrote this yourself, you are free to copy without due acknowledgment; blog posts by the collector, you specify the source as blogs were recorded.
- We are not responsible for your comment ...

Everyone commented on Vietnam Informatics website will be moderated before being published on the blog. Note: If you leave a backlink to your website, as long as accompanied by appropriate comments, the comments will still be accepted. If you want to display HTML code, you need to convert before using the tool below.

 
Top