May 19, 2015

ব্লগ পোষ্টের নিচে যুক্ত করুন 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='http://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="http://s7.addthis.com/js/250/addthis_widget.js"></script></div>
</div>
</b:if>
  • সবশেষে Save Template এ ক্লিক করুন। That's All.

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

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

and Share on
পূর্ববর্তী পোষ্ট
পরবর্তী পোষ্ট

6 টি মন্তব্য: Post Yours! Read Comment Policy ▼
লক্ষ্য করুনঃ
পোষ্টের সাথে সম্পৃক্ত নয় এমন কোন কমেন্ট করা যাবে না। কোন কারণ ব্যতীত আপনার ব্লগের লিংক শেয়ার করতে যাবেন না। সবসময় গঠনমূলক মন্তব্য প্রদানের চেষ্টা করবেন। আমরা সবার মতামত সমানভাবে মূল্যায়ন করি এবং যথাসময়ে প্রতি উত্তর দেয়ার চেষ্টা করি।

  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

 
Subscribe for all Updates

Subscribe Now

কপিরাইট © 2015- প্রযুক্তি ডট কম ™, সর্বস্বত্ব সংরক্ষিত

Powered by: