ব্লগ পোষ্টের নিচে যুক্ত করুন Social Media Sharing Buttons

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

Social Media Sharing Buttons
গত পোষ্টে আমি আপনাদের সাথে শেয়ার করেছিলাম কিভাবে ব্লগারে Floating Social Media Sharing Buttons যুক্ত করবেন। অবশ্য এর আগেও আমরা ঠিক একই রকম একটি পোষ্ট শেয়ার করেছিলাম। আসলে সোসিয়াল মিডিয়া শেয়ার এর মাধ্যমে খুবই সহজে অনেক ভিজিটর পাওয়া যায়, এই জন্য সোসিয়াল মিডিয়া নিয়ে বার বার পোষ্ট করতে আমার খুবাই ভাল লাগে। আজকে যেটি আপনার সাথে শেয়ার করবো এটি খুবই সুন্দর এবং সর্বশেষ আপডেট কোড দিয়ে সাজানো। আমার মনে হয় এরকম কাষ্টমাইজ করার মত সোসিয়াল মিডিয়ার শেয়ার বাটন আর কোথায় পাবেন না। আর যদিও পেয়ে থাকেন সেটি হবে বেশ পুরনো। আমি যেটি শেয়ার করছি, সেটি সোসিয়াল মিডিয়াগুলির সর্বশেষ আপডেট ভার্সন থেকে নেওয়া।
Social Media Sharing Buttons
উপরের চিত্রে এই সোসিয়াল মিডিয়া বাটনগুলির ডেমো দেখতে পাচ্ছেন। আপনি যদি এর লাইভ ডেমো দেখতে চান তাহলে আমার ব্লগের পোষ্টের নিচের দিকে গেলে দেখতে পাবেন। উপরের ছবিতে দেখতে পাচ্ছেন যে, এখানে একসাথে Facebook Send Button, Like Button, Share Button, Twitter Share Button, Google+ Share Button এবং Add This এর আরও প্রায় ৩০০ টি শেয়ারিং বাটন রয়েছে। আপনি ইচ্ছে করলে এখানে আরও অনেক বাটন যুক্ত করতে পারবেন, আর আপনার যদি কোন বাটন পছন্দ না হয়, তাহলে এখান থেকে Remove করতেও পারবেন। এটি আপনার ব্লগ পোষ্টে নিচে যুক্ত করার ফলে ভিজিটর আপনার পোষ্টটি পড়ে যদি ভাল মনে করেন, তাহলে খুব সহজে বিভিন্ন সোসিয়াল মিডিয়া সাইটে শেয়ার করতে পারবেন।

কিভাবে ব্লগে যুক্ত করতে হয়?

  • প্রথমে আপনার ব্লগার একাউন্টে লগইন করুন।
  • তারপর ব্লগার ড্যাশবোর্ড হতে Template > Edit Html এ ক্লিক করুন।
Blogger Template Editor
  • এরপর কিবোর্ড হতে 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 করলে অবশ্যই হয়ে যাবে।
  • উপরের অংশটির ঠিক নিচে এই কোডগুলি কপি করে পেষ্ট করুন।
<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 এ ক্লিক করুন। That's All.

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

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

COMMENTS

BLOGGER: 6
  1. Am sorry but this didn't work. Please update the codes there are mistype codes. Thank you!

    ReplyDelete
    Replies
    1. I have tested again now. It's working perfectly. I think you can't understand my blog language. Thank you...

      Delete
  2. কাজ করে না,আমি অনেক চেষ্টা করছি...কিন্তু Code এ প্রবলেম আছে...ঠিক করেন।

    ReplyDelete
    Replies
    1. আপনি কোথাও ভূল করছেন! আমি আবারও পরীক্ষা করে দেখেছি। সব কিছুই ঠিক আছে। আমার মনেহয় আপনি ঠিক জায়গামত কোড বসাতে পারছেন না। ধন্যবাদ...

      Delete
  3. ভাই এটি ভালো কাজ করেছে

    ReplyDelete

Name

Adsense,16,Affiliate,1,Android Tricks,1,Blog Design,35,Blogger Theme,9,Blogger Widgets,25,Create Blog,3,Earnings,19,Mim,5,Pro News,8,Responsive,5,SEO,55,Social Media,2,Tech,1,WordPress,3,YouTube,3,
ltr
item
ব্লগার বাংলাদেশ: ব্লগ পোষ্টের নিচে যুক্ত করুন Social Media Sharing Buttons
ব্লগ পোষ্টের নিচে যুক্ত করুন Social Media Sharing Buttons
আজকে যেটি আপনার সাথে শেয়ার করবো এটি খুবই সুন্দর এবং সর্বশেষ আপডেট কোড দিয়ে সাজানো। আমার মনে হয় এরকম কাষ্টমাইজ করার মত সোসিয়াল মিডিয়ার শেয়ার বাটন আর কোথায় পাবেন না।
https://3.bp.blogspot.com/-5Ks5ihWwBm8/VVrbBYAIMKI/AAAAAAAAEcU/v59Lsb1Ufns/s1600/Social%2BMedia%2BSharing%2BButtons.png
https://3.bp.blogspot.com/-5Ks5ihWwBm8/VVrbBYAIMKI/AAAAAAAAEcU/v59Lsb1Ufns/s72-c/Social%2BMedia%2BSharing%2BButtons.png
ব্লগার বাংলাদেশ
https://www.bloggerbangladesh.com/2015/05/social-media-sharing-buttons-for-blogger.html
https://www.bloggerbangladesh.com/
https://www.bloggerbangladesh.com/
https://www.bloggerbangladesh.com/2015/05/social-media-sharing-buttons-for-blogger.html
true
1297988252866731047
UTF-8
Loaded All Posts Not found any posts VIEW ALL বিস্তারিত পড়ুন Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy