How to add social media share button widget to blogger

Also Read

How to add social media share button widget to blogger

কিভাবে ব্লগার পোস্টের নিচে Social Media Buttons যুক্ত করবেন

Social Media যেমন আপনার ব্লগে সৌন্দর্য বৃদ্ধি  করে তেমনই ভিজিটর আনতে এর তুলনা নাই, একটি ওয়েব সাইটের জন্য Social Media শেয়ার বাটন থাকা কতটা জরুরি এটা আপনাদের বোঝাতে হবেনা নিজেরাই জানেন যদি আপনার একটি ব্লগ সাইট থাকে সোসিয়াল মিডিয়া শেয়ার এর মাধ্যমে খুবই সহজে অনেক ভিজিটর পাওয়া যায় আজকে আমি শেয়ার করবো ব্লগারে পোস্টের নিচে কিভাবে Social Media Buttons যুক্ত করবেন যেটি শেয়ার করছি, সেটি সোসিয়াল মিডিয়াগুলির সর্বশেষ আপডেট ভার্সন থেকে নেওয়া  কথা না বাড়িয়ে দেখে আসি কিভাবে Social Media শেয়ার বাটন যুক্ত করবো না পারলে নিচের ভিডিও দেখেন। যুক্ত করার আগে gadget ফিচার গুলো দেখে নেই ১ ফেইসবুক ২ গুগল প্লাস +১ ৩ টুইটার ৪ লিঙ্কডইন ৫ পিন্টারেস্ট ৬ স্তুম্ব্লেউপন ৭ বুফার ৮ ভাইভার অটোমেটিক্যালি শো মোবাইল ড্রাইভ ৯ হোয়াটস্যাপ অটোমেটিক্যালি শো মোবাইল ড্রাইভ ১০ প্রিন্ট কিভাবে ব্লগার পোস্টের নিচে Social Media Buttons যুক্ত করবেন ১ প্রথমে আপনার ব্লগার একাউন্টে লগইন করুন এবং আপনার টেম্পলেটের Backup নিন । ২ এবার ব্লগার ড্যাশবোর্ড হতে Template > Edit Html এ ক্লিক করুন।
how-to-add-social-media-buttons-for-blogger

৩ কিবোর্ড হতে Ctrl+F চেপে  </body>  কোডটি সার্চ করুন এবং নিচের JavaScript কোড কপি করে </body> ট্যাগের উপরে পেষ্ট করুন।

<div id='fb-root'/>
<script>
//<![CDATA[
(function(d, s, id) {
  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.3";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>


বিশেষ দ্রষ্টব্যঃ উপরের JavaScript কোডটি ফেইসবুক এর সর্বশেষ আপডেট। আপনি যদি আগে কখনো আপনার Blogger Template-এ এটি যুক্ত করে থাকেন, তাহলে JavaScript টি আর যুক্ত করা লাগবে না। আর যদি না করে থাকেন তাহলে অবশ্যই এটি যুক্ত করবেন। কারণ এই JavaScript দিয়ে আপনি ফেইসবুক এর যাবতীয় Social Plugin আপনার ব্লগে ব্যবহার করতে পারবেন। অত্যান্ত গুরুত্বপূর্ণ একটি প্লাগিন এটি ।

৪ এখন  data:post.body  কোডটি সার্চ করুন। এই কোডটি হয়তো আপনার ব্লগার টেমপ্লেটের একাধিক জায়গায় দেখতে পারেন। আপনি সর্বশেষে যেটি পাবেন সেটিতে Try করে দেখতে পারেন। সর্বশেষটিতে না হলে ২য় টিতে Try করলে অবশ্যই হয়ে যাবে।

৫ এবার data:post.body এর ঠিক নিচে  নিচের কোডগুলি কপি করে পেষ্ট করুন।

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id="pro-share" style="margin-top: 10px; font-weight: bold;">
<div style='margin-right:10px;margin-top:4px; float: left; font-weight:bold;'>Share this Post</div>

<div style='padding-top:0px; margin-right: 5px; float: left;'> 
<div class="fb-send" expr:href="data:post.url"></div>
</div>

<div style='padding-top:0px; margin-right: 5px; float: left;'> 
<div class="fb-like" expr:href="data:post.url" data-layout="button" data-action="like" data-show-faces="false" data-share="false"></div>
</div>

<div style='padding-top:0px; margin-right: 5px; float: left;'> 
<div class="fb-share-button" expr:href="data:post.url" data-layout="button_count"></div>
</div>

<div style='padding-top:0px; margin-right: 5px; float: left;'>
<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
<script src='https://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>

<div style='margin-right:5px;margin-top: 0px; float: left;'>
<div class="g-plusone" expr:href="data:post.url" data-size="medium"></div>
</div>

<div style='margin-left:-30px;margin-top: 0px; float: left;'> 
<a class="addthis_counter addthis_pill_style"></a>
<script type="text/javascript" src="https://s7.addthis.com/js/250/addthis_widget.js"></script></div>
</div>
</b:if>

৬ এবং Save Template এ ক্লিক করুন। এবার ব্লগে গিয়ে দেখেন শেয়ার বাটন দেখাচ্ছে


উপরের লাল চিহ্নিত Share this Post হতে হেডিং পরিবর্তন করতে পারেন।
প্রত্যেকটি বাটন এর কোড এবং স্টাইল আলাদা আলাদা ভাবে ভাগ করে দেয়া আছে। ইচ্ছে করলে এখান থেকে বাটন রিমুভ করতে পারেন কিংবা স্টাইল পরিবর্তন করতে পারেন।

don't share any link and html code

Post a Comment (0)
Previous Post Next Post