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.
Đang xem: Viết chức năng login bằng tài khoản facebook
Bạn đang xem: Viết chức năng login bằng tài khoản facebookBạn đang xem: Viết chức năng login bằng tài khoản facebook
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 ucozfree.comệ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, ucozfree.comệ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í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ị ucozfree.comê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.
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 ucozfree.comế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
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
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).
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 ucozfree.comệ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é.
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é.
Một giao diện như sau sẽ hiện ra:
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àoPrivacy Policy URL: Điền đường dẫn đến phần Privacy Policy trên website của bạn vào đây.Terms of Serucozfree.comce 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ỉ ucozfree.comệ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.
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.
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.
Nhớ bấm Save Changes để lưu lại thay đổi này nhé.
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 web1_setting my Facebook App để xác nhận là bạn đã tạo xong app.
Bạn sẽ được chuyển sang giao diện như dưới đây.
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ỉ ucozfree.comệc copy vào trang cài đặt plugin trên website của bạn thôi.
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.
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.
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ướ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à
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.
Bạn sẽ thấy một giao diện như dưới đây.
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 ucozfree.comệc tạo nút đăng nhập bằng tài khoản Facebook rồi đó.
Bạn thấy đấy, nút đăng nhập bằng Facebook mặc định được ucozfree.comế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 ô đó.
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 Facebook”. Bạn có thể sửa lại là “Đăng nhập bằng Facebook” 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 Facebook”.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 Facebook”.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 ucozfree.comê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”.
Xem thêm: Vì Sao Phải Phòng Trừ Tổng Hợp Dịch Hại Cây Trồng ? Giải Bài Tập Công Nghệ 10
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 ucozfree.comệ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!