কিভাবে ব্লগে ফেসবুক পেজ Plugin যুক্ত করতে হয়?

আমরা প্রায় সব ধরনের ব্লগেই দেখে থাকি যে, Facebook Like Box নামের একটি Widget যুক্ত করা রয়েছে। সম্প্রতি Facebook কর্তৃপক্ষ ফেসবুক পেজ Plugin টি আরো অনেক ডেভেলপমেন্ট করে সুন্দরভাবে তৈরি করেছে। নতুন আপডেট করার ফলে এখন ফেসবুক পেজ Plugin টি আরো দ্রুত সময়ে ব্লগে লোড হয়।

ব্লগে ফেসবুক পেজ Plugin টি যুক্ত করে রাখলে এক দিকে যেমন ব্লগের সুন্দর্য বৃদ্ধি পায় অন্যদিকে ব্লগের ভিজিটররা ফেসবুক পেজটি সম্পর্কে অবগত হয়ে ব্লগ থেকেই ফেসবুক পেজটি লাইক করে নিতে পারে। আপনি চাইলে খুব সহজে ফেসবুক পেজ Plugin টি ব্লগের ডান পাশে যুক্ত করে নিতে পারেন।

আজকে আপনাদের দেখাবো কিভাবে এই আপডেট Facebook Page Plugin টি যুক্ত করবেন। উপরের ছবিতে ফেসবুক পেজ Plugin টির ডেমো দেখতে পাচ্ছেন। আপনি ফেসবুক পেজ Plugin টির লাইভ ডেমো দেখতে চাইলে এই লিংকে ক্লিক করে আমার ব্লগের Landing Page এর নিচের দিক হতে দেখ আসতে পারেন।

কিভাবে ফেসবুক পেজ Plugin তৈরি করবেন?

প্রথমে বলে রাখছি যেহেতু এটি হচ্ছে মূলত ফেসবুক পেজ এর প্লাগিন সেহেতু এটি ব্লগে যুক্ত করে নেওয়ার জন্য অবশ্যই আপনার একটি ফেসবুক পেজ থাকতে হবে। আর ফেসবুজ পেজ না থাকলে আপনার একটি নুতন ফেসবুক পেজ তৈরি করে নিতে হবে। এ ক্ষেত্রে আপনার ব্লগের নামে একটি ফেসবুক পেজ তৈরি করে নেওয়ার জন্য আমি ব্যক্তিগতভাবে পরামর্শ দেব।

আপনার ফেসবুক পেজ থাকলে প্রথমে ফেসবুক একাউন্টে লগইন করুন। তারপর ফেসবুক পেজ প্লাগিনটি তৈরি করে নেওয়ার জন্য এই লিংকে (Facebook Page Plugin) ক্লিক করুন। এই লিংকে ক্লিক করা মাত্র ফেসবুক আপনাকে নিচের পেজটিতে নিয়ে যাবে।

উপরের চিত্রের দেখুন আমার ফেসবুক আইডিতে লগইন করা থাকার কারনে ফেসবুক আমার ফেসবুক পেজ অটোমেটিক ডিটেক করে নিয়েছে। উপরের চিত্রে দেখুন অনেকগুলো অপশন দেখা যাচ্ছে। উপরের সেটিংসগুলো কোন পরিবর্তন না করে পেজ প্লাগিনটি তৈরি করলে আপনার ফেসবুক পেজের প্লাগিনটি নিচের চিত্রের মত দেখাবে।

উপরের চিত্রে দেখুন আমার ফেসবুক পেজের নাম, কাভার ছবি ও পোস্ট সহ আরো বিভিন্ন তথ্য দেখাচ্ছে। এটি অনেকটা মোবাইলের মত দেখাচ্ছে। কারণ সাধারণত এই ফেসবুক পেজ Plugin টি ব্লগে সাইডবারে ব্যবহার করা হয়। আর যেহেতু ব্লগের সাইডবার ছোট থাকে সেহেতু এটা সাইডবারের সাধারণ মাপ অনুসারে শো করছে। তবে আপনি চাইলে সেটিংস থেকে এটিকে ছাট বড় করে নিতে পারবেন।

আপনি যদি এটির সেটিংস পরিবর্তন করতে চান তাহলে নিচের চিত্রের অপশনগুলো থেকে পরিবর্তন করে নিতে পারবেন।

উপরের চিত্রে Tab এর অধিনে যে Timeline দেখা যাচ্ছে এটি মুছে দিলে আপনার ফেসবুক পেজ প্লাগিনটির পোস্টগুলো শো হবে না। তারপর নিচের Width ও Height থেকে এটিকে ছোট বড় করে নিতে পারবেন। এ ছাড়াও আরো চারটি অপশন রয়েছে এগুলো আপনি নিজেই বুঝতে পারবেন।

