Namkna Blog

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

09/03/2012 | 59 nhận xét
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ảm ơn bạn đã đọc bài viết! Hãy like nếu bài viết có ích →

59 nhận xét

love Hằng
10/3/12 08:50 xóa commnet

njce blog


pl, visit my blog http://www.manhham.co.cc/

Reply
Elvis Anh
29/3/12 09:37 xóa commnet

" <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.

Reply

@Elvis Anh

Đoạn thứ 4 đó bạn.

Reply
Fairstar
19/6/12 19:12 xóa commnet

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.

Reply
Danh Vo
13/9/12 01:31 xóa commnet

Blog của cậu hay quá. Liên kết với Blog của mình nhé!
Ảnh bìa Facebook

Reply
Admin
23/9/12 01:54 xóa commnet

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..

Reply
Dung ma van
24/9/12 20:56 xóa commnet

@Admin Bỏ đoạn code này này bạn.:

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

Reply
Admin
24/9/12 23:03 xóa commnet

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 "".

Reply
Admin
24/9/12 23:04 xóa commnet

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 "".

Reply
hanh nguyen
2/11/12 09:14 xóa commnet

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

Reply
hanh nguyen
2/11/12 09:15 xóa commnet

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

Reply
BỜM THẰNG
29/11/12 23:52 xóa commnet

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

Reply
BỜM THẰNG
29/11/12 23:52 xóa commnet

yh của em, bom_nhox93

Reply
Namkna
30/11/12 15:20 xóa commnet

@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

Reply
Hàn Phi
25/3/13 16:36 xóa commnet

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!

Reply
Nam Tạ
25/3/13 20:25 xóa commnet

Vào phàn cài đặt và bấm cho phép liên kết ngược nha,

Reply
Hàn Phi
25/3/13 22:47 xóa commnet

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!

Reply
Nam Tạ
26/3/13 21:22 xóa commnet

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.

Reply
Hàn Phi
31/3/13 10:34 xóa commnet

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

Reply
Nam Tạ
31/3/13 21:14 xóa commnet

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.

Reply
Nguyễn Minh Thanh
2/4/13 12:51 xóa commnet

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

Reply
Hàn Phi
2/4/13 13:09 xóa commnet

Đ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!

Reply
Nam Tạ
2/4/13 21:03 xóa commnet

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'>

Reply
Hàn Phi
3/4/13 21:24 xóa commnet

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!

Reply
Nam Tạ
3/4/13 21:40 xóa commnet

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.

Reply
Nam Tạ
4/4/13 21:59 xóa commnet

Dán code trước dòng: <data:post.body/>

Reply
Tuấn Vinh
13/5/13 07:52 xóa commnet
Nhận xét này đã bị tác giả xóa. Reply
Duy Ly
8/7/13 08:59 xóa commnet

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

Reply
Duy Ly
8/7/13 14:33 xóa commnet

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

Reply
Nam Ta
9/7/13 10:53 xóa commnet

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'>

Reply
Nam Ta
11/7/13 21:53 xóa commnet

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>

Reply
vinh ta
29/7/13 21:19 xóa commnet

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/

Reply
Nam Ta
31/7/13 08:29 xóa commnet

Dưới tiêu fđề bài viết nha bạn,

Reply
Tú Dương Quang
31/7/13 09:20 xóa commnet

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

Reply
Nam Ta
31/7/13 20:41 xóa commnet

Thay đoạn:

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

thành:

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

Reply
Hải Bí
3/8/13 20:36 xóa commnet

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

Reply
Hải Bí
3/8/13 21:30 xóa commnet

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

Reply
Nguyễn Hữu Học
22/8/13 22:54 xóa commnet

''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 .

Reply
truong linh
22/8/13 23:52 xóa commnet

bạn xem BÀI NÀY nhé!

Reply
Nam Ta
24/8/13 21:22 xóa commnet

Đúng vậy. Đấy là thủ thuật facebook recommendations Cảm ơn truong linh đã trả lời hộ anh.

Reply
Dương Tất Thắng
13/10/13 02:49 xóa commnet

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?

Reply
simsodepmobifone
13/10/13 04:30 xóa commnet

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

Reply
Nam Ta
13/10/13 16:02 xóa commnet

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.

Reply
Nam Ta
13/10/13 16:03 xóa commnet

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

Reply
Dương Tất Thắng
14/10/13 02:29 xóa commnet

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

Reply
Ma Thành Công
14/10/13 04:51 xóa commnet

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

Reply
Nam Ta
14/10/13 06:48 xóa commnet

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ỉ :)

Reply
Nam Ta
14/10/13 06:49 xóa commnet

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

Reply

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

Reply

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?

Reply
Nam Ta
6/1/14 13:41 xóa commnet

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.

Reply
Nam Ta
6/1/14 13:46 xóa commnet

bạn hãy gửi mẫu cùng tem vào tavannam01@gmail.com mình thêm cho nha.

Reply

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?

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

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à.

Reply
Nam Ta
7/1/14 07:12 xóa commnet

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.

Reply
MINH KÌ ĐÔNG
6/3/14 14:07 xóa commnet

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

Reply
Nam Ta
6/3/14 17:19 xóa commnet

Đâ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.

Reply
Trần Trung Quang
7/6/14 00:03 xóa commnet

nó rất tốt.. cảm ơn

Reply

Đăng nhận xét

Cám ơn đã đọc bài viết!
» Không sử dụng những từ ngữ thô tục, vi phạm thuần phong mỹ tục
» Mọi thắc mắc, gợi ý hoặc bình luận xin chia sẻ bên dưới hoặc Gửi thư
» Hãy viết bằng tiếng Việt có dấu để mọi người có thể đọc!
» Nếu chèn code hãy mã hóa trước khi chèn vào nhận xét.
» Chèn link bằng thẻ: <a href="Link" rel="nofollow">Tên</a>
» Tạo chữ <b>đậm</b> <i>Ngiêng</i>
Cảm ơn bạn đã để lại nhận xét!

Mã Hóa Code