Chèn nút Facebook Like, G+1 vào blog

Hiện tại có khá nhiều hướng dẫn cách chèn nút Facebook Like (FB Like), Google Plus 1 (G+1) vào blog, website. Nút G+1 thì dễ chèn rồi, mình sẽ nói sơ qua nút này trước. Còn nút FB Like, hiện tại FB nó bắt mình phải có một app của nó để xác nhận (qua app ID). Vì vậy mình sẽ hướng dẫn thêm phần tạo app.

Chèn nút G+1

Đơn giản nhất, bạn chỉ việc chèn đoạn code dưới vào vị trí mà bạn muốn nút G+1 hiển thị.

[javascript]
<g:plusone annotation="inline"></g:plusone>

<script type="text/javascript">
(function() {
var po = document.createElement(‘script’); po.type = ‘text/javascript’; po.async = true;
po.src = ‘https://apis.google.com/js/plusone.js&#8217;;
var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(po, s);
})();
</script>
[/javascript]

Chi tiết hơn xin hẹn ở một bài viết khác.

Chèn nút FB Like

Tạo một Facebook App

– Bạn vào https://developers.facebook.com/apps sau đó click Create a new app.

– Trong bảng hiện ra, đặt tên hiển thị (ô trên). Ví dụ, mình đặt New App – 01

– Ô namespace, đặt tên chỉ gồm chữ, gạch dưới (underscore) hay gạch nối (dash). Ví dụ, new_app_zero-one.

– Đánh dấu tick vào ô I agree… Bấm Continue. Điền mã chống spam.

– Điền tên miền (ví dụ, domain.com) vào ô App domain – trong phần Basic Info.

– Điền Site URL trong phần Select how your app integrates with Facebook – Website. Đây là URL site của bạn. Ví dụ: http://www.domain.com/

– Sau đó bấm Save change.

[html]

[/html]

Sau đó, bạn copy App ID có được, thay vào chỗ XXX (bỏ XXX đi) trong đoạn code trên vào chèn đoạn code vào nơi nào bạn muốn nút Like hiển thị.

Lưu ý: Để đạt hiệu quả cao nhất, bạn nên chèn code vào trong source của template của blog/website của bạn. Vừa đỡ tốn công (chèn một lần, hiện ở mọi trang), lại đảm bảo nút Like/G+1 hiển thị tốt. Vì mặc nhiên một số blog như WordPress không hỗ trợ IFrame trong bài viết.

6 thoughts on “Chèn nút Facebook Like, G+1 vào blog

    • Theo mình biết thì Blog Plus (của Yahoo) không cho phép làm điều này. Vì muốn thêm menu như thế, bạn phải can thiệp vào mã nguồn của blog, chỉnh sửa CSS. Mà nguồn của Yahooo Plus và cả Blogger đều là nguồn đóng.
      Bạn có thể chuyển qua dùng nguồn WordPress thì sẽ tùy biến được nhiều hơn.

      • Cái này cho vào blog plus hay blogger đều được mà , chỉ cần hỗ trợ HTML là cho vào được, dùng inner CSS Cosmos ơi

  1. Pingback: Làm menu cố định trên màn hình với CSS | Cosmos Pham's Blog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s