Tombol share di bawah postingan blog wajib dipasang agar memudahkan admin dan pengunjung membagikan postingan ke akun media sosial Facebook, Twitter, Pinterest, LinkedIn, dan WhatsApp (WA).
Desain Social Share Button sangat banyak, termasuk tampilan dari Blogger dan WordPress (menggunakan plugin Jetpack).
Dari sekian banyak tombol share, saya suka yang berikut ini. Tampilannya simple tapi bagus banget. Facebook dan Twitter dikhususkan, karena memang kedua medsos itu paling banyak mendatangkan pengunjung.
Cara Membuat Tombol Share di Bawah Postingan Blogger
Berikut ini cara memasangnya di template blog dengan posisi di bawah postingan blog. Karena ikon medsosnya menggunakan font awesome, maka pastikan ada link ke font awesome seperti ini di template blog Anda:
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
Jika belum, ada pasang di atas kode </head>
1. Klik Tema > Edit HTML
2. Copas kode CSS Tombol Berbagi Posting ke Media Sosial berikut ini di atas kode </head>
<b:if cond='data:view.isPost'>
<style>
.share{display:block;padding:0;margin:10px 0;}
.post-share,ul.share-links{position:relative;margin:0;padding:0}
.post-share{overflow:hidden;line-height:0;margin:0}.share-links li a,.share-links li a:before{float:left;text-align:center;line-height:32px}.share-links li{width:32px;float:left;box-sizing:border-box;margin:0 5px 0 0;list-style:none}.share-links li.facebook,.share-links li.gplus,.share-links li.twitter{width:20%}.share-links li a{display:inline-block;cursor:pointer;width:100%;height:32px;color:#fff;font-weight:400;font-size:13px;box-sizing:border-box;opacity:1;margin:0;padding:0;transition:all .17s ease}.is-mobile li.whatsapp-desktop,.share-links li.whatsapp-mobile{display:none}.is-mobile li.whatsapp-mobile{display:inline-block}.share-links li a:before{display:block;width:32px;background-color:rgba(255,255,255,.07);font-size:15px}.share-links li a:hover{opacity:.8}.social a:before{display:inline-block;font-family:FontAwesome;font-style:normal;font-weight:400}.social .facebook a:before{content:"\f09a"}.social .twitter a:before{content:"\f099"}.social .gplus a:before{content:"\f0d5"}.social .linkedin a:before{content:"\f0e1"}.social .pinterest a:before{content:"\f0d2"}.social .whatsapp a:before{content:"\f232"}.social .external-link a:before{content:"\f35d"}.social-color .facebook a{background-color:#3b5999}.social-color .twitter a{background-color:#00acee}.social-color .gplus a{background-color:#db4a39}.social-color .pinterest a{background-color:#ca2127}.social-color .linkedin a{background-color:#0077b5}.social-color .whatsapp a{background-color:#3fbb50}.social-color .external-link a{background-color:#111}.social-text .facebook a:after{content:"Facebook"}.social-text .twitter a:after{content:"Twitter"}.social-text .gplus a:after{content:"Google Plus"}.social-text .linkedin a:after{content:"LinkedIn"}.social-text .pinterest a:after{content:"Pinterest"}.social-text .whatsapp a:after{content:"Whatsapp"}.social-text .external-link a:after{content:"WebSite"}@media screen and (max-width:540px){.share-links li a span{display:none}.share-links li.facebook,.share-links li.gplus,.share-links li.twitter{width:30px}
}
</style>
</b:if>
3. Copas HTML Tombol Berbagi Posting ke Media Sosial berikut ini di bawah kode <data:post.body/> yang kedua atau ketiga, atau di atas kode <div class=’post-footer’>
<b:if cond='data:view.isPost'>
<div class='share'>
<div class='post-share'>
<ul class='share-links social social-color'>
<b:class cond='data:blog.isMobileRequest' name='is-mobile'/>
<li class='facebook'><a class='facebook' expr:href='"https://www.facebook.com/sharer.php?u=" + data:post.url' onclick='window.open(this.href, 'windowName', 'width=550, height=650, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow'><span>Facebook</span></a></li>
<li class='twitter'><a class='twitter' expr:href='"https://twitter.com/share?url=" + data:post.url + "&text=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=550, height=450, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow'><span>Twitter</span></a></li>
<li class='pinterest'><a class='pinterest' expr:href='"https://www.pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.featuredImage + "&description=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=735, height=750, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow'/></li>
<li class='linkedin'><a class='linkedin' expr:href='"https://www.linkedin.com/shareArticle?url=" + data:post.url' onclick='window.open(this.href, 'windowName', 'width=950, height=650, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow'/></li>
<li class='whatsapp whatsapp-desktop'><a class='whatsapp' expr:href='"https://web.whatsapp.com/send?text=" + data:post.title + " | " + data:post.url' onclick='window.open(this.href, 'windowName', 'width=900, height=550, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow'/></li>
<li class='whatsapp whatsapp-mobile'><a class='whatsapp' expr:href='"https://api.whatsapp.com/send?text=" + data:post.title + " | " + data:post.url' rel='nofollow' target='_blank'/></li>
</ul>
</div>
<div class='clear'/>
</div>
</b:if>
4. Save!
Simpan template!
Kini Tombol Share ke Media Sosial sudah muncul di bawah postingan blog Anda.
Tombol Share di Blog WP
Untuk WordPress bisa menggunakan plugin. Saya sendiri menggunakan Share Buttons by ShareThis di blog ini.
