August 16, 2016

Cara Memasang Tombol Share Media Sosial di Bawah Posting Blog

By Romeltea | Published: August 16, 2016

Cara Memasang Tombol Share Media Sosial di Bawah Posting Blog
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).*

Previous
« Prev Post
Author Image

Romeltea
Romeltea adalah onair dan online name Asep Syamsul M. Romli aka Kang Romel. Praktisi Media, Blogger, Trainer Komunikasi from Bandung, Indonesia. Follow me: facebook twitter instagram linkedin youtube

Recommended Posts

Related Posts

Show comments
Hide comments

17 comments on Cara Memasang Tombol Share Media Sosial di Bawah Posting Blog

  1. wah mantaep..makasih ilmunya om..salam berbagi..

    ReplyDelete
  2. min,, ane dah pake cara ini, tapi kenapa ya kalo ane like postingan blog ane itu disuruh confirm dulu, sedangkan di blog ini langsung ngelike tanpa disuruh confirm..

    menunggu jawaban....

    ReplyDelete
    Replies
    1. Coba pasang ini di bawah kode <head> :
      <meta content='APP-FB-ANDA' property='fb:admins'/>
      <meta content='PROFIL-ID-FB-ANDA' property='fb:profile_id'/>

      Delete
    2. Eh, yang ini:
      <meta content='APP-ID-FB-ANDA' property='fb:app_id'/>
      <meta content='PROFIL-FB-ID-ANDA' property='fb:admins'/>

      Delete
  3. wah..alhamdulillah kak..ketemu juga..makasih berbaginya

    ReplyDelete
  4. Wah... mantap gan infonya... sekali coba langsung bisa... soalnya gak pake css... hee makasih ya gan infonya!!!

    ReplyDelete
  5. min.. tolongin min ga jadi nih hahaha, ga nongol di blognya. yang dari addthis juga gamau nongol -_-

    ReplyDelete
    Replies
    1. sila tanya ke desainer templatenya langsung :)

      Delete
  6. Scripnya banyak sekali...
    Kayanya rumit, yah...?

    ReplyDelete
  7. Code diatas tak dapat diselect dan dicopy. Please help.

    ReplyDelete
    Replies
    1. Terima kasih banyak atas perhatiannya.

      Delete
  8. Tombol WA nya kok gak ada muncul?

    ReplyDelete
  9. oke gan berhasil, terima kasih

    ReplyDelete
  10. kode blog biasa untuk share via email gimana ya gan

    ReplyDelete

Contact Form

Name

Email *

Message *