ব্লগারে পোস্টের ভিউ সংখ্যা প্রদর্শন করুন

হ্যাঁ আপনি ঠিক শুনেছেন, সমস্ত ব্লগস্পট ব্লগ এখন পৃথক পৃষ্ঠাদর্শনের জন্য একটি গতিশীল গণনা প্রদর্শন করতে সক্ষম হবে৷ সার্ভার বা সার্ভার কোড নিয়ে চিন্তা না করে আমরা এখন সহজেই এই পোস্ট ভিউ কাউন্টার তৈরি করতে পারি। Firebase- এর মতো একটি বিনামূল্যের পরিষেবা দিয়ে আপনি এখন ব্যাকএন্ড ডেভেলপমেন্ট নিয়ে চিন্তা না করে ব্লগারের জন্য গতিশীল এবং ডেটা-চালিত প্লাগইন তৈরি করতে পারেন। ফায়ারবেস এপ্রিল ২০১২ সালে চালু করা হয়েছিল এবং তখন থেকেই এটি ডেভেলপারদের জন্য হাব ছিল। আশ্চর্যজনকভাবে এই ফ্রি প্ল্যানটি আপনাকে ১০ জিবি ফ্রি ব্যান্ডউইথ এবং ৫ জিবি ফ্রি স্টোরেজ দেয়. যা আমাদের ক্ষেত্রে প্রয়োজনের চেয়ে বেশি! ব্লগার প্ল্যাটফর্মের জন্য এই বিনামূল্যের পরিষেবাটি ব্যবহার করতে এবং আমাদের ডেভেলপার আহমেদ নাসিরের সাহায্যে কিছু আশ্চর্যজনক স্ক্রিপ্ট তৈরি করতে পেরে আমরা ভাগ্যবান। আজকের টিউটোরিয়াল আপনাকে একটি গতিশীল স্ক্রিপ্ট ইনস্টল করতে সাহায্য করবে যা স্বয়ংক্রিয়ভাবে তার প্রাথমিক গণনা মান বৃদ্ধি করবে যখন একজন দর্শক আপনার ব্লগ পোস্টগুলি দেখবে। কাউন্টার ডেটা Firebase দ্বারা প্রদত্ত একটি বিনামূল্যের ডাটাবেসে সংরক্ষণ করা হবে৷ প্রথমে একটি ডেমো দেখা যাক!

আপডেটঃ দুর্ভাগ্যবশত ফায়ারবেস এখন আর বিনামূল্যে নয়, এর হ্যাকার ফ্রি প্ল্যানটি শুধুমাত্র ৫০ টি সর্বোচ্চ সংযোগের অনুমতি দেয় যার মানে এটি প্রতিদিন ১০০ জনেরও কম ভিজিটর সহ ছোট ব্লগের জন্য কাজ করবে

দ্রষ্টব্যঃ আপনি যখন ব্লগের হোমপেজ রিফ্রেশ করবেন তখন পোস্টভিউয়ের সংখ্যা পরিবর্তিত হবে না কিন্তু আপনি যখন পৃথক পোস্টে যান তখনই এটি পরিবর্তন হবে।

১. আপনার Firebase অ্যাকাউন্ট তৈরি করুন

একটি বিনামূল্যের ডাটাবেসে অ্যাক্সেস পেতে এবং আপনার পোস্টভিউ কাউন্টার ডেটার ব্যাকআপ রাখতে সক্ষম হওয়ার জন্য, আপনাকে Firebase-এ একটি বিনামূল্যের অ্যাকাউন্টের জন্য সাইন আপ করতে হবে। 

                      এখন সাইন আপ করতে এখানে ক্লিক করুন!

সহজ পদক্ষেপগুলি বুদ্ধিমানের সাথে পূরণ করুন এবং তারপর আপনার অ্যাকাউন্ট সক্রিয় হয়ে গেলে, আপনাকে অবশ্যই আপনার প্রথম ফায়ারবেস ডাটাবেস তৈরি করতে হবে।

২. একটি ফায়ারবেস ডেটাবেস তৈরি করুন৷

