Thêm bộ nút Like của Facebook - Google Plus - Tweet vào blogspot

Trong các bài viết gần đây, thấy có khá nhiều bạn hỏi làm thế nào để thêm bộ nút chia sẻ mạng xã hội dạng nằm ngang bao gồm: Facebook, Google +, Tweet giống trong template tin tức Congly, nên hôm nay mình sẽ hướng dẫn các bạn cách add nó vào blogspot :-)

Thêm bộ nút Like của Facebook - Google Plus - Tweet vào blogspot


Cách thêm bộ nút chia sẻ mạng xã hội


Bước 1: Đăng nhập vào trang quản trị blog
- Vào "Mẫu" -> "Chỉnh sửa HTML".
- Thêm đoạn đoạn scripts sau vào trước thẻ </head>.
<script src='//s7.addthis.com/js/300/addthis_widget.js#pubid=xa-51fb7b814b14ef7b' type='text/javascript'/>

Bước 2: Tích hợp bộ nút chia sẻ vào Widget
- Vào "Bố cục" -> "Thêm tiện ích mới" tại vị trí bạn mong muốn.
- Chọn tiện ích HTML/JAVASCRIPTS.
- Thêm đoạn code sau vào nội dung của tiện ích:
<div class='addthis_toolbox addthis_default_style' style='padding:10px 2px'>
<a class='addthis_button_google_plusone' g:plusone:size='tall' style='padding-right:10px'/>
<a class='addthis_button_facebook_like' fb:like:layout='box_count' style='padding-right:10px'/>
<a class='addthis_button_tweet' style='padding-right:10px' tw:count='vertical'/>
<a class="addthis_counter"></a>
</div>

Bước 3: Lưu lại và xem kết quả :-)
Share on Google Plus

Tác giả: Đặng Việt Hoàng

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.
    Blogger Comment
    Facebook Comment

