Sử dụng comments Facebook (FB) cho Website - blog - blogger

iThuthuat -
Bài viết hôm nay mình giới thiệu các bạn 1 tiện ích cho Website, blogger đó là chức năng bình luận bài viết sử dụng comments của Facebook. Cách làm này mình tình cờ khi vào Alexa để theo dõi thống kê của Blog mình.
Dạng comments của facebook cho Web, blog, blogger có dạng như sau:
Comments facebook cho Website, blog
Để sử dụng các bạn làm theo các bước sau:
Chức năng comments facebook cho Web, blog
Trong đó:
- URL to comment on: ghi địa chỉ Web, blog của bạn.
- Number of posts: Số comments hiển thị.
- Width: Độ rộng của khung comments.
- Color Scheme: Màu nền comments.
Sau khi đã ghi thông tin thì các bạn bấm "Get Code" để lấy Code và chèn vào theo hướng dẫn của Developer (đơn giản nhé)
HƯỚNG DẪN SỬ DỤNG COMMENT FACEBOOK CHO BLOGSPOT
Hướng dẫn 1: Chỉ có lựa chọn Comment Facebook cho blog của bạn
DEMO
Bước 1: Tắt chức năng bình luận sẵn có của blogger
Lựa chọn lần lượt theo 4 chỉ dẫn như hình dưới
comment facebook cho blogger, comment facebook blogspot

Bước 2: Vào phần Mẫu (Template) -> chỉnh sửa HTML (Edit HTML) -> nhấp chọn Mở rộng tiện ích mẫu. => Chèn đoạn code bên dưới vào trước thẻ đóng



Trong đó:
data-href: là link của trang comment.
data-num-posts: Số comment hiển thị
data-width: Chiều rộng của comment
Bước 3: Chèn đoạn code sau dưới thẻ




Bước 4: Tìm đoạn Code bên dưới:



Chèn đoạn code này ngay dưới đoạn vừa tìm được





Bước 5: Lưu mẫu (Save Template) và xem kết quả :)

Hướng dẫn 2: Mặc định là Form comment của Blogspot, nếu muốn comment = Facebook thì click chuyển Form.
Bước 1: Tạo 1 App trên FB tại https://developers.facebook.com/apps/?action=create
a. Điền tên vào bảng Popup, giá trị Vaild cho thấy tên ứng dụng được dùng
comment cho blogger, huong dan tao comment cho blogspot

- Trong trường hợp tài khoản chưa được xác minh thì hãy xác minh, FB yêu cầu xác minh qua Mobile hoặc Credit Card.
comment cho blogger, huong dan tao comment cho blogspot

 Mình gặp trục trặc là ở bước này mình bấm yêu cầu gửi Code xác minh qua điện thoại (mạng viettel) mà chờ ko thấy gửi, soạn tin nhắn F gửi 9224 là có Code ngay. ^^
- Xác nhận thành công, các bạn bắt đầu với Deverlop
comment cho blogger, huong dan tao comment cho blogspot
Tiếp theo các bạn lựa chọn ứng dụng và chọn Edit setting như hình dưới đây
comment cho blogger, huong dan tao comment cho blogspot

Ở bước tiếp theo các bạn chú ý tới phần mũi tên mình chỉ xuống. đó là App ID để lát nữa mình dùng trong code. Các bạn điền theo mẫu hình dưới đây:
comment cho blogger, huong dan tao comment cho blogspot
LƯU LẠI
-----------Xong bước đăng ký App FB, tiếp theo chúng ta tiến hành chỉnh sửa Template

Bước 2: Tiến hành chỉnh sửa Template
1: Dán code bên dưới sau thẻ








Link anh: là ảnh hiển thị của bạn. Tốt nhất chọn ảnh có kích thước 30x30px
App ID: là số ID của App ở trên mình đã lưu ý, chỗ hình mũi tên chỉ vào.
2: Tìm Và thay thế bằng
3: Dán đoạn code dưới đây ngay trên ]]>

.comments-page {
background-color: #f2f2f2;
width:520px
}
#blogger-comments-page {
padding: 0px 5px;
display: none
}
.comments-tab {
float: left; padding: 5px;
margin-right: 3px;
cursor: pointer;
background-color: #f2f2f2
}
.comments-tab-icon {
height: 14px;
width: auto;
margin-right: 3px
}
.comments-tab:hover {
background-color: #eeeeee
}
.inactive-select-tab {
background-color: #d1d1d1
}

4: Tìm đoạn

Và dán code dưới đây ngay sau nó




Comments


Comments





width='520'/>



5: Lưu mẫu (Save Template) và xem kết quả :)
Chúc các bạn thành công !

0 comments: