Hướng dẫn tích hợp đăng nhập từ mạng xã hội trong website wordpress

Google+ bị khai tử và hậu quả để lại
19/10/2018
Công nghệ SilentVoice đang được Microsoft phát triển
Công nghệ SilentVoice đang được Microsoft phát triển
26/10/2018

Xin chào mừng tất cả các bạn đã đến với Blog chia sẻ kiến thức về WordPress và phát triển website,hay hệ thống Marketing Online của bạn. Hôm nay mình xin chia sẻ bài hướng dẫn tích hợp đăng nhập từ mạng xã hội trong website wordpress một cách đơn giản mà chuyên nghiệp nhất.Nào chúng ta cùng bắt đầu nhé !

Bài này là phần 7 nằm trong Series Tạo website bằng wordpress toàn tập

Hiện nay mạng xã hội quá là phổ biến nhưng nếu như website của bạn không tích hợp tính năng đăng nhập bằng mạng xã hội đặc biệt là những website nào là Woocommerce (Thương Mại Điện Tử) thì chắc hẳn bạn đang bị tụt lùi với đối thủ của mình vì từ thực tế mình có thể thấy rằng rất ít khách hàng tiềm năng nào còn bỏ thời gian ra để nhập thông tin họ tên rồi email tùm lum thứ phải không các bạn ?.

Với những website sử dụng mã nguồn mở WordPress thì chúng ta có thể tích hợp thủ công hoặc sử dụng plugin và ở bài này mình sẽ hướng dẫn các bạn sử dụng plugins tạo thiết lập login social. Lưu ý mình hướng dẫn các bạn với plugins Nextend Social Login and Register, với plugin khác thì cũng tương tự.

  1. Vào phần cài đặt Plugin thêm tìm kiếm với từ khóa Nextend Social Login and Register bắt đầu tiến hành cài đặt nó rồi kích hoạt nó.
Hướng dẫn tích hợp đăng nhập mạng xã hội trong website wordpress

Hướng dẫn tích hợp đăng nhập mạng xã hội trong website wordpress

Sau khi đã kích hoạt plugin lên chúng ta bắt đầu cấu hình cho nó. Trong phần này mình sẽ hướng dẫn các bạn cấu hình đăng nhập cho 2 mạng xã hội đó là FacebookGoogle Plus .Bạn vào phần Cài đặt=>Extent Social Login mình làm phần cài đặt cho facebook trước.

Hướng dẫn tích hợp đăng nhập mạng xã hội trong website wordpress

Trong tab Getting Started  bạn hãy làm theo hướng dẫn nó vào đường link :https://developers.facebook.com/apps/ để tạo nên 1 App đăng nhập bằng Facebook.Lưu ý bạn phải đăng nhập Facebook mới có thể tạo được nhé

Hướng dẫn tích hợp đăng nhập mạng xã hội trong website wordpress

Tiếp theo chúng ta đang ở trang tạo Ứng dụng trên facebook ở đây bạn Thêm một ứng dụng mới

Hướng dẫn tích hợp đăng nhập mạng xã hội trong website wordpress

Hướng dẫn tích hợp đăng nhập mạng xã hội trong website wordpress

Nhập tên hiển thị và email liên hệ của bạn Nhấp Tạo ID ứng dụng

Hướng dẫn tích hợp đăng nhập mạng xã hội trong website wordpress

Tiếp theo là có rất nhiều ứng dụng có thể hỗ trợ cho chúng ta tuy nhiên cái mà mình đang cần đó là đăng nhập với facebook vì vậy chọn phần Đăng nhập Facebook thôi nhé

Hướng dẫn tích hợp đăng nhập mạng xã hội trong website wordpress

Chọn vào ứng dụng Web để tiếp tục cài đặt nào

Hướng dẫn tích hợp đăng nhập mạng xã hội trong website wordpress

Nhập trang web mà bạn muốn đăng ký với Facebook sau đó lưu lại

Hướng dẫn tích hợp đăng nhập mạng xã hội trong website wordpress

Tiếp theo chọn phần Cài đặt bên menu tay trái và nhập những thông tin cơ bản như tên hiển thị,Email liên hệ,Biểu tượng của ứng dụng(trong phần này chúng ta có thể để logo thương hiệu mình lên nhé) Nhập hạng mục mà bạn đang làm sau đó Lưu lại

Hướng dẫn tích hợp đăng nhập mạng xã hội trong website wordpress

Chúng ta đang quan tâm đến 2 thông số quan trọng nhất là ID ứng dụngKhóa bí mật của ứng dụng,muốn hiển thị khóa bí mật chúng ta click vào hiển thi bước này bạn phải nhập mật khẩu của tài khoản facebook

 

Hướng dẫn tích hợp đăng nhập mạng xã hội trong website wordpress

