নতুন ফেসবুক লাইক বক্স আপনার ওয়েবসাইট / ব্লগের জন্য V2.3 সঙ্গে CSS স্টাইল !!

আসসালামু আলাইকুম বন্ধুরা , আমারা যারা ব্লগিং এর সঙ্গে যুক্ত আছি বা বিভিন্ন ব্লগ সাইট ডিজাইন করছি তারা সবাই জানি ফেসবুক লাইক বক্স একটা ওয়েবসাইট বা ব্লগ সাইট এর জন্য কতটা গুরুত্ব পূর্ণ । সে যাই তবে আমারা সবাই জানি ফেসবুক ইতি মধ্যে তাদের আগের ফেসবুক লাইক বক্স স্টাইল পরিবর্তন করে নতুন লাইক বক্স নিয়ে এসেছে এবং এই নতুন স্টাইল লাইক বক্সে আছে নতুন নতুন সব সুন্দর ফিচার যেমন আগের লাইক বক্সে কোন কভার ফটো দেখা যেত না কিন্তু এটা তে সেই সুবিদা আছে শেয়ার বাটন অ্যাড করা হয়েছে ইত্যাদি । অবশ্য ফেসবুক পুরন লাইক বক্স ব্যবহার কারেদেন অটো নতুন লাইক বক্স আপডেট করে দিচ্ছে এটা আপনারা নিজেই বুঝতে পারছেন । তবে আজকে আমি আপনাদের সঙ্গে এই নতুন লাইক বক্সের সঙ্গে একটু নতুন স্টাইল যুক্ত করে দিব নিচের ডেমো দেখেই বুঝতে পারবেন এটা একটা সিএসএস কাস্টম লাইক বক্স সঙ্গে মজার বিষয় এটা আপনি আপনার ব্লগার ওয়ার্ডপ্রেস দুই ধরনের প্লাটফর্মেই ব্যবহার করতে পারবেন তাহলে চলুন শুরু করা যাক । :)

new facebook like box v2.3 with css style

FB Like Box Demo

উপরের ডেমো বাটনে ক্লিক করে সাইড বারে লক্ষ করুন দেখুন লাইক বক্স আছে এবং ভাল করে লক্ষ করুন দেখুন এটার মধ্যে অবশ্যই নতুন কিছু দেখতে পাবেন আশাকরি পেয়েছেন :D যাই হোক পছন্দ হলে নিচে থেকে দেখে নিন কিভাবে ব্যবহার করবেন ! তবে আমি আজকে আপনাদের দেখাব কিভাবে ব্লগার ব্লগে ব্যবহার করবেন ওয়ার্ডপ্রেস ব্যবহার কারিরা অবশ্যই জানেন কিভাবে ব্যবহার করবেন । :)

নতুন স্টাইল ফেসবুক কমেন্ট বক্স v2.3 ব্লগার/ব্লগস্পট ব্লগে ব্যবহার করুন

নতুন ফেসবুক লাইক বক্স আপনার ওয়েবসাইট / ব্লগে কিভাবে ব্যবহার করবেন !

প্রথমে আপনার ব্লগার ব্লগ লগইন করুন ড্যাশবোর্ড থেকে Layout এ ক্লিক করুন এবং Add a Gadget এ ক্লিক করে নতুন পেজ থেকে HTML/Javascript এ ক্লিক করুন এবং Content ঘরে নিচের কোড গুল কপি করে পেস্ট করুন ।

<div class="fb-page" 
     data-href="https://www.facebook.com/esobondhu"  
     data-small-header="false"  
     data-hide-cover="false"    
     data-show-facepile="true"  
     data-show-posts="false">
</div>
 
Read More :ওয়ার্ডপ্রেস ব্লগের মেনুবারে লগইন/লগাউট ও রেজিস্টার মেনু লাগান খুব সহজে।
<div id="fb-root"></div>
 
<style>
 
  .fb-page, .fb-page:before, .fb-page:after {
    border: 1px solid #88B922;
  }
 



Your Ads Here










Your Ads Here










  .fb-page:before, .fb-page:after {
    content: "";
    position: absolute;
    bottom: -3px;
    left: 2px;
    right: 2px;
Read More :ঈদ স্পেশাল ! ব্লগার ভিজিটর দের স্বাগতম জানান ঈদ মুবারক দিয়ে দারুন একটি ওয়েডগেট 
    height: 1px;
    border-top: none
  }
  
  .fb-page:after {
    left: 4px;
    right: 4px;
    bottom: -5px;
    box-shadow: 0 0 2px #88B922
  }
</style>
 
<script>
  (function(d, s, id) {
Read More :ব্লগার ব্লগে প্রতিটি পোস্টের নীচে যুক্ত করুন Like & Dislike বাটন !
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
</script>

উপরের কোড থেকে esobondhu মুছে সেখানে আপনার ফেসবুক লাইক পেজ এর Url বসান মানে সুধু মাত্র উজার নামটা । আপনি চাইলে উপরের কোডটা নিজে কাস্টমাইজ করতে পারবেন যেমন : আপনি যদি চান কভার ফটো রাখবেন না তাহলে data-hide-cover="false" এখান থেকে false এর যাইগাই শুধু মাত্র true লিখে দিন দেখুন তাহলেই আর কভার ফটো দেখা যাবে না । আপনি যদি চান কোন রকম স্টাইল ব্যবহার করবেন না তাহলে উপরের কোড থেকে <style> ..... </style> এই টুকু মুছে ফেলুন । আপনি যদি চানা লাইক বক্স এর বর্ডার কালার পরিবর্তন করবেন তাহলে উপরের কোড থেকে #88B922 এই কালার কোড মুছে সেখানে নিজের পছন্দ মত কালার কোড বসান ।

আশাকরি আমি আপনাদের বুঝতে সফল হয়েছি পোস্ট এর মধ্যে কোন রকম সমস্যা হলে অবশ্যই নিচে কমেন্ট করুন । পোস্টটি ভাল লাগলে অবশ্যই বন্ধুদের সঙ্গে শেয়ার করুন । তাহলে আজকের মত এই পর্যন্ত নতুন কিছু নিয়ে খুব তাড়াতাড়ি দেখা হবে ভাল থাকবেন সুস্থ থাকবেন । আসসালামু আলাইকুম । :)