VIẾT CHỨC NĂNG LOGIN BẰNG TÀI KHOẢN FACEBOOK

Chắc hẳn sinh sống đây có khá nhiều bạn đã gặp mặt nút “Đăng nhập bởi Facebook” khi bạn đăng ký hoặc singin trên một website làm sao đó. Không ít người dân dùng hiện giờ rất phù hợp nút này vì chưng họ chỉ việc sử dụng tài khoản Facebook có sẵn của họ, bắt buộc sẽ không phải mất thời gian đăng ký thông tin tài khoản mới và sau đây họ cũng không cần phải ghi nhớ thông tin tài khoản và mã đăng nhập nữa. Vì thế khá là tiện thể lợi.Bạn vẫn xem: Viết công dụng login bằng thông tin tài khoản facebook

Bạn đã xem: Viết tác dụng login bằng tài khoản facebook

Tính năng này để giúp đỡ tỷ lệ đăng ký trên site của người sử dụng được nâng cấp đáng nhắc đấy. Cùng rất timnhaviet.vnệc lượng người tiêu dùng Facebook ngày càng kếch xù như hiện nay, thì chắc chắn là bạn không nên bỏ qua tài năng này bắt buộc không?

Ngoài ra, timnhaviet.vnệc khuyến khích người dùng đăng nhập bằng những tài khoản social có sẵn như này đang còn có ích cho bạn khi tiến hành các chiến dịch sale sau này nữa cơ.

Bạn đang xem: Viết chức năng login bằng tài khoản facebook

Vậy còn chần chừ gì nữa nhưng không sản xuất ngay nút “Đăng nhập bởi Facebook” mang đến website WordPress của bạn? Hãy cùng xem hướng dẫn của bản thân mình dưới phía trên nhé.


*

Tính năng singin vào các trang web với thông tin tài khoản Facebook tất cả sẵn rất hối hả và thuận tiện cho tất cả chủ trang web và khách truy cập!

Tính năng đăng nhập vào các trang website với tài khoản Facebook có sẵn rất nhanh lẹ và thuận tiện cho tất cả chủ website và khách hàng truy cập!

Bước 1: thiết đặt plugin Nextend Social Login

Có không ít plugin rất có thể giúp các bạn cài để nút “Đăng nhập bởi Facebook” trên website. Tuy nhiên, plugin Nextend Social Login đã là plugin rất tốt với các lượt người dùng và bội phản hồi tốt nhất có thể hiện nay.

Plugin này có khả năng tùy chỉnh thiết lập cho trang web của doanh nghiệp tính năng Đăng cam kết và Đăng nhập bằng những mạng làng mạc hội không chỉ với Facebook mà còn tồn tại cả Pinterest, Google, Twitter… hoặc những nền tảng khác như Paypal, Amazon, Disqs,…

Điều này rất thuận tiện phải không nào? tiếng hãy cùng mình học cách thiết đặt plugin trẻ trung và tràn trề sức khỏe này nhé.Đầu tiên, vào Admin Dashboard (Bảng điều khiển Quản trị timnhaviet.vnên) của WordPress, bấm lựa chọn mục Plugins > add New nhằm thêm Plugin new cho website và tra cứu plugin này theo tự khóa “Nextend Social Login”.

Sau đó các bạn sẽ thấy plugin mang tên “Nextend Social Login và Register (Facebook, Google, Twitter)” với hình tượng hình ổ khóa xanh nghỉ ngơi ngay tác dụng đầu tiên. Bấm vào Install Now để setup và chờ một vài giây rồi ấn tiếp Activate ngay lập tức tại đó để kích hoạt plugin.


*

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

Lúc này trên màn hình hiển thị hiện ra rất nhiều tùy chọn cài đặt với những nền tảng không giống nhau, bản thân sẽ lý giải từng nền tảng trong số bài timnhaviet.vnết tiếp theo đây. Còn bây giờ, bạn hãy click vào nút Getting Started của ô Facebook nhé.


*

Cài để plugin Nextend Social Login

Màn hình hôm nay sẽ hiện hữu một loạt các hướng dẫn cách thiết lập Facebook phầm mềm (16 bước). Mình đang hướng dẫn thực hiện các thao tác làm việc này một cách trực quan liêu tiếp sau đây nhé.

Bước 2: thiết lập Facebook App

2.1. Đăng ký kết / Đăng nhập tài khoản Facebook for Developers

