Menulis

Cara Memasang Tombol Share Media Sosial di Bawah Posting Blog

Posted by Romel Tea ● Follow @romeltea ● Like Romeltea Media on Facebook

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

Author:

I am a Blogger, Media Practisioner, and Practical Communication Trainer. I share my own knowledges, experiences, and skills about practical communication - writing, speaking, blogging - and my hobbies and concerns. Visit my official website Romeltea.

Previous
« Prev Post
6 Komentar untuk "Cara Memasang Tombol Share Media Sosial di Bawah Posting Blog"

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

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

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

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

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

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