এ গাইডে আমরা Nextend Social Login প্লাগইন ব্যবহার করে Google লগইন যুক্ত করব। ধাপে ধাপে দেখাবো — প্লাগইন ইনস্টল, Google Cloud-এ OAuth client তৈরি, Nextend-এ Client ID/Secret বসানো, Auto-insert বন্ধ করে শর্টকোড/Code Snippets দিয়ে Login পেজ ও Checkout পেজে সুন্দর জায়গায় দেখানো এবং CSS দিয়ে স্টাইল করা।
প্রয়োজনীয়তাঃ
- WordPress admin অ্যাক্সেস
- আপনার সাইটের ডোমেন (HTTPS থাকা বাঞ্ছনীয়)
- Google account (Cloud Console অ্যাক্সেস)
- Nextend Social Login (ফ্রি/প্রো) প্লাগইন
- Code Snippets প্লাগইন (বা child theme-এর
functions.php)
১) প্লাগইন ইনস্টল ও সক্রিয় করা
- WP Dashboard → Plugins → Add New → সার্চ করুন
Nextend Social Login→ Install → Activate। - (ইচ্ছা করলে)
Code Snippetsইনস্টল এবং Activate করুন — এতে পরে কোড সহজেই যোগ করা যাবে, আর থিম আপডেটে হারাবে না।
২) Google Cloud Console এ OAuth credentials তৈরি করা
গুরুত্বপূর্ণ: Google এখন অনেক ক্ষেত্রে OAuth consent screen ও verification চায়; ছোট সাইট/ডেভেলপমেন্ট-এ আপনি Internal/External হিসেবে কনফিগার করবেন — কিন্তু production/পাবলিক হলে consent screen সঠিকভাবে ফিলাপ করুন এবং প্রয়োজনে verification নোট করুন।
ধাপগুলো:
https://console.cloud.google.com/ এ লগইন করুন।
Project → Create Project (অথবা ড্রপডাউন থেকে একটি সিলেক্ট করুন)।
Navigation menu → APIs & Services → OAuth consent screen → এখানে
ExternalবাInternalনির্বাচন; App name, Support email এবং Authorized domains (তোমার ডোমেইন — উদাহরণ:example.com) যোগ করে Save করুন।APIs & Services → Credentials → Create Credentials → OAuth client ID →
Application type: Web application
Name: ধরবে
Nextend Google Loginবা তোমার পছন্দAuthorized redirect URIs: এখানে Nextend যেটা বলে দেবে সেটি বসাতে হবে — সাধারণত Nextend প্লাগইনের সেটিংস পেজে
Redirect URIs/callback URL দেখায়; যদি না দেখায়, পরে Nextend settings-এ গিয়ে Client ID/Secret বসালে Nextend নিজেই রিকমেন্ডেড URI দেখায়।
Create করলে Google তোমাকে Client ID এবং Client secret দিবে — এগুলো কপি করে রেখে দিন।
মন্তব্য: সর্বদা Redirect URI ঠিক রাখো — ভুল হলে OAuth কাজ করবে না। Nextend সেটিংসে “Authorized redirect URIs” কপি-পেস্ট করা সবচেয়ে নিরাপদ পদ্ধতি (Nextend-এ “Get Redirect URL” বোতাম থাকলে তা ব্যবহার করো)।
৩) Nextend Social Login সেটআপ (WP ড্যাশবোর্ডে)
- WP Dashboard → Nextend Social Login settings (বা Settings → Nextend Social Login) এ যান।
- Providers → Google → Configure → এখানে Google থেকে পাওয়া Client ID ও Client secret বসান।
- Save করুন এবং Test connection করুন — সফল হলে Google OAuth consent পপআপ দেখতে পাবেন।
- Important: Nextend সেটিংসে যদি “Auto insert” বা “Show on” অপশন থাকে (My Account, Login, Checkout) — Auto-insert: OFF/Disable রাখুন যদি তুমি নিজে কন্ট্রোল করে শর্টকোড/হুক যোগ করতে চাও। না হলে একই জায়গায় ডুপ্লিকেট ভাবে দেখা দিতে পারে।
৪) শর্টকোড / হুক — কোথায় কি যুক্ত করবেন
তুমি চাইলে এটিকে পেইজে/Elementor-এ Shortcode widget দিয়ে বসাতে পারো। কিন্তু অধিক পেশাদারি ও নির্দিষ্ট যায়গায় দেখাতে আমরা WooCommerce হুক দিয়ে Code Snippets-এ PHP ব্যবহার করব — যাতে Login এবং Checkout-এ সুন্দরভাবে যায়।
(A) Login পেজে দেখানোর জন্য (প্রতিটি WooCommerce login form-এর ঠিক নিচে)
এখন আপনি যদি লগিন পেজে লগিন ফর্মের নিচে গুগল লগিন এর বাটনটি চান তবে Code Snippets-এ নিচের PHP ব্যবহার করুন :
// Nextend show on my-account/login/register
if(class_exists('NextendSocialLogin')){
function nxt_social_click_shop_woocommerce_login_form() {
if ( is_user_logged_in() ) return;
echo '';
echo NextendSocialLogin::renderButtonsWithContainer();
echo '';
}
add_action( 'woocommerce_login_form', 'nxt_social_click_shop_woocommerce_login_form', 10, 0 );
add_action( 'woocommerce_register_form', 'nxt_social_click_shop_woocommerce_login_form' );
add_action( 'woocommerce_after_checkout_registration_form', 'nxt_social_click_shop_woocommerce_login_form' );
}
(B) Checkout পেজে — Billing details–এর ঠিক পরে দেখানোর কোড
এখন আপনি যদি চেকআউট পেজে ফর্মের নিচে গুগল লগিন এর বাটনটি চান তবে Code Snippets-এ নিচের PHP ব্যবহার করুন :
// Nextend social login — show after billing form on checkout
if ( class_exists( 'NextendSocialLogin' ) ) {
function nxt_social_after_checkout_billing() {
// যদি ইউজার লগইন করে থাকে তাহলে দেখাবো না
if ( is_user_logged_in() ) {
return;
}
// কেবল চেকআউট পেজেই দেখাবো
if ( ! is_checkout() ) {
return;
}
// Container দিয়ে রাখা — পরে CSS দিয়ে স্টাইল করা যাবে
echo '';
echo NextendSocialLogin::renderButtonsWithContainer();
echo '';
}
// এখানে আমরা হুকটি ব্যবহার করছি — এটি billing অংশের ঠিক পরে রান করবে
add_action( 'woocommerce_after_checkout_billing_form', 'nxt_social_after_checkout_billing', 10 );
}
৫) Auto-insert বন্ধ করা (একটি সতর্কতা)
Nextend-এ যদি তুমি Auto-insert অন রাখো এবং একই সঙ্গে Code Snippets-এ কোড রাখো তাহলে একাধিক বাল্ব হবে। তাই Nextend → Settings → Provider (Google) অথবা Global settings → Auto insert/Show on login/checkout—তাকে disable রাখুন যখন আপনি কাস্টম হুক/শর্টকোড ব্যবহার করছেন।
৬) পরীক্ষা (Testing) — নিশ্চিত করার চেকলিস্ট
- Browser-এ incognito window খুলো।
- Checkout পেজে গিয়ে যাচাই করো — তুমি কি Login buttons দেখতে পাচ্ছো (বিলিং ডিটেইেলের পরে)?
- ক্লিক করলে Google OAuth পপআপ আসছে? (consent screen)
- Google-এ সফলভাবে লগইন হলে সাইটে ইউজারটি লগইন বা নতুন ইউজার হিসেবে তৈরি হচ্ছে কি না?
- Login ও Register পেজেও একইভাবে পরীক্ষা করো।
- যদি redirect error আসে — Google Console-এ Redirect URI ঠিক আছে কিনা দেখো।
৭) যদি কাস্টম রিডাইরেকশন বা অতিরিক্ত প্রয়োজন হয়
- Nextend-এ আপনি “Auto create account” বা “Link accounts” অপশন পেতে পারেন — এগুলো কনফিগার করুন (যদি প্রো ভার্সন দ্বারা স্পেসিফিক ফিচার লাগে)।
- চাইলে Login সফল হলে ইউজারকে কোনো নির্দিষ্ট পেজে পাঠাতে
wp_redirect()দিয়ে কাস্টম হুক যোগ করতে পারো — কিন্তু এ ক্ষেত্রে Nextend ডকুমেন্টেশন দেখলেই ভাল।
৮) শেষ কথা ও নিরাপত্তা
- Production সাইটে Google OAuth consent screen-এ Authorized domains/Privacy policy পেজ ঠিক করে দিন।
- Client secret নিরাপদে রাখো — কখনও পাবলিক রিপোজিটরিতে রাখো না।
- HTTPS গুরুত্বপূর্ণ — OAuth redirect সাধারণত HTTPS প্রয়োজন হয়।