Tạo nút like facebook, G+ và twitter


Home Home » Blogspot » Thủ thuật blogspot » Tạo nút like facebook, G+ và twitter

Tạo nút like facebook, G+ và twitter

Thứ Tư, 30 tháng 4, 2014
Ngoài việc chèn Facebook fanpage vào website, blog, chức năng like facebook là một trong những cách bạn có thể giúp cho bạn chia sẻ bài viết của mình nhanh nhất mà khỏi phải vất vả vào facebook, copy link bài viết, viết giới thiệu bài viết, rồi enter. Các thao tác kể trên được giảm bớt một cách tối đa, chỉ cần nhấn vào nút like facebook, G+ được tích hợp sẵn trên blog, bạn có thể giảm bớt số lượng các bước kể trên thành 2 bước, viết giới thiệu và enter.

Quá tiện lợi đúng không các bạn. Vậy thì còn chờ gì nữa. Cùng vào bài nào các bạn.

Sau đây mình xin giới thiệu các bạn các thêm nút like và nút google plus vào blogspot một cách dễ dàng nhất mà không cần phải tốn một khoảng diện tích trên website.

Cách 1: chỉ có nút like facebook và G+

1. Vào trang quản lý blog
2. Chọn Template rồi ấn vào nút Edit HTML

    3. Vào phần code của blog rồi ấn CTRL + F tìm với từ khóa <body
      4. Copy phần đoạn code sau bỏ vào sau thẻ <body>
      <style type="text/css"> #nt_like_wrapper {position:fixed; bottom:40%; margin-left:0px; float:left; background-color:#E7E7E7;padding:2px;z-index:10;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;border: 1px solid #CCCCCC;} #nt_like_wrapper .nt_button {float:left;clear:both;} </style> <div id='nt_like_wrapper'> <div style="margin:4px;"> <div class='nt_button' id='facebook'> <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'></script> <fb:like layout='box_count' show_faces='false'></fb:like> </div> <br /> <div class='nt_button' id='google'> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"> </script> <g:plusone size="tall"></g:plusone> </div> </div> </div>

      5. Các bạn có thể chỉnh sửa dịch trái, dịch lên trên xuống dưới với 2 thống số mình đã tô đỏ lên ở trên.

          Ví dụ: 
           - Bạn muốn dịch sang trái 1 đốt ngón tay: tăng margin-left:10px; Dịch xuống dưới: bottom:25%

      Cách 2: gồm 3 nút like facebook, G+ và Twitter

      1. Vào trang quản lý Blogspot.
      2. Vào Bố cục > thêm tiện ích > chọn HTML sau đó bạn copy đoạn code dưới đây vào:

      <style>
      /* Fixed Positioned AddThis Toolbox */
      .sharing_box_namkna {
      position: Fixed;
      top: 30%;
      left: 0%;
      border: 0px solid #00EE00;
      padding: 5px 5px 1px;
      -moz-border-radius: 4px;
      -webkit-border-radius: 4px;
      border-radius: 4px;
      background: #F0FFFF;
      width: 60px;
      min-height: 295px;
      }
      .sharing_box_namkna .item {
      width: 50px;
      margin: 5px 0 5px 0;
      }
      .twitter_float iframe
      {
      width:55px!important;
      }
      </style>
      <!-- SHARING BOX Fixed-Positioned Toolbox -->
      <div class='sharing_box_namkna'>
      <div style='text-align:center; margin-top:5px'>
      </div>
      <!-- TWITTER -->
      <div class='item twitter_float' style='margin-left:3px'>
      <a class='twitter-share-button' data-count='vertical' data-lang='en' href='https://twitter.com/share'>Tweet</a>
      </div>

       <!-- FACEBOOK -->
      <div class='item' style='margin-left:3px'>
      <div class='fb-like' data-font='verdana' data-layout='box_count' data-send='false' data-show-faces='true' data-width='44'></div>
      <div id='fb-root'></div>
      </div>
      <!-- G+ -->
      <div class='item' style='margin-left:5px'>
      <!-- Place this tag where you want the +1 button to render -->
      <g:plusone size='tall'></g:plusone>
      </div>
      <!-- OTHERSHARE -->
      <div class='item' style='margin-left:5px'>
      <!-- AddThis Button BEGIN -->
      <div class='addthis_toolbox addthis_default_style '>
      <a class='addthis_counter'></a>
      </div>
      <!-- AddThis Button END -->
      </div>
      </div>
      <!-- FAST SHARING SCRIPT -->
      <!-- TWITTER SCRIPT -->
      <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>
      <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/en_GB/all.js#xfbml=1";
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));</script>
      <!-- G+ SCRIPT -->
      <!-- Place this render call where appropriate -->
      <script type='text/javascript'>gapi.plusone.go();</script>
      <!-- STUMBLEUPON SCRIPT -->
      <!-- Place this snippet wherever appropriate -->
      <script type='text/javascript'> 
       (function() { 
           var li = document.createElement('script'); li.type = 'text/javascript'; li.async = true; 
            li.src = 'https://platform.stumbleupon.com/1/widgets.js'; 
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s); 
       })(); 
       </script>
      <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f660fb932fd0f15"></script>
      <!-- AddThis Button END -->

      3. Sau đó thêm đoạn code sau vào sau thẻ <head>:

      <script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>

      Bạn có thể thay đổi thanh trươt like sang bên trái, phải bằng cách thay đổi chữ bôi đỏ phía trên "left" thành "right" và ngược lại
      Chúc các bạn thành công!
      Chia sẻ bài viết
      Bài liên quan

      Comments[ 0 ]


      Đăng nhận xét