Cách Tích hợp Live chat Facebook vào Website WordPress và Blogspot

Hướng dẫn Tích hợp chat Facebook vào Website

I. Mục tiêu bài viết:

• Bạn sở hữu một Website(Wodrpress/Blogspot) và một Fandpage?
• Bạn muốn tích hợp Messenger của FandPage Facebook vào Website của bạn?
• Bạn muốn quản lý tập trung mọi tin nhắn của khách hàng để không bỏ lỡ bất kì nội dung quan trọng nào…
• Bài viết này sẽ hướng dẫn các bạn cách làm điều đó.
• Và bài viết này nằm trong seria Hướng dẫn WordPress của chúng tôi.
• Mục đích chính của bài viết này là Tích hợp chat Facebook vào Website nhằm giúp các bạn cài đặt giao diện chat Facebook trực tiếp vào Website của bạn.
• Bạn có thể ÁP dụng bài viết này để tích hợp Facebook Chat vào website sử dụng mã nguồn của Blogspot.

II. Các bước thực hiện.

A. Cài đặt Live Chat Facebook cho website WordPress

Video cho các bạn tham khảo

1.Tạo một ứng dụng chat bằng Facebook for Developers.

• Để Bắt đầu Tích hợp chat Facebook vào Website một cách nhanh nhất bạn cần hoàn thành các bước như sau:
• Đầu tiên, bạn cần phải tạo cho mình một ứng dụng, mục đích sẽ là dùng ứng dụng này để tích hợp vào website, giúp website của bạn có thể giao tiếp được với Messenger của Facebook.

Bước 01: Truy cập vào đường dẫn sau để tạo ứng dụng:  Developers

Sau khi đã truy cập được vào trang Web developers, nếu chưa đăng nhập thì bạn cần phải tiến hành đăng nhập bằng tài khoản facebook mà bạn dùng để quản lý fandpage.

Để

Bước 02: Một khi đã đăng nhập được rồi, bạn tìm trên thanh Menu, Click vào Ứng dụng của tôi (1), Sau đó bạn bấm vào dòng Thêm ứng dụng mới (2) để bắt đầu tạo ứng dụng. (Hình 1)

Bước 03: Điền thông số cho Ứng dụng (hình 2)

Tên hiển thị : Bạn đặt tên dễ nhớ cho ứng dụng (1)

Email liên hệ: Bạn điều email của bạn vào (2)

Sau đó bấm Tạo ID ứng dụng (3)

Bước 04: Chứng tỏ bạn là con người bằng cách Check chọn Tôi không phải là người máy (1) và bấm Gửi (2) nhé. (Hình 3)

Bước 05: Tiếp theo, Tại phần bên trái giao diện, phần Cài đặt, bạn chọn vào Thông tin cơ bản (1), Tại đây, sẽ có đầy đủ các thông tin để bạn có thể quản lý ứng dụng của mình.

Tại mục URL chính sách quyền riêng tư (2), bạn nhập vào tên website mà bạn muốn đặt Chat Facebook hoặc có thể nhập tên website bất kỳ.

Tại phần Hạng mục (3), bạn nhấn chọn vào tùy chọn tùy ý

Cuối cùng bạn bấm vào Lưu thay đổi để hoàn tất quá trình tạo ứng dụng này (hình 4)

Bước 06: Sau khi đã tạo được ứng dụng, bạn cần phải Bật ứng dụng này, nhằm mục đích công khai để các ứng dụng bên thứ 3 có thể sử dụng được. Mặc định ứng dụng đang bị tắt, bạn bấm vào Chữ Tắt (1)  đang mờ mờ để bắt đầu mở ứng dụng. (hình 5)

Bước 07: Hộp thoại xác nhận công khai ứng dụng, bạn Nhấn vào Xác nhận để hoàn tất. (hình 6)

Bước 08: Hình 7 thể hiện trạng thái ứng dụng đã được bật và công khai, bạn bấm vào lưu thay đổi để xác nhận lần cuối.

2.Thiết lập nền tảng Messenger trên trang quản trị FandPage Facebook.

Để việc Tích hợp chat Facebook vào Website thành công, thì sau khi Khởi tạo được ứng dụng, bạn cần phải cấu hình để Fandpage của bạn dùng ứng dụng này để làm trung gian hiển thị lên website cá nhân.

Bước 09: Tiếp theo chúng ta sẽ tiến hành đăng nhập vào trang Fandpage của bạn, Tại mục Trang(1), sau đó truy cập vào phần cài đặt(2) của fanpage do bạn quản lý. (hình 8)

Bước 10: Ở Hình 9, Bạn chọn vào phần Nền Tảng Messenger (1) rồi nhìn sang bên phía phải của giao diện.

