Bước 1: Tạo ID facebook
Truy cập trang https://developers.facebook.com/
Trường hợp A) Nếu bạn chưa bao giờ tạo ID facebook thì phải thực hiện đăng ký bằng cách chọn Bắt đầu và làm theo hướng dẫn
Đặt tên ứng dụng (lưu ý không chọn các từ khóa như Face, Facebook,...) --> Chọn Next và làm theo hướng dẫn để tạo ID facebook
Trường hợp B) Nếu bạn đã có ID facebook rồi thì làm như sau
Vào "Ứng dụng của tôi" --> Chọn "Thêm ứng dụng mới"
Đặt tên ứng dụng (lưu ý không chọn các từ khóa như Face, Facebook,...) --> Click nút "Tạo ID ứng dụng"
Check kiểm tra bảo mật
==> Sau khi hoàn tất việc tạo ứng dụng thì bạn sẽ được cấp 1 mã ID cho ứng dụng này, bạn ghi nhớ mã này để lát nữa nhập vào code
Bước 2: cài đặt thông tin cơ bản cho ứng dụng
Vào Cài đặt --> Thông tin cơ bản
Nhập địa chỉ trang Blogspot mà bạn muốn cài ứng dụng vào 2 ô "Miền ứng dụng" và "URL chính sách quyền riêng tư"
Click nút Lưu thay đổi
Bước 3: kích hoạt ứng dụng
Vào mục Xét duyệt ứng dụng --> Lúc này trạng thái đang là "Không khả dụng với mọi người" --> Click vào nút bên cạnh để kích hoạt ứng dụng.
Chọn danh mục theo thể loại của Blog (Ví dụ: Giải trí) --> Click nút Xác nhận
Lúc này ứng dụng đã được kích hoạt và chuyển sang trạng thái "Khả dụng với mọi người"
Bước 4: tạo mã HTML chèn ứng dụng
Vào mục Bảng điều khiển --> Mục Analytics chọn Thiết lập
Chọn nền tảng Web
Ở đây chúng ta có đoạn code để nhúng vào blog --> click nút "Sao chép mã" để copy đoạn code --> Tạo 1 file word rồi dán đoạn code này vào --> Sửa lại thông số ID ứng dụng và Version theo như hướng dẫn trong hình (lưu ý là ID ứng dụng của mỗi người mỗi khác và Version cũng có thể khác nhau) --> Click nút Tiếp
Nhập địa chỉ trang Blogspot của bạn vào ô URL trang web --> Click nút Save. Đến đây xem như hoàn thành việc lấy mã HTML, việc tiếp theo là nhúng nó vào trong Blog.
Bước 5: nhúng mã HTML vào Blog
Vào trang Quản lý Blog --> Chọn mục Theme --> Edit HTML
Click chuột vào cửa sổ soạn mã --> Nhấn Ctrl+F để hiển thị ô Search bên góc phải --> Vào ô Search ở góc trái màn hình, tìm dòng <body
--> Dán đoạn code đã lưu trong file word vào ngay dưới dòng <body...
--> Click nút Save theme
Bước 6: tạo mã HTML Comment Facebook
Truy cập địa chỉ sau: https://developers.facebook.com/docs/plugins/comments
Kéo xuống phía dưới tìm mục Trình tạo mã Plugin Bình luận
--> Nhập địa chỉ Blog vào ô URL
--> Chọn chiều rộng khung comment (tùy chỉnh theo độ rộng bài viết trong Blog)
--> Chọn số Comment hiển thị
--> Click nút Lấy mã
Copy toàn bộ đoạn mã trong ô Step 2
Bước 7: nhúng mã HTML Comment Facebook vào trong Blog
Vào mục Edit HTML trong trình quản lý Blog
Vào ô Search ở góc trái màn hình, tìm dòng <body
--> Dán đoạn code vừa copy vào ngay dưới dòng <body...
--> Lưu ý ở dòng mã bên dưới thì thêm amp; ngay sau các ký tự & để khi save không bị báo lỗi.
Trước khi sửa
js.src = 'https://connect.facebook.net/vi_VN/sdk.js#xfbml=1&version=v3.0&appId=481065108966xxx&autoLogAppEvents=1';Sau khi sửa
js.src = 'https://connect.facebook.net/vi_VN/sdk.js#xfbml=1&version=v3.0&appId=481065108966xxx&autoLogAppEvents=1';--> Click nút Save theme
Bước 8: Tạo chức năng Comment riêng cho từng bài
Tìm dòng lệnh <b:include data='post' (dòng lệnh đầy đủ là <b:include data='post' name='post'/>)
Dán ngay bên dưới dòng lệnh đoạn mã sau:
<b:if cond='data:blog.pageType == "item"'>
<div class='fb-comments' data-num-posts='5' data-width='500px' expr:data-href='data:blog.canonicalUrl'/>
</b:if>
Lưu ý có thể thay đổi các giá trị sau cho phù hợp với từng blog:
data-num-posts: số comment hiển thị
data-width: độ rộng khung comment
--> Click nút Save theme
Bước 9: Tạo chức năng Like, Share riêng cho từng bài
Tìm dòng lệnh <b:include data='post' (dòng lệnh đầy đủ là <b:include data='post' name='post'/>)
Dán ngay bên dưới dòng lệnh đoạn mã sau:
--> Click nút Save theme<b:if cond='data:blog.pageType == "item"'>
<div class="fb-like" data-layout="standard" data-action="like" data-size="large" data-show-faces="true" data-share="true" expr:data-href='data:blog.canonicalUrl'/>
</b:if>
Bước 10: Tạo chức năng thông báo khi có người tương tác
Tìm dòng lệnh <head
Dán ngay bên dưới dòng lệnh đoạn mã sau (lưu ý thay dòng "ID ứng dụng của bạn" bằng mã ID ứng dụng phía trên)
<meta content='ID ứng dụng của bạn' property='fb:app_id'/>
--> Click nút Save theme Bước 11: Thêm người nhận thông báo khi có comment
Truy cập địa chỉ sau và thêm Người kiểm duyệt để nhận thông báo
https://developers.facebook.com/tools/comments/
Chọn mục Cài đặt --> Thẻ Người kiểm duyệt --> Nhập địa chỉ Facebook người kiểm duyệt --> Chọn Lưu
Như vậy là đã hoàn tất các bước tạo khung Comment, Like, Share facebook trong Blogspot, khi bạn xem 1 bài bất kỳ thì khung comment này sẽ hiển thị bên dưới bài viết. Lưu ý là Plugin này hoạt động hơi chậm nên sau khi mở bài viết vài giây thì khung này mới hiển thị. Thỉnh thoảng khi comment cũng có hiện tượng treo trang, phải tắt đi mở lại.
MỘT SỐ CÂU HỎI THƯỜNG GẶP
1) Trang Blog của tôi có màu nền tối, chữ Comment có màu đen nên tôi không thể đọc rõ chữ. Cách đổi chữ Comment sang màu trắng như thế nào?
Trả lời:
Tìm dòng lệnh fb-comments
Thêm đoạn mã sau vào dòng lệnh data-colorscheme='dark'
Ví dụ Trước khi thêm:
<div class='fb-comments' data-num-posts='15' data-width='890px' expr:data-href='data:blog.canonicalUrl'/>Sau khi thêm
<div class='fb-comments' data-colorscheme='dark' data-num-posts='15' data-width='890px' expr:data-href='data:blog.canonicalUrl'/>
Tương tự, dòng chữ số người đã like cũng đổi sang màu trắng bằng cách thêm dòng lệnh data-colorscheme='dark'
Đoạn code sau khi sửa:
<div class='fb-like' data-action='like' data-colorscheme='dark' data-layout='standard' data-share='true' data-show-faces='true' data-size='large' expr:data-href='data:blog.canonicalUrl'/>
2) Tôi không thích tồn tại cùng lúc 2 khung Comment facebook và Comment google. Muốn bỏ khung Comment google thì phải làm sao?
Trả lời:
Vào thẻ Setting --> mục Posts, comments and sharing --> phần Comment location chọn Hide --> Save setting
Chúc các bạn thành công.
Không có nhận xét nào:
Đăng nhận xét