আপনি ২ টি ফায়ারবেস তৈরি করতে পারেন। বর্তমানে শুধুমাত্র একটি তৈরি করুন, আমরা এই বিনামূল্যের পরিষেবার সাথে আপনি খেলতে পারেন এমন আশ্চর্যজনক জিনিসগুলি সম্পর্কে পরবর্তী পোস্টগুলিতে আপনাকে গাইড করব৷

            ১।    আপনার অ্যাকাউন্টের নীচের ডানদিকে, আপনি নিম্নলিখিত সাবমিট বক্সটি পাবেন।

            ২। এই বক্সের ভিতরে আপনার ওয়েবসাইটের নাম লিখুন। আমার ক্ষেত্রে আমি অনেক ব্লগ                    সন্নিবেশ করেছি এবং এটি নিম্নলিখিত ফায়ারবেস URL তৈরি করেছেঃ                                                                                          https://mybloggertricks.firebaseio.com

            ৩। অবশেষে তৈরি বোতামটি টিপুন এবং আপনার ফায়ারবেস ইউআরএলটি   নোট করুন                             কারণ এই টিউটোরিয়ালে আমাদের পরে এটির প্রয়োজন হবে।

৩. পোস্টভিউ প্লাগইন ইনস্টল করা

        ১. ব্লগার > টেমপ্লেটে যান

       ২. আপনার টেমপ্লেট ব্যাকআপ

       ৩. HTML এডিট এ ক্লিক করুন

       ৪. " উইজেট টেমপ্লেটগুলি প্রসারিত করুন " বাক্সে টিক দিন

       ৫. ]]></b:skin> অনুসন্ধান করুন

       ৬. ঠিক উপরে নিচের CSS কোড পেস্ট করুন:

/*-------- Post Views  ----------*/
#views-container {
width: 85px;
float: right;
}

.mbtloading {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3aymLXDHQ6WPZu0pEyIg25DUf32BjxZT-RVQxDQJGKydVy5gKuOGBjOFOj-5lcYTLufqazEdxK6HUsk4E9BjLbpzoWL6lgP6RPOXNhxIUD7rmtDCuq_nCrStgwcS17uBzRua4f_z05wat/s320/mbtloading.gif') no-repeat left center;
width: 16px;
height: 16px;
}

.viewscount {
float: right;
color: #EE5D06;
font: bold italic 14px arial;
}

.views-text {
float: left;
font: bold 12px arial;
color: #333;
}

.views-icon{
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwUzqzJyrR8pmu4ZAq-oDt4RrO56HtO_NnZ_P1p-ctpCiENTs2d04Xopw8UrHJWNhTKrQkkC19o7BNKcnewHZixoKKFCRZcaEbpJkokwTXtrYeun13QmttHeq6W9nut7rINwUwl-VyBnwc/s1600/postviews.png') no-repeat left;
border: 0px;
display: block;
width: 16px;
height: 16px;
float: left;
padding: 0px 2px;
}

 কাস্টমাইজেশন:

           সাংখ্যিক গণনার পাঠ্যের রঙ পরিবর্তন করতে, #EE5D06 সম্পাদনা করুন

           প্লাগইন সারিবদ্ধকরণ পরিবর্তন করতে, ডান থেকে বামে পরিবর্তন করুন ।

      ৭.  </body>    এর জন্য পরবর্তী অনুসন্ধান করুন   এবং এর ঠিক উপরে নিম্নলিখিত জাভাস্ক্রিপ্ট কোডটি পেস্ট করুনঃ

