"Tạo và chèn nút "Like" của facebook vào blogger"

Chắc hẳn là bạn không còn lạ gì đối với website có tên facebook, một trang mạng xã hội lớn nhất hiện nay. Website được thành lập bởi Mark Zuckerberg, ngày nay trang mạng này được rất nhiều người yêu thích và sử dụng nó để kết nối mọi người với nhau, liên lạc cùng bạn bè, tải không giới hạn hình ảnh, đưa các liên kết và video và để hiểu thêm về những người họ đã gặp... Facebook còn cung cấp rất nhiều công cụ mà chúng ta có thể sử dụng cho blog/web để giúp người dùng có thể sử dụng facebook ngay trên blog. Một trong các công cụ đó là "Like button", công cụ rất hữu ích sao chúng ta không đưa nó vào blog của mình? Hôm nay mình xin chia sẽ cách để tạo và đưa tiện ích này vào blogger, nếu bạn chưa biết có thể tham khảo bài viết này.

Hình ảnh minh họa
I. Tạo nút Like (Like button)

1. Để tạo nút Like thì trước tiên bạn hãy tạo cho mình một tài khoản trên trang facebook. Nếu bạn đã có tài khoản thì hãy đăng nhập vào facebook, nếu chưa có tài khoản bạn hãy click vào đây và điền đầy đủ thông tin yêu cầu để tạo ngay một tài khoản.
2. Sau khi đã có tài khoản facebook bạn hãy đăng nhập vào tài khoản của mình và click vào đây để tiến hành tạo nút Like.

