Cách tạo nút “Đăng nhập bằng Facebook” cho website WordPress

Cách tạo nút “Đăng nhập bằng Facebook” cho website WordPress

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ơ.

Vậy còn chần chừ gì nữa mà không tạo ngay nút “Đăng nhập bằng Facebook” cho website WordPress của bạn? Hãy cùng xem hướng dẫn của mình dưới đây nhé.

tạo nút “Đăng nhập bằng Facebook” cho website WordPress

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!

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,…

Điều này rất tiện lợi phải không nào? Giờ hãy cùng mình học cách cài đặt plugin mạnh mẽ này nhé.
Đầu tiên, trong Admin Dashboard (Bảng điều khiển Quản trị viên) của WordPress, bấm chọn mục Plugins > Add New để thêm Plugin mới cho trang web và tìm plugin này theo từ khóa “Nextend Social Login”.

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.

Kích hoạt plugin “Nextend Social Login and Register"

Tiếp theo, trên Admin Dashboard bạn hãy vào mục Settings > Nextend Social Login, tiếp tục kích chọn mục Settings của plugin này để tùy chỉnh cài đặt cho nó.

Lúc này trên màn hình hiện ra rất nhiều tùy chọn cài đặt với các nền tảng khác nhau, mình sẽ hướng dẫn từng nền tảng trong các bài viết tiếp sau đây. Còn bây giờ, bạn hãy click vào nút Getting Started của ô Facebook nhé.

Cài đặt plugin Nextend Social Login

Cài đặt plugin Nextend Social Login

Màn hình lúc này sẽ hiện lên một loạt các chỉ dẫn cách cài đặt Facebook App (16 bước). Mình sẽ hướng dẫn thực hiện các thao tác này một cách trực quan tiếp sau đây nhé.

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/. 

Cài đặt Facebook App

Cài đặt Facebook App

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.

Đăng ký tài khoản Facebook

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.

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”.

chọn Other nếu không có mục nào phù hợp

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).

bấm vào nút Create New App để bắt đầu tạo ứng dụng Facebook mới

Bây giờ, bạn hãy điền một cái tên cho app vào ô Display Name và email của bạn vào ô Contact Email sao cho tiện việc quản lý sau này. Sau đó, bạn click vào Create App ID để tạo ID cho ứng dụng Facebook mà bạn sắp sửa cài nhé.

click vào Create App ID để tạo ID cho ứng dụng Facebook

2.3. Thiết lập cho Facebook App mà bạn vừa tạo

Trên cửa sổ tiếp theo, đừng vội chọn kịch bản Integrate Facebook Login mà trước hết hãy vào mục Settings > Basic ở bảng điều khiển bên trái đã nhé.

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:

Một giao diện mới

Bạn điền các thông tin ở các mục sau vào nhé:

  • 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.

copy các đường dẫn vào các ô tương ứng

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ụ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

Bây giờ, trên bảng điều khiển bên trái, bạn hãy vào mục Quickstart của Facebook Login. Trong mục này sẽ có 4 tùy chọn cho bạn. Hãy click vào mục Web vì bạn đang muốn thêm nút đăng nhập Facebook vào 1 trang web.

thêm nút đăng nhập Facebook vào 1 trang web

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.

nhấn save để lưu thông tin

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.

chọn mục Settings để tùy chỉnh cài đặt cho sản phẩm

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.

Kích hoạt Facebook App bạn vừa tạo

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.

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.

Nhớ bấm Save Changes để lưu lại thay đổi này nhé.

bấm Save Changes để lưu lại thay đổi

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ấm I am done setting my Facebook App

Bạn sẽ được chuyển sang giao diện như dưới đây.

chuyển sang giao diện mới

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:

Quay lại trang Facebook for Developer, vào mục Settings > Basic, bạn sẽ thấy hai thông tin bạn cần. Giờ chỉ việc copy vào trang cài đặt plugin trên website của bạn thôi.

