Bài này muốn chia sẻ tới các bạn cách chèn nút thích- like facebook,nó là nút khi bài viết được yêu thích chứ không phải là nút thích cho trang page facebook của bạn.
Có 2 trường hợp:
- Chèn nút like Facebook vào bài viết dạng iframe không sử dụng plugin.
- Chèn nút like Facebook vào bài viết có sử dụng plugin.
Hướng dẫn chèn nút like, share facebook cho blogspot
Chèn nút like Facebook vào bài viết dạng iframe không sử dụng plugin
Hướng dẫn nhúng like, share vào website, blog của bạn
1- Đi vào Blogger Bảng điều khiển> Thiết kế> Chỉnh sửa HTML
2- Đầu tiên hãy sao lưu mẫu của bạn
3- Tìm cho mã dưới đây trong mẫu của bạn
<data:post.body/>
Nếu muốn nút này ở dưới tiêu đề bài viết thì thêm đoạn code dưới đây(tùy bạn chọn kiểu nút với code tương ứng)vào trước dòng code trên.
Nếu muốn nút nằm ở cuối bài viết thì thêm đoạn code sau đây vào ngay dưới đoạn code trên.
Hoặc là thêm ngay trước thẻ: <div class='post-footer'>
Thường khi sử dụng tiện ích tự động tóm tắt bài viết sẽ có tới 4 dòng <data:post.body/> đối với mẫu cung cấp bới blogger như mẫu của tôi thì thêm vào dưới dòng thứ 3 còn các mẫu khác thì thêm vào dưới dòng đầu tiên trong 4 dòng đó.
1- Không có số đếm
<iframe allowtransparency='true' expr:src='"https://www.facebook.com/v3.2/plugins/like.php?action=like&href=" + data:post.url.canonical + "&layout=button&show_faces=false"' frameborder='0' scrolling='no'/>2- Có số đếm
<iframe allowtransparency='true' expr:src='"https://www.facebook.com/v3.2/plugins/like.php?action=like&href=" + data:post.url.canonical + "&layout=button_count&show_faces=false"' frameborder='0' scrolling='no' width="90" height="21"/>3- Bao gồm nút Share và có số đếm
<iframe allowtransparency='true' expr:src='"https://www.facebook.com/v3.2/plugins/like.php?action=like&href=" + data:post.url.canonical + "&layout=button_count&share=true&show_faces=false"' frameborder='0' scrolling='no' width="150" height="21"/>
Chèn nút like Facebook vào bài viết có sử dụng plugin
Bước 1: Tạo nút like, share
1. Bạn đăng nhập vào Fb của bạn. Và truy cập đường dẫn sau: https://developers.facebook.com/docs/plugins/like-button
2. Điền thông tin vào mẫu như hình bên dưới
- Url để thích: là Url website , blog của bạn
- Width: là chiều rộng ( VD: 500px) của tiện ích link, share mà bạn muốn
- Bố cục: là kiểu nút mà bạn muốn. ở đây có 4 kiểu (standard, box-count, button-count, button) bạn có thể chọn kiểu mà bạn thích.
- Loại hoạt động: bạn có 2 lựa chọ là like hoặc Recommend (chọn like).
Xong khi điền đầy đủ thông tin bạn nhấn vào lấy mã.
1- Đi vào Blogger Bảng điều khiển> Thiết kế> Chỉnh sửa HTML
2- Đầu tiên hãy sao lưu mẫu của bạn
3- Tìm cho mã dưới đây trong mẫu của bạn
<data:post.body/>
Nếu muốn nút này ở dưới tiêu đề bài viết thì thêm đoạn code dưới đây(tùy bạn chọn kiểu nút với code tương ứng)vào trước dòng code trên.
Nếu muốn nút nằm ở cuối bài viết thì thêm đoạn code sau đây vào ngay dưới đoạn code trên.
Hoặc là thêm ngay trước thẻ: <div class='post-footer'>
Thường khi sử dụng tiện ích tự động tóm tắt bài viết sẽ có tới 4 dòng <data:post.body/> đối với mẫu cung cấp bới blogger như mẫu của tôi thì thêm vào dưới dòng thứ 3 còn các mẫu khác thì thêm vào dưới dòng đầu tiên trong 4 dòng đó.
Sau đó dán đoạn mã Step 3 dưới dạng:
<b:if cond='data:blog.pageType == "item"'> <div class='fb-like' data-action='like' data-layout='button_count' data-share='true' data-show-faces='false' data-size='small' expr:data-href='data:post.canonicalUrl'/> </b:if>Khi đăng ký là ta điền URL blog nhưng ta dùng cho từng bài viết nên cần đổi data-href="URL web" thành expr:data-href='data:post.canonicalUrl'
Tiếp theo dán đoạn mã Step 2 vào trước thẻ </body> nếu blog đang dùng comment facebook thì có thể dùng chung mã Step 2 này.
Ta có thể sử dụng code dưới đây của AddThis đã tích hợp luôn 4 nút gồm:Like,G+,Twitter và Share.
Vị trí đặt code:Trước <div class='post-footer'> ở trong mẫu.
Code:
<div class='addthis_toolbox addthis_default_style '>
<a class='addthis_button_facebook_like' fb:like:layout='button_count'/>
<a class='addthis_button_tweet'/>
<a class='addthis_button_google_plusone' g:plusone:size='medium'/>
<a class='addthis_counter addthis_pill_style'/>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4ec4dd3d1e59e9dc' type='text/javascript'/>
</b:if>
Chúc thành công.