Hướng dẫn nhúng Like, Share, Comment vào trang web

Code: Default | Auth: 03cd82

1. Bạn cần có tài khoản Developer của Facebook.

Xem cách đăng ký tài khoản ở bài viết này huong-dan-dang-ky-tai-khoan-facebook-developer.35.html

 

2. Bạn cần tạo App trong trang developer để quản lý các tính năng like, share, comment...

Thường thì với mỗi dự án bạn nên tạo 1 app mới. Tạo app bạn cần chuẩn bị 1 trang web online để lưu trữu file policy. Nếu không có bạn dùng tạm cái link này http://run.saophaixoan.net/static/policy.html

 

Bước 1: Bạn vào trang https://developers.facebook.com/apps

(Lưu ý: bài viết hướng dẫn theo tiếng Anh nên bạn cuộn màn hình xuống cuối trang để chọn ngôn ngữ English (US) nhé)

Tìm và bấm nút ==> Create App sau đó chọn như hình dưới

Tạo app mới

 

Bước 2: Chọn như hình tiếp theo

Tạo app bước 2

Tạo app bước 3

Web sẽ yêu cầu xác nhận Captcha ==> bạn bấm xác nhận và Submit. Kết quả hoàn thành như sau:

Hoàn thành tạo app

 

Bước 3: Cài đặt cơ bản cho App

Bạn bấm vào Basic như ở hình trên và thực hiện nhập nội dung như trong ảnh

Thiết lập cơ bản cho app

 

Bước 4: Bật live cho app

Bật live cho app

chế độ live

 


3. Bây giờ bạn có thể lấy code like share cho vào web được rồi

Trước hết bạn phải xác định bạn sẽ like share cho trang nào của bạn. Giả sử tôi có địa chỉ bài viết này để like share:


https://zezo.dev/tien-ich-web-35/huong-dan-nhung-like-share-comment-vao-trang-web.36.html

 

Bước 1: Bạn vào trang https://developers.facebook.com/docs/plugins/like-button/ 

Bước 2: Thực hiện như trong hình ảnh dưới đây

Các bước lấy code like và share

Thực hiện tiếp như trong ảnh dưới đây

Lấy code like share

Code gắn vào trang web như sau:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>SNVN.NET</title>
</head>
<body>
 
 <!-- Nút like có thể để bất kỳ chỗ nào nhé -->
 <div class="fb-like" data-href="https://zezo.dev/tien-ich-web-35/huong-dan-nhung-like-share-comment-vao-trang-web.36.html" data-width="" data-layout="button" data-action="like" data-size="large" data-share="true"></div>
 <!-- - -->
<h1>Code demo Like - Share - Comment...</h1>







<!-- phần code này phải để cuối cùng -->
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/vi_VN/sdk.js#xfbml=1&version=v9.0&appId=267396011466756&autoLogAppEvents=1" nonce="081eMtH3"></script>
</body>
</html>

 

Bạn chạy thử code này bạn sẽ thấy nút like share. http://html.zezo.dev/public/tut/demo-code-like-share.html

 

Lấy code Comment:

Bạn chỉ cần vào địa chỉ: https://developers.facebook.com/docs/plugins/comments 

Nhập link cần comment vào rồi bấm Get Code

Lấy code comment

 

Copy code comment

OK giờ xem kết quả trang này bạn sẽ thấy chỗ bình luận:  http://html.zezo.dev/public/tut/demo-code-like-share.html

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