copy vào trang cài đặt plugin trên website

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.

nhấn vào Verify Settings để xác thực các cài đặt bạn vừa thực hiện

Ngay sau đó, một cửa sổ mới sẽ hiện ra và yêu cầu bạn đăng nhập bằng tài khoản Facebook. Bạn hãy dùng tài khoản mà vừa nãy bạn dùng để đăng ký Facebook for Developer để đăng nhập nhé và nhấn nút Continues as… để hoàn tất đăng nhập.

nhấn nút Continues as… để hoàn tất đăng nhập

Lúc này plugin sẽ xác thực các cài đặt của bạn thành công.

Tuy nhiên, có thể bạn sẽ gặp một ô thông báo màu vàng ghi là “Works Fine – Disabled” (như ảnh dưới đây). Nội dung của thông báo này thực ra là “Hiện nay nhà cung cấp này chưa được cho phép – người dùng không thể đăng ký hoặc đăng nhập bằng tài khoản Facebook”. Vì vậy, bạn hãy bấm vào nút Enable để cho phép Facebook App có hiệu lực lên trang web của mình nhé.

Xong rồi hãy bấm Save Changes để lưu lại.

bấm vào nút Enable để cho phép Facebook App có hiệu lực lên trang web

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.

Tạo trang đăng nhập với nút “Đăng nhập bằng Facebook” trên trang web

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.

copy đường dẫn đến page

Bạn sẽ thấy một giao diện như dưới đây.

giao diện đăng nhập facebook

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:

lựa chọn đăng nhập bằng Facebook khi đăng nhập bằng tài khoản admin

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:

Trong Admin Dashboard, tìm đến mục Settings > Nextend Social Login, chọn tab Buttons.

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 ô đó.

Tùy chỉnh nút “Đăng nhập bằng Facebook”

Trong đó:

  • Login Label: Là nhãn hiển thị cho nút đăng nhập bằng Facebook. Ở đây cài đặt mặc định của plugin là “Continue with <b>Facebook</b>”. Bạn có thể sửa lại là “Đăng nhập bằng <b>Facebook</b>” hoặc gì tùy thích.
  • Link Label: Là nhãn hiển thị “Liên kết tài khoản với Facebook”. Mặc định là “Link account with <b>Facebook</b>”.
  • Unlink Label: Là nhãn hiển thị “Hủy liên kết tài khoản với Facebook”. Mặc định là “Unlink account with <b>Facebook</b>”.
  • Default button: Nút Continue with Facebook được hiển thị mặc định có hình dạng như ảnh kết quả ở trên. Nếu bạn muốn thay đổi gì thì bấm vào Use Custom Button để tùy chỉnh tiếp nhé.

Chỉnh sửa xong bạn hãy bấm Save Changes để lưu lại các thay đổi.

Lưu ý

Nếu như khách truy cập không thể đăng ký tài khoản mới bằng tài khoản Facebook của họ, thì bạn hãy thử kiểm tra lại chỗ cài đặt cho thành viên mới theo như sau:
Trên Admin Dashboard, vào mục Settings > General. Ở đây có 2 hộp tùy chọn là “Membership” và “New User Default Role”.

Ở 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 đó.

Lời kết

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.

Tuy nhiên ngoài cách trên ra thì vẫn còn rất nhiều cách khác cho bạn lựa chọn. Nếu bạn thông thạo về CSS, PHP thì bạn cũng có thể chọn một cách khác đó là tạo nút “Đăng nhập bằng Facebook” bằng code và tất nhiên là không cần dùng plugin.
Nếu các bạn biết còn biết cách tạo nút ‘Đăng nhập bằng Facebook” cho website WordPress nào khác hay và đơn giản hơn thì hãy cùng chia sẻ ở phần comment nhé. Cảm ơn các bạn đã theo dõi!

Gửi phản hồi