Bạn hãy truy cập vào đường liên kết mà plugin yêu cầu: https://developers.facebook.com/apps/. 


*

Cài để Facebook App

Khi website “Facebook for developer” hiện lên, bạn hãy kích lựa chọn “Register Now” ngơi nghỉ góc phía trên bên phải screen để đăng ký tài khoản Facebook dành cho nhà phạt triển.


*

Trang này sẽ yêu cầu liên tiếp đăng nhập bằng thông tin tài khoản facebook của bạn. Nên chọn lựa tài khoản Facebook mà bạn có nhu cầu dùng để làm chủ trang website và tiếp tục bấm Next để đến bước tiếp theo.

Trong số những lựa chọn mà Facebook for developer chỉ dẫn để biểu đạt về bạn, bạn hãy chọn một cái bất kỳ. Tôi cũng không kiên cố về sự khác biệt giữa các lựa chọn này lắm, nên tại chỗ này mình chọn “Other”.

2.2 tạo ra một Facebook App

Tiếp theo, click chuột nút Create New App để bước đầu tạo áp 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 doanh nghiệp vào ô Contact Email làm thế nào để cho tiện timnhaviet.vnệc quản lý sau này. Sau đó, chúng ta click vào Create phầm mềm ID để tạo nên ID cho ứng dụng Facebook mà chúng ta sắp sửa download nhé.

2.3. Tùy chỉnh thiết lập cho Facebook ứng dụng mà các bạn vừa tạo

Trên cửa sổ tiếp theo, chớ vội lựa chọn kịch bản Integrate Facebook Login nhưng trước không còn hãy vào mục Settings > Basic ngơi nghỉ bảng tinh chỉnh và điều khiển bên trái sẽ nhé.

Một bối cảnh như sau vẫn 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 công ty vàoPrivacy Policy URL: Điền băng thông đến phần Privacy Policy trên website của chúng ta vào đây.Terms of Sertimnhaviet.vnce URL: Điền đường dẫn đến phần Điều khoản sử dụng trên website của khách hàng vào đây.

Ví dụ như làm việc website của mình, những đường dẫn này mình hầu hết đang đặt sẵn ngơi nghỉ chân trang, mình chỉ timnhaviet.vnệc copy những đường dẫn này vào các ô tương ứng trên là xong.

Sau khi đã điền vừa đủ cả 3 mục thì bấm nút Save Changes ở dưới các trường thông tin đó.

Vẫn trong hành lang cửa số giao diện của Facebook App bạn đang tạo, các bạn tìm mục PRODUCTS (+) sinh sống menu phía bên trái và nhấp chuột dấu cùng (+). Nhận tiếp vào nút Set Up vào ô Facebook Login.

Lúc này ngơi nghỉ mục PRODUCT(+) sẽ hiện thêm tên thành phầm mà chúng ta vừa bắt đầu thêm vào là Facebook Login.

Bây giờ, bên trên bảng tinh chỉnh bên trái, các bạn hãy vào mục Quickstart của Facebook Login. Vào mục này sẽ có được 4 tùy chọn đến bạn. Hãy click vào mục Web vì ai đang muốn thêm nút singin Facebook vào 1 trang web.

Màn hình tiếp sau sẽ có 1 ô trống tiêu đề Site URL. Hãy điền đường truyền trang web của công ty vào đây cùng bấm Save nhằm lưu.

Tiếp đến chúng ta kích lựa chọn mục Settings ngay trên mục Quickstart để tùy chỉnh thiết đặt cho sản phẩm này của bạn.

Tìm mang đến mục Client OAuth Setting cùng điền một URL gồm 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 chiếc link của mình rồi rứa chỗ “tên-miền-của-bạn” bởi đường links đến trang web của bạn là được. Bấm Save Changes để lưu lại.

2.4. Kích hoạt Facebook tiện ích bạn vừa tạo

Sau đó hãy nhìn lên phía trên bên đề nghị của trang web, có một nút công tắc màu xám cạnh chữ Status – In Development vẫn ở tâm lý tắt (Off). Bấm vào để mở nó lên.

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

Xem thêm: Cách Đăng Ký Tài Xế Gojek Ở Đâu, Cách Đăng Ký Tài Xế Gojek, Chạy Xe Ôm Công Nghệ

Bước 3: Tích vừa lòng Facebook tiện ích với plugin trên trang web của bạn