Sau khi đã hoàn thành mọi thứ chúng ta quay trở lại giao diện quản lý website của mình nhập 2 thống số mình vừa có được vào trong phần Setting cho plugin Extent Social Login rồi Lưu lại

Hướng dẫn tích hợp đăng nhập mạng xã hội trong website wordpress

Trong phần Buttons bạn sẽ chọn phần hiển thị shortcode của Facebook ra giao diện người dùng ở đây mình sẽ sử dụng tùy chọn button ra vì vậy mình sẽ copy đoạn mã vừa rồi ra trang mà mình mong muốn người dùng có thể đăng nhập vào website của mình như Đăng nhập,Tài khoản…

Hướng dẫn tích hợp đăng nhập mạng xã hội trong website wordpress

Trong bài hướng dẫn này mình sẽ làm phần đăng nhập và đăng ký của khách hàng trong trang Login Page phần vừa copy ở trên

Hướng dẫn tích hợp đăng nhập mạng xã hội trong website wordpress

Tương tự với phần đăng nhập bằng tài khoản Google .Bạn truy cập vào link:https://console.developers.google.com/apis/ để tạo API đăng nhập trên Google .Tạo dự án mới

Hướng dẫn tích hợp đăng nhập mạng xã hội trong website wordpress

Sau khi tạo xong trong phần Identifiers  =>Create identifter==>OAUth client ID Prompts

 

Hướng dẫn tích hợp đăng nhập mạng xã hội trong website wordpress

Chọn vào Web application click vào Create

Hướng dẫn tích hợp đăng nhập mạng xã hội trong website wordpress

Hướng dẫn tích hợp đăng nhập mạng xã hội trong website wordpress

Trong phần này bạn đặt tên cho ứng dụng của mình nhập thông tin website và trong phần Allowed redirection URLs bạn điền thông tin link có trong phần setup của plugin đó

Hướng dẫn tích hợp đăng nhập mạng xã hội trong website wordpress

Hướng dẫn tích hợp đăng nhập mạng xã hội trong website wordpress

Save lại những thông tin mình đã nhập ở trên sau đó mình sẽ có được 2 thông số cần để kết nối trên website đó là Customer IDClient service code

Hướng dẫn tích hợp đăng nhập mạng xã hội trong website wordpress

Bước tiếp theo chúng ta copy 2 thông số ở trên vào trong phần Seting của Plugin Extent Social Login Lưu lại là xong.

Hướng dẫn tích hợp đăng nhập mạng xã hội trong website wordpress

Nào còn một bước nữa nhưng làm tương tự như bên Facebook đó là copy đoạn mã của shortcode quăng vào chỗ bạn cần khách đăng nhập nhé.Kéo lên phần trên nếu như bạn quên hihi .Nào bây giờ chúng ta sẽ kiểm tra lại kết quả của mình sau khi đã hoàn thành nhé .Đầu tiên là với facebook trước nào

Hướng dẫn tích hợp đăng nhập mạng xã hội trong website wordpress

Hướng dẫn tích hợp đăng nhập mạng xã hội trong website wordpress

Đăng nhập thành công sẽ lấy được những thông tin mà bạn cần cho việc đặt hàng hoặc thu thập thông tin .Cái này mình có thể lấy được thêm một số thông tin của tài khoản như ngày tháng năm sinh,số điên thoại địa chỉ … Tuy nhiên mình sẽ chỉ quan tâm đến 2 thông tin này là đủ đó là Họ tên và Email .Chạy ngon lành cành đào nhé

Hướng dẫn tích hợp đăng nhập mạng xã hội trong website wordpress

Đối với google tương tự bạn sẽ chon tai khoản muốn đăng nhập .

Hướng dẫn tích hợp đăng nhập mạng xã hội trong website wordpress

Bạn cũng sẽ có thể lấy được thêm một số thông tin tuy nhiên những thông tin cơ bản đã có thể lấy lên đây được rồi

Hướng dẫn tích hợp đăng nhập mạng xã hội trong website wordpress

Mặc định nó sẽ hiển thị shortcode trong phần đăng nhập của website nhưng phần này thực tế ra mình không cần thiết vì khách cũng chả cần quan tâm đến đường dẫn đăng nhập này là gì cả phải không nào .

Hướng dẫn tích hợp đăng nhập mạng xã hội trong website wordpress

Các bạn muốn tự làm website hãy xem thêm bài viết tại chuyên mục Hướng dẫn wordpress

Trong phiên bản plugin Extent Social Login FREE này nó cho phép bạn có thể đăng nhập bằng Facebook,Google + hay Twitter nữa  nhưng vì bài này khá dài rồi nên về phần đăng nhập với Twitter mình hẹn các bạn ở một dịp khác nhé . Chúc các bạn thành công!

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *