Cara Memasang Tombol Share Media Sosial di Bawah Posting Blog

Baca Juga

Cara Memasang Tombol Share Media Sosial di Bawah Posting Blog: Facebook, Twitter, Google+, Pinterest, LinkedIn, plus WhatsApp (WA)

TOMBOL bagi ke media sosial (social share button) adalah widget atau fitur yang dipasang di bawah posting blog untuk memudahkan kita dan pengunjung membagikan tulisan ke media sosial.

Widget ini membuat blog atau website menjadi ramah pengguna, juga mendukung pengoptimalan mesin pencari (SEO) yang dikenal dengan Social Media Optimization (SMO).

Tersebarnya postingan atau tulisan web/blog di media sosial akan makin meningkatkan popularitas dan peringkat di halaman hasil pencarian (SERP).

Tombol share media sosial di bawah ini bisa dibilang lengkap karena meliputi media sosial terpopuler saat ini -- Facebook, Twitter, Google+, Pinterest, LinkedIn, plus WhatsApp (WA).

Live Demo bisa Anda lihat di bagian bawah posting ini, bisa sekalian ngetes.

Template bawaan blogger sudah menyediakan widget media sosial share ini dengan tampilan standar nan "kurang keren".

Cara Memasang Tombol Share Media Sosial di Bawah Posting Blog

1. Klik "Template" > "Edit HTML"
2. Copy & Paste kode di bawah ini di atas kode <div id='related-posts'> atau di bawah <data:post.body/> yang kedua atau ketiga.

<!-- Scripts Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <b:if cond='data:post.isFirstPost'>
<!-- Facebook -->
<div id='fb-root'/>
<script>(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 = &quot;http://connect.facebook.net/en_US/all.js#xfbml=1&quot;;
fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));
</script>
<!-- Google +1 -->
<script type='text/javascript'>
(function() {
var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<!-- Twitter -->
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>
 </b:if>
<!-- Scripts End -->
<div class='horizontal-social-buttons' style='padding:5px;margin:5px'>
<!-- Twitter -->
<div style='float:left;margin-right:5px'>
<a class='twitter-share-button' data-count='horizontal' data-lang='en' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>
</div>
<!-- Google +1 -->
<div style='float:left;'>
<g:plusone annotation='bubble' expr:href='data:post.url' size='medium'/>
</div>
<!-- Facebook Like+Send -->
<div style='float:left;'>
<fb:like colorscheme='light' expr:href='data:post.url' font='' layout='button_count' send='true' show_faces='false'/>
</div>
<!-- Pinterest Start -->
<div id='pin-wrapper' style='float: left; margin:0px 0px 0px 18px; width:44px;'>
<a data-pin-config='beside' data-pin-do='buttonPin' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'><img src='//assets.pinterest.com/images/pidgets/pin_it_button.png'/></a>
<span style='margin-left:-44px;'><a data-pin-config='beside' data-pin-do='buttonBookmark' href='//pinterest.com/pin/create/button/' style='outline:none;border:none;'/></span>
</div>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<style type='text/css'>
#pin-wrapper &gt; a {background-image:none !important;}
</style>
<!-- Pinterest End --><div style='float:left;margin-left:7px'>
<!-- Whatsapp Share Buttons Start -->
<script type='text/javascript'>if(typeof wabtn4fg===&quot;undefined&quot;){wabtn4fg=1;h=document.head||document.getElementsByTagName(&quot;head&quot;)[0],s=document.createElement(&quot;script&quot;);s.type=&quot;text/javascript&quot;;s.src=&quot;//yourjavascript.com/09010225501/whatsappblogger.js&quot;;h.appendChild(s);}</script>
<a class='wa_btn wa_btn_s' expr:data-href='data:post.url' expr:data-text='data:post.title' href='whatsapp://send' style='display:none'>Share</a>
<!-- Whatsapp Share Buttons End -->
  </div>
<div style='float:left;margin-left:10px;'>
<script src='http://platform.linkedin.com/in.js' type='text/javascript'/><script data-counter='BUTTON-TYPE' expr:data-url='data:post.url' type='in/share'/>
</div>  
</div>
<div class='clear'/>
</b:if>
<!-- Scripts End -->

3. Save Template!


Kini  Tombol Share Media Sosial --Facebook, Twitter, Google+, Pinterest, LinkedIn, plus WhatsApp (WA)-- sudah terpasang di Bawah Posting Blog Anda.

Selain dengan menggunakan kode di atas, Anda juga bisa gunakan kode social share button dari AddThis. Wasalam. (http://www.romelteamedia.com).*