Cara Memasang Tombol Share Media Sosial di Bawah Posting Blog

Follow @romel_tea
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).*

Thanks for reading Cara Memasang Tombol Share Media Sosial di Bawah Posting Blog | Tags:

Next Article
« Prev Post
Previous Article
Next Post »

Related Posts

Your Comments

15 komentar

Tulis komentar
Insan Kamil
AUTHOR
August 22, 2016 delete

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

Reply
avatar
DW Made
AUTHOR
September 06, 2016 delete

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....

Reply
avatar
Romel Tea
AUTHOR
September 06, 2016 delete

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'/>

Reply
avatar
Romel Tea
AUTHOR
September 06, 2016 delete

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

Reply
avatar
Insan Kamil
AUTHOR
September 22, 2016 delete

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

Reply
avatar
March 09, 2017 delete

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

Reply
avatar
April 04, 2017 delete

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

Reply
avatar
Romel Tea
AUTHOR
April 04, 2017 delete

sila tanya ke desainer templatenya langsung :)

Reply
avatar
Sri Kuncoro
AUTHOR
October 28, 2017 delete

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

Reply
avatar
Ummu Naufal
AUTHOR
January 09, 2018 delete

Code diatas tak dapat diselect dan dicopy. Please help.

Reply
avatar
Romel Tea
AUTHOR
January 09, 2018 delete

Sudah, silakan....

Reply
avatar
Ummu Naufal
AUTHOR
January 15, 2018 delete

Terima kasih banyak atas perhatiannya.

Reply
avatar
lima klik
AUTHOR
January 23, 2018 delete

Tombol WA nya kok gak ada muncul?

Reply
avatar
March 02, 2018 delete

oke gan berhasil, terima kasih

Reply
avatar

You comment, I'll visit back your blog. If you have one. Komentar SPAM dan LINK AKTIF tidak akan muncul.