Bây giờ, hãy quay trở lại trang hướng dẫn tạo ra Facebook ứng dụng ở 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 thực là các bạn đã tạo kết thúc app.

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

Bạn hãy điền tin tức vào các ô: app ID, ứng dụng 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, các bạn sẽ thấy hai thông tin bạn cần. Giờ đồng hồ chỉ timnhaviet.vnệc copy vào trang cài đặt plugin trên website của khách hàng thôi.

Lúc này, một thông báo là “Your configuration needs to lớn be verified” vẫn hiện lên. Bạn chỉ việc nhấn vào Verify Settings để đúng đắn các setup bạn vừa thực hiện.

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

Lúc này plugin sẽ chuẩn xác các setup của bạn thành công.

Tuy nhiên, gồm thể bạn sẽ gặp một ô thông báo màu tiến thưởng ghi là “Works Fine – Disabled” (như hình ảnh dưới đây). Câu chữ của thông tin này thực tế là “Hiện ni nhà cung ứng này không được có thể chấp nhận được – người dùng không thể đăng cam kết hoặc singin bằng tài khoản Facebook”. Bởi vì vậy, chúng ta hãy nhấp chuột nút Enable để có thể chấp nhận được Facebook phầm mềm có hiệu lực thực thi hiện hành lên trang web của mình nhé.

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

Bước 4: sinh sản trang đăng nhập với nút “Đăng nhập bằng Facebook” bên 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 thành một trang bắt đầu cho website. Mình đặt tạm tiêu đề đến trang này là “Facebook tiện ích login for web”.

Trong phần câu chữ của trang này, các bạn hãy điền một đoạn shortcode là

vào với nhấn nút Publish bên buộc phải màn hình.

Vậy là bạn đã có một trang singin bằng tài khoản Facebook rồi đó.

Để kiểm tra, các bạn hãy copy băng thông đến page mà chúng ta vừa tạo. Tiếp đến đăng xuất khỏi tài khoản bạn đang sử dụng trên website, rồi truy cập vào băng thông trên.

Bạn sẽ thấy một đồ họa như bên dưới đây.

Và khi quay trở lại để singin vào tài khoản admin của bạn, bạn cũng trở nên thấy tất cả thêm một gạn lọc đăng nhập bởi Facebook như này nữa:

Vậy là chúng ta đã hoàn toàn timnhaviet.vnệc tạo nên nút singin bằng tài khoản Facebook rồi đó.

Bạn thấy đấy, nút đăng nhập bởi Facebook mặc định được timnhaviet.vnết là “Continue with Facebook”. Vào trường hợp bạn có nhu cầu đổi câu đó sang một lời lôi kéo khác, cá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 đang thấy bao gồm 3 ô nội dung tương xứng với 3 tinh thần nút nhưng mà plugin Nextend Social Login này cung cấp. Bạn hãy chọn 1 cái nhãn thương hiệu mới cho những nút bằng phương pháp sửa nội dung những ô đó.

Trong đó:

Login Label: Là nhãn hiển thị đến nút đăng nhập bằng Facebook. Ở đây thiết lập mặc định của plugin là “Continue with Facebook
”. Chúng ta 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”. Mang định là “Link account with Facebook”.Unlink Label: Là nhãn hiển thị “Hủy link 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ị mang định có làm nên như ảnh kết quả sinh hoạt trên. Nếu bạn muốn thay đổi gì thì click chuột Use Custom Button để thiết lập tiếp nhé.

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

Lưu ý

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

Ở mục Membership hãy có lẽ rằng ô “Anyone can register” được đánh dấu tích nhằm bất kỳ ai cũng có thể đăng ký tài khoản trên website của bạn.

Trong tùy chọn New User default Role, các bạn hãy đặt một vai trò khoác định tương xứng cho tài khoản đăng ký mới trên trang web của bạn. Ở phía trên mình lựa chọn là “Customer”.

Sau lúc tùy chỉnh setup xong lưu giữ kéo xuống footer và nhấn Save Changes nhằm lưu lại các thay đổi.

Lời kết

Mặc dù bài bác này khá là dài mà lại mình có thể đảm bảo an toàn với chúng ta đây là trong những bài phía dẫn chi tiết nhất về cách tạo nút “Đăng nhập bằng Facebook” trên website WordPress cùng đã sử dụng plugin cực tốt cho timnhaviet.vnệc này.

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

Leave a Reply

Your email address will not be published. Required fields are marked *