81 nhận xét :

  1. Hoàng ơi cho mình hỏi, mình có web www.tongdaivnpt.org, mình muốn gỡ cái công cụ chia sẻ mạng xã hội ở trên đầu web, phía bên phải thì làm ntn hả cậu?
    Vấn đề nữa là mình muốn giảm lề 2 bên của web và tăng khổ bài viết ra, cậu xem giúp mình nhé!
    Thanks!

    ReplyDelete
    Replies
    1. 1. Bạn tìm đến đoạn này và xóa nó đi nhé:
      <div class="span-8 last" style="
      ">
      <div id="top-social-profiles">
      <ul class="widget-container">
      <li class="social-profiles-widget">
      <a href="http://twitter.com/" target="_blank"><img alt="Twitter" src="http://2.bp.blogspot.com/-VCCu7Ke2LFA/TqLa2WjzHaI/AAAAAAAAAZQ/EbYw32VQMZs/s000/twitter.png" title="Twitter"></a><a href="http://facebook.com/" target="_blank"><img alt="Facebook" src="http://1.bp.blogspot.com/-XfyY7vEVwxw/TqLa2pTRTKI/AAAAAAAAAZY/VsLafhC-cfI/s000/facebook.png" title="Facebook"></a><a href="https://plus.google.com/" target="_blank"><img alt="Google Plus" src="http://1.bp.blogspot.com/-Pk6eu7KfCSc/TqLa23mRhkI/AAAAAAAAAZg/3z2_LnO_rTI/s000/gplus.png" title="Google Plus"></a><a href="http://www.linkedin.com/" target="_blank"><img alt="LinkedIn" src="http://1.bp.blogspot.com/--DsOMpiWAx8/TqLa3AFSrkI/AAAAAAAAAZo/az0gPzTJxjQ/s000/linkedin.png" title="LinkedIn"></a><a href="http://www.tongdaivnpt.org/feeds/posts/default" target="_blank"><img alt="RSS Feed" src="http://2.bp.blogspot.com/-9C5YFCHn_zY/TqLa3cI6d2I/AAAAAAAAAZw/IXGyHh1rUPE/s000/rss.png" title="RSS Feed"></a><a href="mailto:your@email.com" target="_blank"><img alt="Email" src="http://2.bp.blogspot.com/-S9XFHjp7xPA/TqLa3ZvOEpI/AAAAAAAAAZ4/FEQeeHY7yIQ/s000/email.png" title="Email"></a>
      </li>
      </ul>
      </div>
      </div>

      2. Mở rộng layout, chèn đoạn sau vào ngay trước thẻ </head>
      <style>
      #outer-wrapper,.span-24, div.span-24,#header-wrapper{width: 1160px;}
      .fp-slider{margin: 10px auto;width: 960px;}
      #main-wrapper {width: 70%;}
      </style>

      Lưu ý, mình để nguyên kích thước của slider, nếu bạn muốn kích thước giống các phần khác thì phần: .fp-slider{margin: 10px auto;width: 960px;} bạn sửa thành width:1160px luôn nhé

      Delete
  2. Cảm ơn bạn nhé!
    Cái Layout mình sửa lại rùi nhưng sao 2 bên lề nó vẫn to thế hả bạn?

    ReplyDelete
    Replies
    1. Bạn phải chèn ngay trước thẻ đóng head nhé, nếu không đc thì bạn tìm trực tiếp tới các thuộc tính css đó và sửa lại là đc, ví dụ bạn tìm đến #outer-wrapper và sửa thuộc tính width của nó thành: 1160px, các cái khác tương tự

      Delete
  3. Hoàng ơi, mình có trang www.manginternetvnpt.com dùng giao diện của bạn. Khi viết bài mới, mình muốn nó chuyển xuống các mục dưới, như là VNPT Đà Nẵng, VNPT Hồ Chí Minh thì làm ntn hả bạn?

    ReplyDelete
    Replies
    1. Bạn xem hướng dẫn chi tiết tại bài này nhé :)
      http://www.cuocsongmuonmau.info/2013/10/template-giao-dien-tin-tuc-cuc-dep.html

      Delete
  4. anh cho em hỏi cách đặt nút like facebook cho từng bài viết ở trang chủ của anh đc không ạ

    ReplyDelete
    Replies
    1. Cũng làm như bài viết, nhưng tới bc 2, bạn chỉ giữ lại đoạn code này thôi >a class='addthis_button_facebook_like' fb:like:layout='box_count' style='padding-right:10px'/<

      Delete
  5. Anh Hoàng cho hỏi minh muốn đăng bài nhưng mẫu của anh nhưng khi đăng bài thì không giống như mẫu cảu anh nhỉ xin được giúp đỡ của anh http://caycanhnamdinh.blogspot.com/

    ReplyDelete
    Replies
    1. Khi sửa lại các link trong template bạn làm mất một vài thẻ nên layout bị vỡ, bạn nên upload lại template nhé

      Delete
  6. Bạn ơi cho mình hỏi, làm sao để tạo link chia sẻ ở ngay phía dưới tiêu đề từng bài viết vậy, bạn chỉ giúp mình với, thanks !

    ReplyDelete
    Replies
    1. Cái này còn tùy từng template nữa bạn à, bạn thử tìm dòng:
      div class='post-header-line-1 có thể sẽ có nhiều hơn 1 dòng nhé, tốt nhất là bạn thử từng cái, copy toàn bộ code tại bước 2 dán vào trước dòng vừa tìm đc. Thêm dòng điều kiện dưới đây:
      <b:if cond='data:blog.pageType != "index"'>
      Code tại bước 2
      </b:if>

      Delete
  7. cám ơn bạn nhiều, nhờ bạn mà website của mình ngày càng hoàn thiện, mình muốn hỏi chút là mình muốn nút like là like fanpage của mình thì làm thế nào vậy bạn

    ReplyDelete
    Replies
    1. Bạn vào đây: https://developers.facebook.com/docs/plugins/like-box-for-pages/
      Sau khi hoàn thành, chọn Get Code, chuyển qua Tab I Frame rồi copy toàn bộ code cho vào Widget HTML/Javascripts là đc

      Delete
    2. Chào bạn, cho mình hỏi chút là giờ mình muốn add Page Google+ lên blogspot thì thêm kiểu gì

      Delete
  8. Bạn ơi, mình mới làm trang http://www.dautuneobux.blogspot.com mà muốn mở rộng cái khung like facebook làm sao?? nhỏ quá k thấy hết avatar...

    ReplyDelete
    Replies
    1. Ý bạn là like fanpage à? Bạn vào đây: https://developers.facebook.com/docs/plugins/like-box-for-pages/
      Tại mục Width và Height bạn chỉnh lại cho thích hợp là đc

      Delete
  9. Cho em hỏi, em dùng temlplate http://www.cuocsongmuonmau.info/2014/01/template-blogspot-responsive-chuan-seo.html, và dùng nút like ở trên, khi like nó Hiện E-Chemistry-một sản phẩm của cuộc sống muôn màu, làm thế nào để thay đổi cái 1 sản phẩm của cuộc sống muôn màu hả anh :d :d

    ReplyDelete
    Replies
    1. Trang e là gì, e vào mẫu, chỉnh sửa HTML, tìm đến đoạn <title> sẽ thấy dòng 1 sản phẩm của Cuộc sống muôn màu, xóa nó đi là đc :D

      Delete
  10. Bạn cho mình hỏi cái code like của web bạn được ko, chạy đến đâu là nó có ngang ở trên đến đó.

    ReplyDelete
    Replies
    1. Mình cũng đang định viết 1 tip hướng dẫn đây, bạn theo dõi blog nhé ^^

      Delete
  11. Bạn có thể chỉ mình cách đồng bộ hóa nút like,+1... không, chẳng hạn như trang này của mình thì khi vào các trang khác nhau số lượng like.. lại không giống nhau, với lại cách rút gọn bài viết nữa,kiểu như bài dài quá thì có chữ xem tiếp... và web này có thể thay đổi ngôn ngữ được không vậy? Thanks!

    ReplyDelete
    Replies
    1. Ý bạn muốn là, nút like chỉ dành cho trang chủ ấy à? Còn muốn có chữ xem tiếp, khi viết bài, bạn đặt con trỏ chuột tại vị trí muốn ngắn, rồi chọn Dấu ngắt trang (Kế bên nút upload hình ảnh) nhé ^^

      Delete
  12. cho mình hỏi làm thế nào để có dc chữ Author ở bình luận như web bạn vậy

    ReplyDelete
    Replies
    1. Mặc định của blogspot có sẵn rồi bạn ạ ^^

      Delete
  13. không hiểu sao mình làm như bạn nhưng riêng nút g+ no' không hiện đầy đủ lượt like mà chỉ hiện 10k+ bạn có cách nào để nó hiện đủ lượt like ko???

    ReplyDelete
    Replies
    1. Nhiều + quá nên nó hiện thế đấy bạn ^^

      Delete
  14. Em cũng làm đc rồi nhưng ko hiểu sao trước khi em đổi tên blog thì like bình thường còn sau khi em đổi tên mới thì không like được ở trang chủ nữa và những trang con lúc like thì nó bắt xác nhận nữa ;((. Bên G+ thì like bình thường. Like ở trang chủ thì khi xác nhận xong nó nhảy số lên 1 rồi biểu tượng face biến mất rồi nó hiện ra và trở về lại số 0. ;(( .Anh có biết nó bị lỗi gì không ạ. Cám ơn anh.

    ReplyDelete
  15. Bạn đặt cái " chia sẻ bài viết " mà cho nó chạy khi mình kéo lên hoặc xuống kiểu gì thế, chỉ cho mình vs. Thanks bạn nhiều :)

    ReplyDelete
  16. Bạn ơi, bạn có nhận thiết kế blog chuẩn seo bất động sản không bạn?

    ReplyDelete
    Replies
    1. Có chứ bạn, mình cũng có nhiều kinh nghiệm bên lĩnh vực bất động sản :D

      Delete
  17. minh muốn tạo cái khung chia sẻ bài viết có các nút like share như bạn thì làm thế nào, kéo xuống dưới mà nó vẫn nằm trên top đó

    ReplyDelete
    Replies
    1. Ngại thật, cái này nhiều bạn hỏi mà mình vẫn chưa sắp xếp đc thời gian viết 1 bài hướng dẫn :D Sẽ viết vào 1 ngày gần đây ^^

      Delete
  18. This comment has been removed by the author.

    ReplyDelete
  19. Mình thấy riêng cái Facebook Like dùng iframe load nhanh hơn hẳn cái JAVASCRIPTS. :D
    Website : HathanhKS

    ReplyDelete
  20. Bạn cho mình code nhận xét gần đây giống như bạn cho blogspot của mình được không,mình thử hết các kiểu nhưng đề không hiện.Thanks! http://hadaicon.blogspot.com/

    ReplyDelete
  21. Anh ơi cho em hỏi, web http://www.chemistrystudy.com/, sau khi em chèn Like , google + từ Addthis.com, không biết do lỗi gì mà nó like là chỉ like trang chủ thôi hả anh, nó không like từng bài viết anh ah

    ReplyDelete
  22. cho e hỏi Oops! Một cái gì đó đã đi sai. Bạn đóng popup quá nhanh. là sao ạ? giờ e phải làm sao để tiếp tục đc like

    ReplyDelete
  23. Bài viết của bạn rất hay mình đã thử và thành công tks. :) bạn http://thongtactoilettot.blogspot.com/

    ReplyDelete
  24. This comment has been removed by the author.

    ReplyDelete
  25. http://chuyennhatrongoitop.blogspot.com/

    ReplyDelete
  26. Bài viết rất hay và có ích cho mình, thank bạn rất nhiều
    --------------------------------
    Hoàng Kim Chi - 0938 45 8080 – 0938 58 03 58
    Phòng Kinh Doanh
    Fanpage: https://www.facebook.com/banhtrungthu.info
    Click nếu bạn quan tâm: Đại lý bánh trung thu Brodard giá sỉ uy tín nhất tại tphcm hoặc Dai ly banh trung thu Brodard gia si uy tin nhat tai tphcm

    ReplyDelete
  27. This comment has been removed by the author.

    ReplyDelete
  28. Mình đã add được rồi, thanks
    --------------------------------
    Phòng Khám Đa Khoa Hồng Bàng - 083 9690 888
    Click nếu bạn quan tâm: cắt bao quy đầu
    Fanpage: https://www.facebook.com/phongkhamhongbang

    ReplyDelete
  29. em ko giỏi về mấy chuyện công nghệ. xem hướng dẫn nhưng em vẫn ko tạo đc nút like cho bài viết của fanpage!!!

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
  30. Công ty Mai Phương Huy cung cấp dịch vụ ban may photocopy - cho thue may photocopy giá rẻ nhất đảm bảo chất lượng . Xin liên hệ chúng tôi để có giá cả hợp lý nhất.
    Mai Phương Huy Chân thành cám ơn người mua hàng!

    ReplyDelete
  31. anh ơi anh cho em hỏi làm sao em có thể hiện được ô comment facebook và google trong trang web này ạ..em thêm vào cũng không được anh ạ. http://www.loaphuong36.com/

    ReplyDelete
  32. Admin cho mình hỏi, sử dụng ứng dụng dịch vụ này có làm ảnh hưởng nhiều tới tốc độ tải trang web ko anh, và đặc biệt có ảnh hưởng tới Seo blogspot ko vậy?

    ReplyDelete
  33. Chào em. Anh đã thử thay thế Code Cho Website của mình là: wWw.Nhà Đất Đồng Xoài.Vn nhưng không được. Muốn làm nhãn chia sẻ như của em có được không em?
    Bán Nhà Đất Đồng Xoài Bình Phước Giá Rẻ

    ReplyDelete
  34. bạn ơi cho mình hỏi cái mình có dowload ở trên mạng về cái templates nhưng có cho hiển thị trên trang chủ có 4 bài đăng thôi rồi bên dưới có 1 dòng bài đăng mới hơn, trang chủ, bài đăng củ hơn giờ mình muốn cho nó hiển thị nhiều bài hơn ở trang chủ thì làm thế nào được.
    thank

    ReplyDelete
  35. Blog mình có nut Share rồi nhưng lại ko có nút Like, mình làm thế nào nhỉ bạn ơi??
    Địa chỉ Blog mình đây : http://canhohoangngan.blogspot.com/

    ReplyDelete
  36. Phần này làm sao để thêm được phần share vậy, code nó chỉ có like. aclass='a ddthis_butt on_fa ceb ook_l ike' fb:like:layout= 'button_co unt'

    ReplyDelete
  37. Bài viết rất hay và có ích cho mình, thank bạn rất nhiều
    Lý Thanh Trúc
    Chuyên viên tư vấn:
    Click nếu bạn quan tâm: Biểu hiện của bệnh trĩ hoặc phương pháp điều trị bệnh trĩ nội ngoại hiệu quả nhất

    ReplyDelete
  38. Bạn ơi, cho mình làm như trên nhưng các nút like nó hiện ngay dưới thanh menu ấy, mình muốn chuyển các nút like đo xuống cuối trang thì làm thế nào?

    ReplyDelete
  39. Chuyên viên
    Nếu bạn hoặc ai đó trong gia đình bạn chẳng may bị bệnh viêm họng, lâu ngày không khỏi dùng thuốc kháng sinh tổn hại sức khỏe. Hãy tham khảocách chữa viêm họng bằng đông y hoặc cách chữa bệnh phụ khoa

    ReplyDelete
  40. Bài viết rất hay và có ích cho mình, thank bạn rất nhiều
    Lý Thanh Trúc
    Chuyên viên tư vấn:
    Click nếu bạn quan tâm: thuốc chữa bệnh viêm gan b hoặc điều trị viêm gan b,thuốc trị viêm gan b

    ReplyDelete
  41. Bài viết rất hay và có ích cho mình, thank bạn rất nhiều
    Lý Thanh Trúc
    Chuyên viên tư vấn:
    Click nếu bạn quan tâm: thuốc đông y chữa viêm gan b hiệu quả hoặc thuoc dong y chua viem gan b nhanh nhất

    ReplyDelete
  42. Bài viết rất hay và có ích cho mình, thank bạn rất nhiều
    Lý Thanh Trúc
    Chuyên viên tư vấn:
    Click nếu bạn quan tâm: điều trị bệnh trĩ hiệu quả hoặc cach tri benh tri nhanh nhất , phương pháp dieu tri benh tri

    ReplyDelete
  43. Bài viết rất hay và có ích cho mình, thank bạn rất nhiều
    Lý Thanh Trúc
    Chuyên viên tư vấn:
    Click nếu bạn quan tâm: chữa bệnh men gan tăng cao hiệu quả, chua benh men gan tang cao nhanh nhất

    ReplyDelete
  44. nh công nghiệp (kỹ thuật số) Konica Minolta Bizhub PRESS C1085
    – 01 máy in nhanh công nghiệp (kỹ thuật số) Konica Minolta Bizhub PRESS C70hc
    – 02 máy photocopy - in đen trắng (giấy in tem bảo hành
    sâm cau
    khóa xe SH trong vài giây ở Sài Gòn, Trộm xe ngờ đâu trong tích tắc, bẻ khóa xe ở chốn đông người, ..
    củ ba kích

    hần tử in là hydropho bic, hay chất có khuynh hướng đẩy nước. Thực ra nước bản thân nó có thể được sử dụng để làm ẩm bản. Một vài máy in offset tờ rời có thể chọn sử dụng một mình nước để in các ấn

    ReplyDelete
  45. anh ơi em chèn cmt vô rồi mà sao em thử cmt nó không cho là sao anh
    http://www.quotesplus.tk/
    tks anh chỉ hộ e cái nha

    ReplyDelete