Apa itu Facebook Like Plugin?
Facebook like plugin adalah widget fanspage facebook yang sangat berguna untuk menunjukkan kepada para pengunjung tentang popularitas blog dan orang-orang yang menyukai blog kamu. Facebook memang sudah menawarkan facebook like plugin yang bisa kamu terapkan langsung di blog kamu, hanya saja default bawaan dari facebook terlihat kurang menarik.
Cara Memasang Facebook Like Plugin di Blog
Nah, pada tutorial kali ini sinahu coding akan membahas bagaimana cara custom facebook like plugin menggunakan CSS agar tampilan box nya kelihatan lebih menarik alias good looking.
Caranya sangat mudah, cukup dengan cara copy paste kode di bawah ini ke dalam widget HTML/Javascript. Jadi konco sinahu tidak perlu susah payah custom secara manual melalui situs developer facebook. Pastikan bahwa kamu sudah mempunyai halaman fanspage. Selanjutnya silahkan pilih salah satu custom facebook like plugin keren di bawah ini. Ganti yang berwarna biru dengan id fanspage kamu.
1. Simple White
<div style=".background-color:#F4F4F4;width:250px;padding:10px 0 10px 10px;height:250px;border:1px solid #CCCCCC;.height:250px;overflow:hidden;"><div style="height: 250px; overflow: hidden;">
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fsedotmp3&width=250&height=258&show_faces=true&header=false&stream=false&show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;" allowTransparency="true"></iframe>
</div>
</div>
2. With Background Picture
 |
<div style="background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicWKI6os31LhXlxSTy5KceuwsIx_nBMK0yVdbv43Kv1yXlj_TLiqIJrCav-VCKlzo_-K1qe0Yz1fOIxpKKql0vFsRs33kLz4v9V0WimYfi2sPiwNu2coZFOwZElubkqSal4KcPDrvl2ls/h120/0.png');overflow:hidden;border-radius: 110px;.height:250px;width: 238px;border-radius: 0px 13px 0px 0px;overflow: hidden;"><div style="height: 250px; overflow: hidden;">
<iframe src="http://www.facebook.com/plugins/likebox.phphref=http%3A%2F%2Fwww.facebook.com
%2Fsedotmp3&width=250&height=258&show_faces=true&header=false&stream=false&show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px;height:258px;" allowTransparency="true"></iframe>
</div>
</div>
Kamu bisa ganti background nya dengan mengganti yang berwarna merah dengan url gambar yang kamu suka.
<div style="-moz-box-shadow: 0px 15px 20px 0px #777777; -webkit-box-shadow: 0px 15px 20px 0px #777777; background-color: #f4f4f4; border-radius: 15px; border: 1px solid #CCCCCC; box-shadow: 0px 15px 20px 0px #777777; height: 270px; margin: 30px; padding: 10px 0 10px 10px; width: 250px;"><div style="height: 250px; overflow: hidden;">
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fsedotmp3&width=250&height=258&show_faces=true&header=false&stream=false&show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px;height:258px;" allowTransparency="true"></iframe>
</div>
</div>
4. Labstrike
<style type="text/css">.labstrikeFB {width: 250px;height: 250px;border-radius: 3px;position:relative;background-color:#f4f4f4;padding:5px 10px 15px 0}.labstrikeFB,.labstrikeFB:before,.labstrikeFB:after {background:#f4f4f4;border: 1px solid #ccc;}.labstrikeFB:before,.labstrikeFB:after {content:"";position:absolute;bottom: -3px;left:2px;right: 2px;height: 1px;border-top: none;}.labstrikeFB:after {left: 4px;right:4px;bottom:-5px;box-shadow: 0 0 2px #ccc;}</style><div class="labstrikeFB"><div style="height: 250px; overflow: hidden;">
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fsedotmp3&width=250&height=258&show_faces=true&header=false&stream=false&show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px;height:258px;" allowTransparency="true"></iframe>
</div>
</div>
5. Regular Border
<div style="background:#f4f4f4;width:250px;padding:0 0px;margin:10px 0;border:solid 6px #e9e8e8;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;"><div style="height: 250px; overflow: hidden;">
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fsedotmp3&width=250&height=258&show_faces=true&header=false&stream=false&show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;" allowTransparency="true"></iframe>
</div>
</div>
6. Simple Beauty Border
<div style="background-color:#D6E0FF;width:250px;padding:10px 0 10px 10px;height:250px;border:1px solid #66F;border-radius:10px;"><div style="height: 250px; overflow: hidden;">
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fsedotmp3&width=250&height=258&show_faces=true&header=false&stream=false&show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;" allowTransparency="true"></iframe>
</div>
</div>
7. Note Effect
<div style="background-color:#D6E0FF;width:250px;padding:10px 0 10px 10px;height:250px;border:1px solid #66F;border-radius:10px;box-shadow:4px 4px 0 rgba(0,0,255,0.45);"><div style="height: 250px; overflow: hidden;">
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fsedotmp3&width=250&height=258&show_faces=true&header=false&stream=false&show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;" allowTransparency="true"></iframe>
</div>
</div>
Itulah beberapa custom facebook like plugin yang bisa kamu pilih. Konco sinahu juga bisa bereksperimen dan berkreasi dengan mengganti angka-angka atau warna pada kode tersebut.
Sekian tutorial sederhana untuk memasang facebook like plugin keren di blog. Kalau konco sinahu mengalami kesulitan bisa kita diskusikan bersama di kolom komentar.
0 Komentar untuk "Custom Facebook Like Plugin Keren"