<!-- Post Views Script by MBT -->
<script type='text/javascript'>
    window.setTimeout(function() {
        document.body.className = document.body.className.replace(&#39;loading&#39;, &#39;&#39;);
      }, 10);
  </script>
<script src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'/>
<script>
$.each($(&#39;a[name]&#39;), function(i, e) {
var elem = $(e).parent().find(&#39;#postviews&#39;).addClass(&#39;mbtloading&#39;);
var blogStats = new Firebase(&quot;https://mybloggertricks.firebaseio.com/pages/id/&quot; + $(e).attr(&#39;name&#39;));
blogStats.once(&#39;value&#39;, function(snapshot) {
var data = snapshot.val();
var isnew = false;
if(data == null) {
data= {};
data.value = 0;
data.url = window.location.href;
data.id = $(e).attr(&#39;name&#39;);
isnew = true;
}
elem.removeClass(&#39;mbtloading&#39;).text(data.value);
data.value++;
if(window.location.pathname!=&#39;/&#39;)
{
if(isnew)
blogStats.set(data);
else
blogStats.child(&#39;value&#39;).set(data.value);
}
});
});
</script>

আপনার ফায়ারবেস URL দিয়ে হাইলাইট করা বাদামী লাইনটি প্রতিস্থাপন করুন ( ধাপ#2 )। ফরোয়ার্ড স্ল্যাশ (/) এর যত্ন নিয়ে আপনি এটি সঠিকভাবে প্রতিস্থাপন করেছেন তা নিশ্চিত করুন

আপনি অবশ্যই এই পোস্টটি পড়ুন: আপনি ব্লগিং করে হাজার হাজার টাকা আয় করুন

      ৮. এখন একটি শেষ ধাপ। এই কোড খুঁজুনঃ

    <data:post.body/>

দ্রষ্টব্যঃ আপনি যদি একই কোডের একাধিক ঘটনা খুঁজে পান তবে প্রথম ঘটনাটি বেছে নিন।   

      ৯. এর ঠিক উপরে নিম্নলিখিত HTML পেস্ট করুন,

<!-- Post Views Counter by MBT-->
<div id='views-container'><span class='views-icon'/><div class='views-text'>Views:</div> <div class='mbtloading viewscount' id='postviews'/></div>
 

আপনি ভিউ প্রতিস্থাপন করতে পারেন: আপনার পছন্দের যেকোনো টেক্সট দিয়ে।

     ১০.  এখন চূড়ান্ত ধাপ , নিচের jquery লিঙ্কটি <head> এর ঠিক নিচে পেস্ট করুনঃ

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>

     ১১. সংরক্ষণ করুন এবং আপনি সব শেষ!

আপনার ব্লগে যান এবং F5 টিপুন (পৃষ্ঠা রিফ্রেশ করুন)  গণনাগুলি পুরোপুরি নাচতে দেখতে! :)

কপিরাইট

বিকাশকারী এবং বিশেষ ব্লগাররা তাদের পাঠক এবং বন্ধুদের সাথে এই প্লাগইনটি ভাগ করে নেওয়ার জন্য স্বাগত জানাই৷ বিনিময়ে শুধুমাত্র অনুগ্রহ হিসেবে MBT ব্লগে ক্রেডিট ফিরিয়ে দিন। এই স্ক্রিপ্টগুলি লিখতে এবং ডিবাগ করতে কয়েক ঘন্টা প্রচেষ্টা লাগে৷ এই প্লাগইনটি একটি ক্রিয়েটিভ কমন্স অ্যাট্রিবিউশন-অবাণিজ্যিক-নোডেরিভস 3.0 আনপোর্টেড লাইসেন্সের অধীনে আসে ।

সাহায্য দরকার?

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

এই প্লাগইন শুধুমাত্র একবার পৃষ্ঠাগুলি পরিদর্শন করা হলে ভিউ প্রদর্শন করবে। এটি আপনার Google বিশ্লেষণ পরিসংখ্যান ডেটার সাথে সিঙ্ক্রোনাইজ করা হয় না , তাই এটি শুধুমাত্র আপনার প্রকাশিত নতুন পোস্টগুলির জন্য সঠিক ভিউ প্রদর্শন করবে৷

আপনার কোন সাহায্য প্রয়োজন হলে আমাকে জানান. আমরা এই সপ্তাহে আরো কিছু আকর্ষণীয় স্ক্রিপ্ট আসছে. সাথে থাকুন! শান্তি ও আশীর্বাদ বন্ধুরা ।