Bước 11: Tại đây (hình 10), bạn tìm đến dòng Miền được đưa vào danh sách hợp lệ (1), Bạn tiến hành nhập tên website của bạn vào ô số (2) rồi bấm Lưu (3) để xác nhận.

Lưu ý : nếu bạn có nhiều website thì bạn cần nhập những website đó vào để sau này có thể dễ dàng cài đặt messenger lên những website đó. Ở trên mình chỉ có một website nên mình nhập vào rồi bấm lưu để xác nhận.

Bước 12: Tại bước này, bạn chuyển sang trang web developers lúc nãy để copy ID của ứng dụng mà bạn đã tạo. (hình 11)

Bước 13: Tiếp đến, bạn quay trở lại trang Fandpage Facebook, bạn dán ID vừa copy được ở bước 12 vào chỗ Liên kết ứng dụng với Trang của bạn/ chia sẻ thuộc tính (1)  sau đó Bấm Link (2) (hình 12)

3. Tìm kiếm Your Facebook ID.

Bước 14: Bước này chúng ta sẽ tiến hành tìm ID của fandpage, mục đích là lấy ID này để nhập vào Code mẫu, code mẫu này chúng ta sẽ dùng để dán vào website.

Ở trên, chúng ta sẽ copy đường dẫn link của fandpage để dò ID

Bước 15: Truy cập trang web : findmyfbid , sau đó dán Link Fandpage bạn đã copy ở bước14 vào (1) rồi Nhấn Find numeric ID (2) để tìm ID của fandpage.

Bước 16: Trang web sẽ tự động dò và hiển thị ID của fandpage, Bạn copy dòng chữ số này lại. (hình 14)

Bước 17: Bạn truy cập vào link này để tải file code mẫu về máy tính.

Nếu bạn chưa biết cách tải thì có thể tham khảo thêm bài viết hướng dẫn cách tảiđể biết cách tải phần mềm về máy tính của bạn.

Sau khi đã tải được CODE mẫu về, bạn mở file này ra, tìm dòng được khoanh tròn như trên (hình 15) bạn xóa dòng chữ màu đỏ : ID_ung_dung_cua_ban và thay thế bằng ID fandpage mà bạn đã copy được ở Bước 16.

4. Copy CODE mẫu để chèn vào website.

Bước 18: Khi đã hoàn thành chỉnh sửa xong Code mẫu, bạn tiến hành copy toàn bộ code này và dán vào phần javascript của themes website bạn, nếu themes website bạn không có phần thêm javascript thì bạn có thể dán code mẫu này ở sau thẻ <body>, Hình 17 là giao diện truy cập vào trình custom Javascript của website mình.

Bước 19: Tiến hành dán CODE mẫu vào đây, sau đó lưu lại.

Vậy là quá trình thực hiện việc cài đặt live chat facebook cho website wordpress của bạn đã hoàn tất.

B. Cài đặt Live Chat Facebook cho website Blogspot

Việc cài đặt cho website mã nguồn Blogspot cũng rất đơn giản, thông thường các bạn sẽ vào phần Chỉnh sửa HTML , tìm đoạn code <body> và chèn mã live facebook chat vào.

Tuy nhiên rất nhiều bạn sẽ gặp phải lỗi chẳng hạn như: Lỗi khi phân tích cú pháp XML, dòng 3360, cột 15: Open quote is expected for attribute “attribution” associated with an element type “div”.

Chính vì vậy, có cách khác hiệu quả hơn là chèn code trực tiếp. Đơn giản bạn chỉ cần vào phần Bố Cục trong giao diện quản lý Blogger, Tìm đến phần Footer bất kỳ, Bấm tiếp vào +Thêm tiện ích. (hình 19)

• Tiếp đó, bạn dán mã code mã bạn đã hoàn thành ở Bước 18 vào đây, Nhấn Lưu là OK

Chúc các bạn thành công…

C. Thử nghiệm thành quả.

Truy cập website của bạn và kiểm tra.

Hình trên là giao diện khi mình truy cập vào website có tích hợp Messenger của facebook.

Vậy là chúng ta đã hoàn tất quá trình cài đặt quá trình Tích hợp chat Facebook vào Website, Chúc các bạn thành công.

Mọi vướng mắc trong quá trình cài đặt, link tải bị lỗi hoặc không truy cập được… bạn vui lòng để lại comment bên dưới, mình sẽ cập nhật và giải đáp trong vòng 24h.

Nội dung bài viết thuộc bản quyền của Website vienthongbuonho.net mọi sao chép bài viết đề nghị bạn ghi rõ nguồn tại đây để góp phần làm trong sạch môi trường internet cũng như giúp quảng bá website của chúng tôi với đông đảo bạn đọc. Trân trọng!!!