Chắc hẳn ở đây có nhiều bạn đã gặp nút “Đăng nhập bằng Facebook” khi bạn đăng ký hoặc đăng nhập trên một website nào đó. Nhiều người dùng hiện nay rất thích nút này vì họ chỉ cần sử dụng tài khoản Facebook có sẵn của họ, nên sẽ không phải mất thời gian đăng ký tài khoản mới và sau này họ cũng không cần phải ghi nhớ tài khoản và mã đăng nhập nữa. Như vậy khá là tiện lợi.
Tính năng này sẽ giúp tỷ lệ đăng ký trên site của bạn được cải thiện đáng kể đấy. Cùng với việc lượng người dùng Facebook ngày càng khổng lồ như hiện nay, thì chắc chắn là bạn không nên bỏ qua tính năng này phải không?
Ngoài ra, việc khuyến khích người dùng đăng nhập bằng các tài khoản mạng xã hội có sẵn như này sẽ còn có lợi cho bạn khi thực hiện các chiến dịch marketing sau này nữa cơ.
Tính năng đăng nhập vào các trang web với tài khoản Facebook có sẵn rất nhanh chóng và thuận tiện cho cả chủ trang web và khách truy cập!
Bước 1: Cài đặt plugin Nextend Social Login
Có rất nhiều plugin có thể giúp bạn cài đặt nút “Đăng nhập bằng Facebook” trên website. Tuy nhiên, plugin Nextend Social Login đang là plugin tốt nhất với nhiều lượt người dùng và phản hồi tốt nhất hiện nay.
Plugin này có khả năng thiết lập cho trang web của bạn tính năng Đăng ký và Đăng nhập bằng các mạng xã hội không chỉ vớ i Facebook mà còn có cả Pinterest, Google, Twitter… hoặc các nền tảng khác như Paypal, Amazon, Disqs,…
Sau đó bạn sẽ thấy plugin có tên “Nextend Social Login and Register (Facebook, Google, Twitter)” với biểu tượng hình ổ khóa xanh ở ngay kết quả đầu tiên. Bấm vào Install Now để cài đặt và chờ một vài giây rồi ấn tiếp Activate ngay tại đó để kích hoạt plugin.
Bước 2: Cài đặt Facebook App
2.1. Đăng ký / Đăng nhập tài khoản Facebook for Developers
Bạn hãy truy cập vào đường link mà plugin yêu cầu: https://developers.facebook.com/apps/.
Khi trang web “Facebook for developer” hiện lên, bạn hãy kích chọn “Register Now” ở góc phía trên bên phải màn hình để đăng ký tài khoản Facebook dành cho nhà phát triển.
Trang này sẽ yêu cầu tiếp tục đăng nhập bằng tài khoản facebook của bạn. Hãy chọn tài khoản Facebook mà bạn muốn dùng để quản lý trang web và tiếp tục bấm Next để đến bước tiếp theo.
Trong số các lựa chọn mà Facebook for developer đưa ra để mô tả về bạn, bạn hãy chọn một cái bất kỳ. Mình cũng không chắc về sự khác nhau giữa các lựa chọn này lắm, nên ở đây mình chọn “Other”.
2.2 Tạo một Facebook App
Tiếp theo, bấm vào nút Create New App để bắt đầu tạo ứng dụng Facebook mới (tương ứng với bước thứ 3 mà plugin Nextend Social Login hướng dẫn).
2.3. Thiết lập cho Facebook App mà bạn vừa tạo
Một giao diện như sau sẽ hiện ra:
App Domains: điền tên miền website của bạn vào
Privacy Policy URL: Điền đường dẫn đến phần Privacy Policy trên website của bạn vào đây.
Terms of Service URL: Điền đường dẫn đến phần Điều khoản sử dụng trên website của bạn vào đây.
Ví dụ như ở website của mình, các đường dẫn này mình đều đang đặt sẵn ở chân trang, mình chỉ việc copy các đường dẫn này vào các ô tương ứng trên là xong.
Sau khi đã điền đầy đủ cả 3 mục thì bấm nút Save Changes ở bên dưới các trường thông tin đó.
Vẫn trong cửa sổ giao diện của Facebook App bạn đang tạo, bạn tìm mục PRODUCTS (+) ở menu bên trái và bấm vào dấu cộng (+). Nhấn tiếp vào nút Set Up trong ô Facebook Login.
Lúc này ở mục PRODUCT(+) sẽ hiện thêm tên sản phẩm mà bạn vừa mới thêm vào là Facebook Login.
Màn hình tiếp theo sẽ có 1 ô trống tiêu đề Site URL. Hãy điền đường dẫn trang web của bạn vào đây và bấm Save để lưu.
Tiếp đến bạn kích chọn mục Settings ngay bên trên mục Quickstart để tùy chỉnh cài đặt cho sản phẩm này của bạn.
Tìm đến mục Client OAuth Setting và điền một URL có dạng như sau vào ô Valid OAuth Redirect URLs:
http://tên-miền-của-bạn/wp-login.php?loginSocial=facebook.
Bạn cứ copy y nguyên cái link của mình rồi thay chỗ “tên-miền-của-bạn” bằng đường link đến trang web của bạn là được. Bấm Save Changes để lưu lại.
2.4. Kích hoạt Facebook App bạn vừa tạo
Sau đó hãy nhìn lên phía trên bên phải của trang web, có 1 nút công tắc màu xám cạnh chữ Status – In Development đang ở trạng thái tắt (Off). Bấm vào để mở nó lên.
Tiếp theo, bạn hãy chọn một hạng mục nào đó phù hợp với loại website của bạn ở ô Choose a Category rồi bấm Confirm để xác nhận.
Lúc này, nút “Off” màu xám đã chuyển thành nút “On” màu xanh và Status đổi từ “In Development” sang “Live”. Điều này có nghĩa là Facebook App bạn vừa tạo trên trang Facebook for Developer này đã bắt đầu hoạt động rồi đấy.
Bước 3: Tích hợp Facebook App với plugin trên trang web của bạn
Bây giờ, hãy quay lại trang hướng dẫn tạo Facebook App ở mục Setting của plugin Nextend Social Login trên trang WordPress của bạn.
Kéo xuống dưới và bấm I am done setting my Facebook App để xác nhận là bạn đã tạo xong app.
Bạn hãy điền thông tin vào các ô: App ID, App Secret rồi nhấn Save Changes.
Để có được thông tin điền vào hai ô này, bạn hãy làm như sau:
Lúc này, một thông báo là “Your configuration needs to be verified” sẽ hiện lên. Bạn chỉ cần nhấn vào Verify Settings để xác thực các cài đặt bạn vừa thực hiện.
Xong rồi hãy bấm Save Changes để lưu lại.
Bước 4: Tạo trang đăng nhập với nút “Đăng nhập bằng Facebook” trên trang web
Trong Admin Dashboard của WordPress, hãy tìm chọn mục Pages và bấm Add New để tạo một trang mới cho website. Mình đặt tạm tiêu đề cho trang này là “Facebook app login for web”.
Trong phần nội dung của trang này, bạn hãy điền một đoạn shortcode là
[nextend_social_login]
vào và nhấn nút Publish bên phải màn hình.
Vậy là bạn đã có một trang đăng nhập bằng tài khoản Facebook rồi đó.
Để kiểm tra, bạn hãy copy đường dẫn đến page mà bạn vừa tạo. Sau đó đăng xuất khỏi tài khoản bạn đang dùng trên website, rồi truy cập vào đường dẫn trên.
Và khi quay trở lại để đăng nhập vào tài khoản admin của bạn, bạn cũng sẽ thấy có thêm một lựa chọn đăng nhập bằng Facebook như này nữa:
Vậy là bạn đã hoàn tất việc tạo nút đăng nhập bằng tài khoản Facebook rồi đó.
Phần thêm: Tùy chỉnh nút “Đăng nhập bằng Facebook”
Bạn thấy đấy, nút đăng nhập bằng Facebook mặc định được viết là “Continue with Facebook”. Trong trường hợp bạn muốn đổi câu đó sang một lời kêu gọi khác, bạn hãy làm như sau:
Bạn sẽ thấy có 3 ô nội dung tương ứng với 3 trạng thái nút mà plugin Nextend Social Login này cung cấp. Bạn hãy chọn một cái nhãn tên mới cho các nút bằng cách sửa nội dung các ô đó.
Trong đó:
Chỉnh sửa xong bạn hãy bấm Save Changes để lưu lại các thay đổi.
Ở mục Membership hãy chắc rằng ô “Anyone can register” được đánh dấu tích để bất kỳ ai cũng có thể đăng ký tài khoản trên trang web của bạn.
Trong tùy chọn New User Default Role, bạn hãy đặt một vai trò mặc định phù hợp cho tài khoản đăng ký mới trên trang web của bạn. Ở đây mình chọn là “Customer”.
Sau khi tùy chỉnh cài đặt xong nhớ kéo xuống cuối trang và nhấn Save Changes để lưu lại các thay đổi.
Giờ thì bất kỳ ai có tài khoản Facebook đều có thể sử dụng nút “Đăng nhập bằng tài khoản Facebook” để đăng ký tài khoản mới trên trang web của bạn rồi đó.
Mặc dù bài này khá là dài nhưng mình có thể đảm bảo với các bạn đây là một trong những bài hướng dẫn chi tiết nhất về cách tạo nút “Đăng nhập bằng Facebook” trên website WordPress và đã sử dụng plugin tốt nhất cho việc này.