Cara Membuat Tombol Social Share Tanpa Plugin

 Social media, Tutorial blogspot, Tutorial wordpress

membuat tombol social shareSalah satu cara untuk meningkatkan jumlah pengunjung blog adalah dengan membuat tombol social share, submit atau kirim artikel ke jejaring social atau social bookmarking site seperti facebook.com, twitter.com, digg.com, technoraty.com, stumbleupon.com atau yang lainnya.

Sebenarnya sih sudah banyak plugin yang dapat memberikan fasilitas tombol social share, contohnya plugin Sociable, share widget, share buttons dan lainnya. Namun Kali akan saya berikan bagaimana cara membuat tombol social shared tanpa menggunakan plugin.

Kalau temen-teman bertanya kenapa harus tanpa plugin, karena dengan menggunakan plugin akan menambah kinerja dari blog kita, sehingga loading blog ketika di buka akan semakin lambat jika menggunakan banyak plugins. Maka alternatifnya adalah tanpa plugins.

Hasil oprekan tombol social share

Lihat tampilan social media shared yang akan saya tawarkan ini. Menarik dan lucu kan…

facebook twitter digg technorati stumbleupon delicious reddit plusone

Cara membuat tombol social share di WordPress

Disini akan saya berikan cara membuat dan meletakkan tombol social share di akhir dari postingan, sehingga ketika pengunjung selesai membaca postingan anda otomatis dia akan melihat tombol-tombol yang telah anda buat. Maka kemungkinan share lebih banyak.

1. Buka file single.php, bisa dari dashboard atau Cpanel hosting

2. Cari kode seperti ini : <?php the_content(); ?>

3. Tambahkan kode dibawah ini, letakkan diatas atau dibawah kode <?php the_content(); ?>

<div style="color: #000000; background: #ffffff; border-bottom: 2px solid #B6B7B9; border-top: 2px solid #B6B7B9; padding: 4px 0px 1px 4px; margin: 0px 10px 2px 10px;">
<a title="Share To Facebook" href="http://www.facebook.com/share.php?u=&lt;?php the_permalink(); ?&gt;&amp;title=&lt;?php the_title(); ?&gt;" rel="nofollow" target="_blank"><img src="http://i1147.photobucket.com/albums/o553/jonobones/facebook.png" alt="facebook" /></a>
<a title="Tweet About It!" href="http://twitter.com/home?status=&lt;?php the_title(); ?&gt; - &lt;?php the_permalink(); ?&gt;" rel="nofollow" target="_blank"><img src="http://i1147.photobucket.com/albums/o553/jonobones/twitter.png" alt="twitter" /></a>
<a title="Submit to Digg" href="http://digg.com/submit?url=&lt;?php the_permalink(); ?&gt;&amp;title=&lt;?php the_title(); ?&gt;" rel="nofollow" target="_blank"><img src="http://i1147.photobucket.com/albums/o553/jonobones/digg.png" alt="digg" /></a>
<a title="Technorati" href="http://technorati.com/faves?add=&lt;?php the_permalink(); ?&gt;" rel="nofollow" target="_blank"><img src="http://i1147.photobucket.com/albums/o553/jonobones/technorati.png" alt="technorati" /></a>
<a title="Stumble It!" href="http://www.stumbleupon.com/submit?url=&lt;?php the_permalink(); ?&gt;&amp;title=&lt;?php the_title(); ?&gt;" rel="nofollow" target="_blank"><img src="http://i1147.photobucket.com/albums/o553/jonobones/stumbleupon.png" alt="stumbleupon" /></a>
<a title="Bookmark this post on delicious" onclick="window.open('http://delicious.com/save?v=5&amp;noui&amp;jump=close&amp;url=&lt;?php urlencode(the_permalink()); ?&gt;&amp;title=&lt;?php urlencode(the_title()); ?&gt;', 'delicious', 'toolbar=no,width=550,height=550'); return false;" href="http://delicious.com/save?url=&lt;?php urlencode(the_permalink()); ?&gt;&amp;title=&lt;?php urlencode(the_title()); ?&gt;" rel="nofollow"><img src="http://i1147.photobucket.com/albums/o553/jonobones/delicious.png" alt="delicious" /></a>
<a title="Submit to Reddit" href="http://reddit.com/submit?url=&lt;?php the_permalink(); ?&gt;" rel="nofollow" target="_blank"><img src="http://i1147.photobucket.com/albums/o553/jonobones/reddit.png" alt="reddit" /></a>
<a title="Google Bookmark" href="http://www.google.com/bookmarks/mark?op=edit&amp;bkmk=&lt;?php the_permalink(); ?&gt;&amp;title=&lt;?php the_title(); ?&gt;&amp;annotation=&lt;?php the_excerpt(); ?&gt;" rel="nofollow" target="_blank"><img src="http://i1147.photobucket.com/albums/o553/jonobones/plusone.png" alt="plusone" /></a>
</div>

 4. selesai, lihat hasilnya. Jika kurang puas bisa di modifikasi lagi. Gunakan modifikasi menggunakan CSS Box shadow agar tampilan tombol sharenya kelihatan lebih menarik.

Cara membuat tombol social share di blogger

Untuk pengguna blogger dapat menambahkan kode diatas dengan cara klik layout > add a gadget > HTML/Javascript > paste, dan seseuaikan letaknya.

Ketika tombol ditekan maka akan membuat tombol social share langsung meneruskan link postingan ke social share yang dituju, link yang akan di share ketika tombol ditekan berdasarkan halaman postingan yang sedang dibuka pengunjung.

Author: 

Saya adalah pemilik Kaplik.Com, Tujuan saya menulis adalah untuk berbagi pengetahuan maupun pengalaman kepada semua pembaca. Buat yang ingin tanya-tanya bisa langsung Contact ke Google +1, atau bisa melalui facebook. Thanks...

16 Responses

Leave a Reply