উপরের চিত্রে Tab এর অধিনে যে Timeline টি মুছে দিলে ফেসবুক পেজ প্লাগিনটি নিচের চিত্রেরন্যায় শো হবে।

উপরের চিত্রে দেখুন Tab এর অধিনে থাকা Timeline টি মুছে ফলে আপনার ফেসবুক পেজের প্লাগিনটি কেমন দেখাচ্ছে।

কিভাবে ব্লগে ফেসবুক পেজ Plugin যুক্ত করবেন?

এতক্ষণ আমরা ফেসবুক পেজ প্লাগিনটি তৈরি করলাম। এখন আমরা ফেসবুক পেজ প্লাগিনটি ব্লগে যুক্ত করার উপায় দেখব।

ব্লগে ফেসবুক পেজ প্লগিনটি যুক্ত করার জন্য প্রথমে উপরের চিত্রের বাম পাশের নিচের কোনায় নীল কালারের যে Get Code বাটন রয়েছে সেটিতে ক্লিক করতে হবে। Get Code বাটনে ক্লিক করা মাত্র নিচের চিত্রের কোডগুলো দেখতে পাবেন।

এখন আপনার ব্লগে লগইন করতে হবে। ব্লগে লগইন করে আপনার ব্লগের টেমপ্লেট হতে Theme > Edit HTML এ ক্লিক করে কম্পিউটারের কিবোর্ড এ Ctrl+F চেপে </body> অংশটি সার্চ করতে হবে। তারপর উপরের চিত্রের ১নং অংশের কোডগুলো </body> ট্যাগের ঠিক উপরে বসিয়ে দিয়ে Template Save করে নিতে হবে।

সবশেষে ২নং অংশটি আপনার ব্লগের সাইডবারের Layout হতে একটি HTML and Javascripts উইজেট এ যুক্ত করলে ফেসবুক পেজ প্লগিনটি যুক্ত হয়ে যাবে।

ফেসবুক পেজ Plugin টি সহজে যুক্ত করা উপায়ঃ

আপনি যদি এতসব ঝামেলা পোহাতে না চান তাহলে আমাদের কাস্টোমাইজ করা সহজ নিয়মটি অনুসরণ করে ব্লগে ফেসবুক পেজ প্লাগিনটি যুক্ত করে নিতে পারেন।

প্রথমে আপনার ব্লগে লগইন করুন।  তারপর Template > Edit Html এ ক্লিক করুন।

এরপর কিবোর্ড হতে Ctrl+F চেপে </body> অংশটি সার্চ করুন। এখন নিচের কোডগুলি কপি করে </body> এর উপরে পেষ্ট করুন। (নোটঃ নিচের এই Facebook Plugin টি আপনার ব্লগে যদি যুক্ত করা থাকে, তাহলে পুনরায় এ্যাড করা প্রয়োজন নেই। কিন্তু এটি যদি যুক্ত করা না থাকে তাহলে অবশ্যই যুক্ত করে নেবেন। কারণ এই JavaScript টি যুক্ত করে রাখলে আপনার ব্লগে Facebook এর যে কোন Plugin ব্যবহার করতে পারবেন)।

<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v6.0"></script>

তারপর ব্লগার ড্যাশবোর্ড হতে Layout এ ক্লিক করুন। এখন ডান পাশের Layout হতে Add Gadget এ ক্লিক করুন। নিচের চিত্রে দেখুন -

তারপর HTML/JavaScript এ ক্লিক করে নিচের কোডগুলি কপি করে HTML/JavaScript এর ঘরে পেষ্ট করুন।

<div class="fb-page" data-href="https://www.facebook.com/BlogerBangladesh" data-tabs="" data-width="" data-height="" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"></div>

সবশেষে উইজেটটি Save করলেই আপনার ফেসবুক পেজ প্লাগিনটি ব্লগে যুক্ত হবে।

কাষ্টমাইজেশনঃ

• উপরের বক্সের লাল চিহ্নিত BloggerBangladesh এর স্থলে আপনার ফেইসবুক পেজ Url এর নাম দিন।
• Header বড় করে দেখাতে চাইলে data-small-header="true" এর স্থলে false করে দিন।
• Cover Photo দেখাতে চাইলে data-hide-cover="true" এর স্থলে false করে দিন।
• Fan দের ছবি শো করাতে না চাইলে data-show-facepile="true" এর স্থলে false করে দিন।