3. Tại giao diện hiện ra bạn hãy điền thông tin như bên dưới, tại ô URL to Like bạn hãy điền địa chỉ blog của bạn (ví dụ: http://www.traidatmui.com), phần Layout Style để bạn chọn bố cụ cho tiện ích này. Bạn có thể tùy chọn và xem trước tiện ích này (phần bên phải) trước khi đưa nó vào blog.
4. Sau khi tùy chỉnh xong, bạn hãy click "Get Code" để lấy mã chèn vào blog.
II. Chèn tiện ích vào blogger

1. Đăng nhập tài khoản Blogger
2. Vào thiết kế và chọn chỉnh sửa HTML (chọn mở rộng mẫu tiện ích)
3. Chọn vị trí đặt code (code này là phần bạn code bạn vừa copy ở phần "Get Code" ở trên).
- Nếu muốn tiện ích này nằm bên dưới tiêu đề và trên nội dung bài viết bạn hãy tìm và thêm code ở trên vào ngay sau code bên dưới.
<div class='post-header-line-1'/>

- Nếu muốn nó nằm ở cuối bài viết bạn tìm và chèn code trên vào ngay sau code bên dưới.
<data:post.body/>

4. Cuối cùng là save template lại.

» Cập nhật cách chèn nút like cho từng bài viết trên Blogspot (10/09/2011)

Ở trên là các bạn đã biết cách lấy code để chèn nút Like của facebook vào trong blogger, tuy nhiên đối với code trên thì người dùng khi nhấn vào nút like tức là họ đánh giá chung cho tên miền của bạn ví dụ là http://www.traidatmui.com. bây giờ bạn muốn xem đánh giá like cho từng bài viết trên blog thì làm như thế nào, tức là số người nhấn nút Like của bài viết này không ảnh hưởng tới nút like của bài viết khác. Để làm được điều đó, chúng ta chỉ cần thực hiện một cách đơn giản bên dưới.

Thông thường sau khi bạn lấy code của Facebook nó sẽ có 3 dạng. Lưu ý là ở đây mình chỉ lấy code chính cần chỉnh sửa thôi còn các code còn lại giữ nguyên nhé.

a. Dạng xfbml
<fb:like href="http://www.traidatmui.com" send="false" layout="box_count" width="450" show_faces="true"></fb:like>

b. Dạng HTML5
<div class="fb-like" data-href="http://www.traidatmui.com" data-send="false" data-layout="box_count" data-width="450" data-show-faces="true"></div>

c. Dạng Iframe
<iframe src="//www.facebook.com/plugins/like.php?app_id=197105643690572&amp;href=http%3A%2F%2Fwww.traidatmui.com&amp;send=false&amp;layout=box_count&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=90" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:90px;" allowTransparency="true"></iframe>

Các bạn thấy ở 3 code trên có chung một phần đó là href="http://www.traidatmui.com"phần này xác định link đánh giá. Bây giờ bạn thay phần đánh dấu màu đỏ
href="http://www.traidatmui.com"

thành
expr:href='data:post.url'

Như vậy là nút like có thể hiển thị theo từng bài viết trên Blogpsot của bạn

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

Xem khác cùng chủ đề

16 nhận xét | Viết lời bình

7/13/2011 03:57:00 SA Trả lời

đa số IP ở Việt Nam đều bị chặn, cũng rất nhiều người không biết cách fake ip, chắc chèn cái này vào đa số không sử dụng được!

Admin
9/09/2011 11:01:00 CH Trả lời

Mình vừa cập nhật thêm tiện ích nút Like cho từng bài viết, nếu bạn cần có thể chèn ngay vào blog của mình. {-}

Admin
9/09/2011 11:04:00 CH Trả lời

Vấn đề Facebook bị chặn có thể khắc phục nhanh mà. Bạn có thể xem bài viết tại đây hoặc tại đây

6/12/2012 04:08:00 SA Trả lời

Thanks anh đã chia sẻ!
Nhưng em bực mình quá, ngồi cả buổi trưa mà, mà add nó vào sau cái code mà khi click vào xem thử thì nó chẳng hiện ra cái gì cả. Em làm đúng và tìm đúng theo hướng dẫn của a rồi ah.
Một điều nữa, có lẽ không được vì bây giờ mục Get code của FB khác với hình anh gửi ở đây. Nó có những 2 phần lận. Anh xem và trả lời giúp e cũng các bạn mới làm Blogspot nhé.
Sớm giúp e ah. Em muốn chèn nó cuối cái cuối bài của Blog này ah: http://hoinachhoichan.blogspot.com/

Admin
6/12/2012 07:58:00 SA Trả lời

Nếu em làm đúng như vậy thì nó sẽ hiển thị thôi nhưng em phải xem ở từng dạng thì nó sẽ có code khac nhau. Ví dụ ở dạng HTML5 thì sẽ có 2 đoạn code bạn đưa vào template cả 2 đoạn đó.

Còn em muốn đặt ngay sau mỗi bài viết thì chỉ cần cho code đó vào ngay sau đoạn code bên dưới là được:
[code]<div class='post-footer-line post-footer-line-1'/>[/code]

6/13/2012 01:33:00 SA Trả lời

Hi, thanks anh đúng là pro có khác. Trỏ cái chuẩn ngày. Em add được rồi.

Chúc anh sức khỏe và thành công.
Ah a vô xem giúp em về cấu trúc xem có gì bất tiện hoặc không hợp lý thì cho e vài lời khuyên với ah!

http://hoinachhoichan.blogspot.com/

Admin
6/13/2012 09:03:00 SA Trả lời

Về giao diện và màu sắc thì anh không góp ý gì vì mỗi người có một sở thích và thẩm mỹ riêng. Anh chỉ thấy em nên xóa thanh điều khiển (Navbar) đi và hiển thị bài viết dạng tóm tắt sẽ trở nên chuyên nghiệp hơn.

7/24/2012 03:27:00 SA Trả lời

Đình ơi, mình làm Like FB cho từng bài viết theo đúng cách bạn chỉ và cũng hiện ra buuton nhưng sao vài ngày mình kiểm tra lại thì nó ko còn hiện ra button like FB nữa. Mình đặt nó ngay sau: div class='post-footer-line post-footer-line-1'/.

Vậy mình bị lỗi gì vậy Đình???? Hướng dẫn mình lại nha. Thanks
My blog: http://monngoncuoituan.blogspot.com

Admin
7/24/2012 03:59:00 SA Trả lời

Bạn hãy xem trong template đã có file JS bên dưới chưa, nếu chưa bạn hãy thể code bên dưới vào trước thẻ </head>
[code]<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>[/code]

7/24/2012 10:57:00 CH Trả lời

Thanks bạn, mình đã khắc phục xong lỗi button Like FB. Nhưng hiện tại blog của mình vẫn chưa khắc phục phần hiển thị các bài đăng theo nhãn dù mình đã làm đúng theo hướng dẫn cho các trường hợp nhưng hiện tại nó vẫn hiện ra: Không bài đăng nào có nhãn Thông tin chia sẻ. Hiển thị tất cả bài đăng. và nằm ở dưới các wiget bài viết.

Vậy mình khắc phục như thế nào? Hướng dẫn giúp mình nhé! Thanks bạn

7/26/2012 11:20:00 CH Trả lời

Đình ơi,hướng dẫn mình lại thủ thuật ẩn phần hiển thị các bài đăng theo nhãn cho blog của mình đi.

8/21/2012 07:57:00 CH Trả lời

Mình tên ĐẠT có dt cho Định Vào Lúc sáng. Mình có làm thử mấy cách ở trên mà vẫn ko dc. Ko biết có sai sót chổ nào ko , bạn comment giúp mình nhé.Mình muốn chèn vào web này
https://sites.google.com/site/groupsacomrealfc/

8/22/2012 07:10:00 SA Trả lời

Vào tìm phần tag xóa bỏ đi là xong hì

Admin
8/22/2012 10:13:00 CH Trả lời

Để đơn giản hơn bạn chỉ cần chèn code bên dưới
[code]<fb:like expr:href='data:post.url' font='verdana' layout='button_count' show_faces='true'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>[/code]

8/23/2012 05:43:00 SA Trả lời

Xin được trao đổi liên kết cùng bạn:

Tên blog: Thư viện Thủ thuật

Link blog: http://www.thuvienthuthuat.com/

Mô tả: Thư viện Thủ thuật - Cập nhật, tổng hợp, sưu tầm và sẻ chia thủ thuật đa ứng dụng.

Rất mong được bạn chấp nhận và sớm hồi âm.

Chân thành cảm ơn!

Admin
8/23/2012 07:58:00 SA Trả lời

Mình sẽ add link bạn tại http://bloggertemplate.traidatmui.com nhé vì site bạn pr = 0 nên mình không thể đặt tại traidatmui.com bạn thông cảm nhe.

Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang