Tin công nghệ và thủ thuật máy tính, phần mềm và blog

Xem gì?

Tiện ích

Blogger

MMO

Thứ Sáu, tháng 3 09, 2012

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

Blogspot Bookmark Blogspot Plugins Thiết Kế Thủ Thuật Blogger
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!

59 Comment: Thêm bình luận

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

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.

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

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

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

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

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

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

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

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

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

@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

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!

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

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!

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.

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

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.

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

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

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

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!

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.

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

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

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

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

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

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>

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/

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

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

Thay đoạn:

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

thành:

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

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

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

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

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

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?

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

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.

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

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

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

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

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

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

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?

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.

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

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?

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

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

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.

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

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

Bình luận của bạn: TOP

Thành viênTheo dõiHỏi đápBình luậnConvert

Thank you for comments!