Tạo Nút Like facebook - Google+ - Tweet..

Hôm nay mình sẽ chia sẻ cùng các bạn cách chèn nút like Facebook, Google+,  Tweet , Share.

 Có hai cách hiển thị mà tôi muốn giới thiệu cùng các bạn

• Thanh trượt các nút ở giữa bên trái của blog
• Các nút nằm ngay dưới mỗi bài viết.

Đoạn Code tôi chia sẻ dưới này do tôi sưu tầm đựơc trên mạng, giờ rảnh rỗi lấy ra xem và phát hiện mình quên lưu nguồn cung cấp. rất xin lỗi tác giả và cám ơn bạn đã chia sẻ

• Dạng 1: nút like, chia sẻ ... nằm bên trái của màn hình

 Chọn Mẫu mà bạn thích: Có 2 mẫu là đứng và ngang. 

 Các bước thực hiện
Chọn Mẫu -- Chỉnh Sửa HTML -- Ctrl F -- Tìm ]]> , đặt đoạn code bên dưới trước (trên) ....]]>

        Mẫu đứng

/*like face g+ tweet*/

.addthis {position:fixed;background:#FFF;padding:10px;top: 250px;box-shadow: 0 2px 6px rgba(0,0,0,0.2);}

.addthis a{display:block}

        Mẫu ngang 

/*like face g+ tweet*/

.addthis {background:#FFF;padding:10px;box-shadow: 0 2px 6px rgba(0,0,0,0.2);}

.addthis a{display:block}

         Các bạn chèn đoạn code bên dưới đây vào trước thẻ đóng </body>.

<div class='addthis'>

<a class='addthis_button_facebook_like' fb:like:layout='box_count'/>

<a class='addthis_button_tweet' tw:count='vertical'/>

<a class='addthis_button_google_plusone' g:plusone:size='tall'/>

<a class='addthis_counter'/>

</div>

<script async='async' src='//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-53a7f124426602cb' type='text/javascript'/>

         Lưu mẫu :hoàn thành và tận hửơng thành quả

Dạng thứ 2: là nút like, chia sẻ..  nằm ngay dưới bài viết của các bạn. 

        Đặt đoạn scrip dưới trước thẻ:..... </head>

<script src='//s7.addthis.com/js/300/addthis_widget.js#pubid=xa-51fb7b814b14ef7b' type='text/javascript'/>
        Đặt đoạn code sau thẻ:  <data:post.body/>.......
<div class='addthis_toolbox addthis_default_style' style='padding:5px 2px'>
<a class='addthis_button_google_plusone' g:plusone:size='tall' style='padding-right:5px'/>
<a class='addthis_button_facebook_like' fb:like:layout='box_count' style='padding-right:5px'/>
<a class='addthis_button_tweet' style='padding-right:5px' tw:count='vertical'/>
<a class='addthis_counter'/>
</div>

Bạn nào có nhu cầu cao hơn thì tham khảo website addthis.com

• đăng  ký một tài khoản -- đăng nhập -- tools -- chọn mẫu -- làm như hứơng dẫn

chúc bạn thành công.