Thêm nút Google+1, Tweet, Like Facebook, Pin It buttons theo chiều ngang vào Blogspot

Vào Thứ Sáu, tháng 3 09, 2012 Question | Subscribe | Member | Comments | Library

Mặc dù butthons Facebook Like, Twitter Tweet và Google+1. Các nút chia sẻ này có thể được dễ dàng thêm vào bài viết Blogger bằng cách làm theo hướng dẫn của mình, sắp xếp chúng một cách hoàn hảosao cho hợp với bố cục của mỗi blog.
Để không mất công ngồi giải thích cách sắp xép các nút like hiện tại của bạn, namkna nghĩ rằng nó dễ dàng hơn thông qua việc cung cấp cho các bạn một Code sẵn có để các bạn sử dụng. Đơn giản chỉ cần loại bỏ các nút like hiện tại của bạn và thêm mã mới.
Bạn có thể xem hình sau để thấy rõ hơn:
Thêm nút Google+1, Tweet, Like Facebook, Pin It buttons theo chiều ngang vào Blogspot

☼ Cách Thêm nút Google+1, Tweet, Like Facebook, Pin It buttons theo chiều ngang vào Blogspot:

1- Đăng nhập vào Blogspot
Thêm nút Google+1, Tweet, Like Facebook, Pin It buttons theo chiều ngang vào Blogspot
2- Chọn Mẫu (Template)
3- Chọn Chỉnh sửa HTML (Edit HTML)
4- Tìm đoạn Code sau.
<data:post.body/>
- Lưu ý: Tùy người thiết kế mà một blog có từ 1 đến 3 đoạn như trên bạn phải chèn đúng vị trí nó mới hiển thị nha.
5- Thêm vào trước nó đoạn code bên dưới:
<!-- Scripts Start -->
<b:if cond='data:post.isFirstPost'>
<!-- Facebook -->
<div id='fb-root'/>
<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 = &quot;http://connect.facebook.net/en_US/all.js#xfbml=1&quot;;
fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));
</script>
<!-- Google +1 -->
<script type='text/javascript'>
(function() {
var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<!-- Twitter -->
<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=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>
</b:if>
<!-- Scripts End -->
<!-- Horizontal social buttons Start -->
<div class='horizontal-social-buttons' style='padding:10px 0 10px;'>
<!-- Twitter -->
<div style='float:left;'>
<a class='twitter-share-button' data-count='horizontal' data-lang='en' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>
</div>
<!-- Google +1 -->
<div style='float:left;'>
<g:plusone annotation='bubble' expr:href='data:post.url' size='medium'/>
</div>
<!-- Facebook Like+Send -->
<div style='float:left;'>
<fb:like colorscheme='light' expr:href='data:post.url' font='' layout='button_count' send='true' show_faces='false'/>
</div>
<!-- Pinterest Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='pin-wrapper' style='display: inline;'>
<a class='pin-it-button' count-layout='horizontal' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a>
<a href='javascript:void(run_pinmarklet())' style='margin-left:-93px; width:43px; height:20px; display:inline-block;'/>
</div> 
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'></script>
<script type='text/javascript'>
function run_pinmarklet() {
    var e=document.createElement(&#39;script&#39;);
    e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
    e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
    e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
    document.body.appendChild(e);
}
</script>  
</b:if> 
<!-- Pinterest End -->
</div>
<div style='clear: both;'/>
<!-- Horizontal social buttons End -->
6- Lưu mẫu lại và kiếm tra kết quả nha.
Chúc thành công!

Có 59 nhận xét & bạn hãy gửi ý kiến của mình!

  1. " <data:post.body/> " bạn xem giùm mình zới, mình dùng temp của Duy Phạm, trong đó thấy nhìu đoạn code như zậy wa, mình hok áp dụng nó đc. Bạn có thể thay thế bô Sharing của mình giùm được hok, mình ko biết mò ra sao.

    Trả lờiXóa
  2. Chính xác đó bạn. Hãy bấm Ctrl + F để tìm. Và thay vào đoạn cuối cùng là ok.

    Trả lờiXóa
  3. Blog của cậu hay quá. Liên kết với Blog của mình nhé!
    Ảnh bìa Facebook

    Trả lờiXóa
  4. TRỜI ƠI LÀM MÃI KHÔNG ĐƯỢC............... TOÀN THÔNG BÁO LỖI...CÓ MẤY ĐOẠN VÌ ĐOẠN NÀY BỊ THAY = ĐOẠN LÀM READMORE THEO THUTHUATBLOG..

    Trả lờiXóa
  5. @Admin Bỏ đoạn code này này bạn.:

    </div>
    <div style='clear: both;'/>
    <!-- Horizontal social buttons End -->

    Trả lờiXóa
  6. Lỗi khi phân tích cú pháp XML, dòng 2164, cột 3: The element type "div" must be terminated by the matching end-tag "".

    Trả lờiXóa
  7. Lỗi khi phân tích cú pháp XML, dòng 2164, cột 3: The element type "div" must be terminated by the matching end-tag "".

    Trả lờiXóa
  8. Có nhiều cách tao anh bia facebook để có những bức anh bia facebook dep .

    Các bạn thể tham khảo thêm cach lam anh bia facebook tại đây => anh bia cho facebook

    Trả lờiXóa
  9. Có nhiều cách tao anh bia facebook để có những bức anh bia facebook dep .

    Các bạn thể tham khảo thêm cach lam anh bia facebook tại đây => anh bia cho facebook

    Trả lờiXóa
  10. anh cho em cái yh đc ko :(. chả tìm thấy code đó đâu cả :(

    Trả lờiXóa
  11. @BỜM THẰNG Yahoo của anh là langtuluongsonbac_tq nhưng anh có mấy khi vào đâu. Em chọn mở rộng tiện ích mẫu chưa em. đoạn code <data:post.body/> blog nào cũng có vì đây là code bài đăng mà.

    Em có thẻ tìm đoạn code tương tự bên dưới:

    <data:post.body

    Trả lờiXóa
  12. Khi mình thêm cái này vào thì hay bị tình trạng:

    Nếu mình bấm vào nút LIKE thì nó hiện ra chữ "xác nhận". Muốn vậy phải bấm vào chữ "xác nhận" thì số lượt LIKE mới tăng lên là +1 nữa!

    Nam cho mình hỏi: Làm sao để khỏi hiện chữ "xác nhận" mà lượt LIKE vẫn được?!

    Blog của mình đây. Mời bạn bỏ chút thời gian xem thử nha:
    Cỏ Lấm Bụi Đường

    Cảm ơn bạn nhiều!

    Trả lờiXóa
    Trả lời
    1. Vào phàn cài đặt và bấm cho phép liên kết ngược nha,

      Xóa
  13. Tứ là phần: "Hiển thị liên kết ngược?" nằm trong mục "Cài đặt" của Blog của mình hả Nam?
    Ở đó có 2 lựa chọn: Ẩn và Hiển thị
    Mình đã chọn "hiển thị" và lưu rồi nhưng khi muốn LIKE bài đăng nào thì nó vẫn bị xuất hiện từ "xác nhận". Vẫn như cũ Nam ơi!

    Trả lờiXóa
    Trả lời
    1. Với một số blog khi áp dụng bị lỗi xác nhận này, đây là lỗi từ nhà cung cấp add this. Mình sẽ cập nhật và thông báo kết quả sớm cho bạn.

      Xóa
  14. Đã tìm ra được nguyên nhân và cách khắc phục chưa Nam?

    Trả lờiXóa
    Trả lời
    1. Oke đã tìm ra rồi mà quyên không nhắc bạn. bạn thay chỉnh sửa HTMNL và:

      Tìm thẻ:

      <html

      - Thay thế nó thành:

      <html xmlns:fb='http://ogp.me/ns/fb#'

      - Đoạn code trên sẽ giúp cho các phiên bản cũ của blogger cũng tương thích với plusin này và giúp plusin chạy tốt trên cả Internet explorer.Đồng thời nâng cao hiệu xuất của plusin.

      - Lưu lại và xem kết quả nha.

      Xóa
    2. Dùng cách của Nam ko được vào adthis lấy code chèn vào chỗ khác lại đc.Nhưng bây gjờ muốn bỏ xác nhận đi làm như bạn nói vẫn ko được?

      Xóa
    3. Phần xác nhậ của face là do chính sách mới của Face với nhưng trang mới tạo thường nó bắt xác nhận để chóng SPAM like. Sau một thời gian có lượng người nhất địn bấm xác nhận nó sẽ tự mất không hiện ô đó nữa.

      Xóa
    4. Nanm ơi?mình thêm vào được mấy nút kia rôi?nhưng khi Share bài lên facebook thì ảnh đại diện của bài đăng lại không hiện thì đúng mà lại hiển thị biểu tượng của Blog?

      Xóa
    5. Nam tìm được cái này chưa hộ mình với?Mình loay hoay mãi mà vẫn chưa tìm ra nguyên nhân.Nếu chia sẻ lên face mà hình đại diện không đúng thì không thu hút được người vào xem.Thanks bạn.
      Ps .Mình thấy trên fanpage của Nam các bài viết Nam chia sẻ đều hiện đúng hình bài đăng mà.

      Xóa
    6. Có 2 Nguyên nhân chính:

      1- Chưa có thẻ khai báo META. Bạn có thể thêm đoạn bên dưới vào sau thẻ </head>

      <meta expr:content='data:blog.pageTitle' property='og:title'/>
      <meta expr:content='data:blog.url' property='og:url'/>
      <meta content='article' property='og:type'/>

      2. Bạn không tải hình ảnh đó trực tiếp lên blogger.

      Xóa
  15. Làm sao để thanh này xuất hiện trên đầu mỗi bài viết vậy bạn?

    Trả lờiXóa
  16. Đoạn code mình như thế này:

    <html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='https://www.facebook.com/2008/fbml'>

    Cứ thay vào là bị báo lỗi, không được Nam ơi!

    Trả lờiXóa
    Trả lời
    1. Bạn có thể sửa thành 1 trong 2 dạng bên dưới:

      <html xmlns:fb='http://ogp.me/ns/fb#' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='https://www.facebook.com/2008/fbml'>

      hoặc

      <html xmlns:fb='http://ogp.me/ns/fb#' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

      Xóa
  17. Không được Nam ơi. Thử hết tất cả cá kiểu mà vẫn không được! Chán ghê!
    Rất cảm ơn bạn đã nhiệt tình hướng dẫn!

    Trả lờiXóa
    Trả lời
    1. Một lưu ý nữa bạn đã cài feedburner cho blog chưa. nếu chưa hãy cài nha.

      - Và nếu vẫn không dduwwocj bạn có thể share quyền vào tavannam01@gmail.con mình sẽ giúp.

      Xóa
  18. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  19. nó hiện cả ở trang chủ, làm thế nào chỉ hiện ở trang bài viết vậy admin?

    Trả lờiXóa
  20. dãy nút này hiện cả ở trang chủ, chèn vào đâu để chỉ hiện ở cuối bài viết thôi

    Trả lờiXóa
    Trả lời
    1. Em chèn vào sau một trong các đoạn dưới đây:

      Thẻ 1:

      <div class='post-footer'>

      Thẻ 2:

      <div class='post-footer-line post-footer-line-1'>

      Thẻ 3:

      <div class='post-footer-line post-footer-line-2'>

      Thẻ 4:

      <div class='post-footer-line post-footer-line-3'>

      Xóa
    2. Hãy thêm code của nó vào giữa cặp thẻ sau trước khi chèn nha:

      <b:if cond='data:blog.pageType == "item"'>

      </b:if>

      Xóa
  21. sau khi them code thì các nút đó sẽ hiển thị ở chỗ nào của blog hả add.

    http://facebookvideojacker-review.blogspot.com/

    Trả lờiXóa
  22. bác namka cho e hỏi. e muốn đặt mấy cái nút trên vào trang chủ chứ không phải vào từng bài đăng cụ thể thì làm ntn vậy

    Trả lờiXóa
    Trả lời
    1. Thay đoạn:

      <b:if cond='data:blog.pageType == "item"'>

      thành:

      <b:if cond='data:blog.url == data:blog.homepageUrl'>

      Xóa
  23. thank bạn nhiều thừ vài lần cuối cùng cũng đc

    Trả lờiXóa
  24. giúp mình với .Mình đã chèn được vào site nhưng khi bấm like rất khó..Bấm like sau đó di chuột để post facebook là nó lại nhảy...bạn thử vào test giúp mình ...demo: http://blogh3b.blogspot.com/2013/08/anh-girl-xinh-de-thuong-moi-cap-nhat.html

    Trả lờiXóa
  25. ''You Might Also Like''
    Bạn ơi cho mình hỏi cách tạo cái hộp như của bạn với .
    Ở phía dưới bên tay phải góc màn hình ý . Cám ơn bạn nhìu .

    Trả lờiXóa
  26. Cảm ơn Namkna!
    Mình đã áp dụng và thực hiện thành công!
    Mẫu của mình có 3 đoạn code , sau một hồi mình đã dán đoạn code trên sau đoạn thứ 2 và thành công, có thay đổi một chút vì chỉ giữ lại like facebook thôi và mình đưa nút like này xuống cuối mỗi bài đăng.
    Có một vấn đề mình muốn nhờ Namkna là khi nhấn like, nó hiện ra một bảng để có thể add commnet và post facebook, nhưng bảng này không hiện ra hết được, do đó mình không click và post facebook được, làm thế nào để khắc phục được vấn đề này vậy bạn Namkna?

    Trả lờiXóa
    Trả lời
    1. Bảng này bị ẩn do thuộc tính overflow:hidden nằm trong các thuộc tính của mỗi class và ị phần mai bạn xóa nó đi là oke.

      Xóa
    2. Cảm ơn Nam Ta, mình đã làm được rồi!

      Xóa
    3. Không có gì đâu bạn ak. :)

      Xóa
  27. Oài, namkna là người Tuyên Quang ak, add nick facebook mình nhé: https://www.facebook.com/hung.saukiu.9

    Trả lờiXóa
    Trả lời
    1. Uk bạn cũng là người TQ hả thế thì là người đồng hương cùng quê rồi :)

      Xóa
    2. Oh đọc face anh namkna suốt mà đến đấy mới biết là đồng hương Tuyên Quang @@

      Xóa
    3. UK anh sinh ra và lớn lên ở Hàm Yên - Tuyên Quang mà. Em ở khu vực nào của Tuyên Quang thế?. Khi nào có dịp anh em đi làm cốc trà đá nói chuyện chơi nhỉ :)

      Xóa
  28. Nam ơi?chỉ hộ mình cái.Mình loay hay mãi mà vẫn chưa được.http://www.caunang.org/

    Trả lờiXóa
    Trả lời
    1. bạn hãy gửi mẫu cùng tem vào tavannam01@gmail.com mình thêm cho nha.

      Xóa
  29. Mình làm như vậy được rồi nhưng mỗi khi ấn like facebook nó cứ bắt xác nhận mãi , bạn có cách nào khắc phục không chỉ giúp mình với

    Trả lờiXóa
    Trả lời
    1. Đây không phải là lỗi bạn ak.

      Hình thức này được face đưa ra để áp dụng với một số trang có lượng like tăng đột biến hoặc những trang mới tạo chưa có nhiều đánh giá và truy cập từ người dung (chưa có xếp hạng cụ thể). Họ bắt xác nhận để chứng tỏ trang của bạn không sử dụng robot hay tools để tăng like bất hợp phap.

      Bạn yên tâm khi có một lượng người nhất định bấm vào xác nhận để like và chia sẻ thì phần xác nhận đó sẽ tự động biến mât. Tức là nó chỉ áp dụng với trang của bạn trong một thời gian nhất định thôi. Hiện tại chưa thể can thiệp để bỏ nó đi, vấn đề ở đây là chờ đợi vào thời gian và cùng chờ mọi người xác nhận. bạn có thể nhờ bạn bè like và xác nhận để rút ngắn quá trình này.

      Xóa