Cara membuat Like Facebook Pop Up di halaman Blog sobat
Kali ini saya akan berbagi trik bagaimana
caranya supaya like facebook bisa pop up di halaman blog sobat dengan cara yang mudah dan simple, karena cara mudah dan simple itu adalah cara gue...hehe... :)
Dan sebagai contohnya bisa sobat lihat di bawah ini :
Berikut langkah-langkah yang harus sobat ikuti :- Log in / masuk ke dashbor sobat
- Pilih tata letak >> add widget >>
- Pilih add HTML / JavaScript
- Masukkan Srcipt code di bawah ini ke dalam kolom kosong dalam HTML/JavaScript
<style>
/*
ColorBox Core Style:
Ini kode css biasa silahkan ubah jika anda mau merubah desain tampilannya @ http://yoshiwafa.blogspot.com.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
/*
User Style:
Change the following styles to modify the appearance of ColorBox. They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000;opacity:0.5 !important;}
#colorbox{
box-shadow:0 0 15px rgba(0,0,0,0.4);
-moz-box-shadow:0 0 15px rgba(0,0,0,0.4);
-webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);
}
#cboxTopLeft{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5R_Dkili7e5tKmDfooVbtRpelERTZ3-u5JMm1aOhhckUXLo-vublUJlgHGqRCQwAzVgHOOKUPese8ymM8Mq5iQuIrO-dzLfGQ_YLGKctMbTIOZxEMObl6wIqcPr9DWSgjqso78otL03a8/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHySwLTlUcwwHY4F0IxhzMGkqPS7_ZOtiR1Raj7quEiv2Mif5kBjf0IbNmjnAkYlvzDuAJR4-uF2Eg0hBiMFFfo5CQd9IDDN0uHIVO7AnA2XuEJp86Lp_VDS_AnIDZFZY8l4J2PsF4y0pZ/s1600/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5R_Dkili7e5tKmDfooVbtRpelERTZ3-u5JMm1aOhhckUXLo-vublUJlgHGqRCQwAzVgHOOKUPese8ymM8Mq5iQuIrO-dzLfGQ_YLGKctMbTIOZxEMObl6wIqcPr9DWSgjqso78otL03a8/s1600/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5R_Dkili7e5tKmDfooVbtRpelERTZ3-u5JMm1aOhhckUXLo-vublUJlgHGqRCQwAzVgHOOKUPese8ymM8Mq5iQuIrO-dzLfGQ_YLGKctMbTIOZxEMObl6wIqcPr9DWSgjqso78otL03a8/s1600/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHySwLTlUcwwHY4F0IxhzMGkqPS7_ZOtiR1Raj7quEiv2Mif5kBjf0IbNmjnAkYlvzDuAJR4-uF2Eg0hBiMFFfo5CQd9IDDN0uHIVO7AnA2XuEJp86Lp_VDS_AnIDZFZY8l4J2PsF4y0pZ/s1600/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5R_Dkili7e5tKmDfooVbtRpelERTZ3-u5JMm1aOhhckUXLo-vublUJlgHGqRCQwAzVgHOOKUPese8ymM8Mq5iQuIrO-dzLfGQ_YLGKctMbTIOZxEMObl6wIqcPr9DWSgjqso78otL03a8/s1600/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5R_Dkili7e5tKmDfooVbtRpelERTZ3-u5JMm1aOhhckUXLo-vublUJlgHGqRCQwAzVgHOOKUPese8ymM8Mq5iQuIrO-dzLfGQ_YLGKctMbTIOZxEMObl6wIqcPr9DWSgjqso78otL03a8/s1600/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5R_Dkili7e5tKmDfooVbtRpelERTZ3-u5JMm1aOhhckUXLo-vublUJlgHGqRCQwAzVgHOOKUPese8ymM8Mq5iQuIrO-dzLfGQ_YLGKctMbTIOZxEMObl6wIqcPr9DWSgjqso78otL03a8/s1600/controls.png) repeat-y -211px 0;}
#cboxContent{background:#fff; overflow:visible;}
#cboxLoadedContent{margin-bottom:5px;}
#cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqd3lT8roxBFASCQU9UM8-cO8bqIq2H1WOuhvLMS2mNVMQu7FWSENdi6TN_C-5KtsWArU3K8kIZpBCdU27nLizPYmdpRKYbJcXoje4UpCt9omvhjlaKcjPYYKGJvLNdPuAtl_dzEcQyrgo/s1600/loading-background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG-xY226GyyQhMd8cl9k2E39SVAAuMN3Sg80WSKVyn-jz0Q0miL5ZoOkX6gEXPBu2diKCVExR5LOXSpPW9gNnIryVx2mU505g9eU2uzOQsrEu7Bl7hWIxw4fKODtduZYL40t5k88xG57tl/s1600/loading.gif) no-repeat center center;}
#cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
#cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5R_Dkili7e5tKmDfooVbtRpelERTZ3-u5JMm1aOhhckUXLo-vublUJlgHGqRCQwAzVgHOOKUPese8ymM8Mq5iQuIrO-dzLfGQ_YLGKctMbTIOZxEMObl6wIqcPr9DWSgjqso78otL03a8/s1600/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
#cboxPrevious{left:0px; background-position: -51px -25px;}
#cboxPrevious.hover{background-position:-51px 0px;}
#cboxNext{left:27px; background-position:-75px -25px;}
#cboxNext.hover{background-position:-75px 0px;}
#cboxClose{right:0; background-position:-100px -25px;}
#cboxClose.hover{background-position:-100px 0px;}
.cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
.cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}
.cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
.cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}
/*-----------------------------------------------------------------------------------*/
/* Facebook Likebox popup For Blogger
/*-----------------------------------------------------------------------------------*/
#subscribe {
font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;
}
#subscribe a,
#subscribe a:hover,
#subscribe a:visited {
text-decoration:none;
}
.box-title {
color: #3B5998;
font-size: 20px !important;
font-weight: bold;
margin: 10px 0;
border:1px solid #ddd;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
box-shadow: 5px 5px 5px #CCCCCC;
padding:10px;
line-height:25px; font-family:arial !important;
}
.box-tagline {
color: #999;
margin: 0;
text-align: center;
}
#subs-container {
padding: 35px 0 30px 0;
position: relative;
}
a:link, a:visited {
border:none;
}
.demo {
display:none;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script>
<script src="http://yourjavascript.com/11215013191/jquery.colorbox-min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var fifteenDays = 1000*60*60*24*30;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"400px", inline:true, href:"#subscribe"});
}
});
</script>
<!-- This contains the hidden content for inline calls -->
<div style='display:none'>
<div id='subscribe' style='padding:10px; background:#fff;'>
<h3 class="box-title">Di Like ya Sahabat... Terima Kasih Banyak :)<center><p style="line-height:3px;" ></p></center></h3>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fkumpulanchordgitar&width=300&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false&height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>
</center>
<p style=" float:right; margin-right:35px; font-size:9px;" >Powered By | <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://yoshiwafa.blogspot.com/2012/12/cara-membuat-like-facebook-pop-up-di.html">Blog Gadgets</a> Via <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://yoshiwafa.blogspot.com/2012/12/cara-membuat-like-facebook-pop-up-di.html">Blogger Widgets</a></p>
</div>
</div>
Catatan :
- Ganti tulisan kumpulanchordgitar dengan ID fan page FB sobat
- Jika Sobat Sudah sudah Punya script jQuery di Dalam template Sobat,Hapus<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script>warna Merah
- Pasang Juga LikeBox seperti di bawah ini di Blog sobat atau Like box yang versi kecil juga tidak masalah.
Sekian tentang cara membuat Like Facebook pop up di halaman blog sobat cukup mudah bukan................ semoga bermanfaat.Update :Berhubung banyak sekali yang tanya jadi saya update dan akan saya jelaskan kembali secara lebih terperinci tentang
Facebook like pop up yang satu ini agar komentarnya bukan merupakan keluhan tidak bisa lagi, Facebook pop up di atas masih bisa 100% saya coba juga bisa dan tidak ada keluhan tidak ada kerusakan pada script, hanya saja memang setingan dari Facebook pop up di atas adalah hanya keluar satu kali dalam satu browser.
Mungkin sobat banyak yang bingung ya kenapa pada awalnya Facebook bisa pop up atau keluar kok selanjutnya tidak keluar lagi?? mengapa demikian? itu karena memang saya seting sedemikian agar tidak muncul kembali pada browser yang sama, apa itu browser? jika ada yang bertanya seperti itu sungguh terlalu, singkatnya contoh browser adalah seperti Mozilla Firefox, Google Chrome, Opera Mini, Internet Explorer dan lain sebagainya, itu adalah contoh dari yang namanya Browser.
Kenapa harus saya seting demikian? itu supaya pengunjung tidak merasa risih karena terlalu seringnya
Facebook Pop Up, itu namanya pemaksaan untuk meminta Like Facebook jika muncul terus menerus di setiap membuaka artikel dan saya pribadi kurang begitu suka dengan cara yang seperti itu, saya meminta hanya sekali jika tidak di beri maka saya akan pergi dan saya tidak mau mengulang permintaan yang sama untuk kedua kalinya.
Yang saya minta hanya keikhlasan saja, oke cukup curhatnya. Seperti yang sudah saya katakan di atas, Facebook dengan setingan Script di atas adalah hanya keluar satu kali (1 kali) pada satu browser, karena saya memanfaatkan Cookie dan Cache agar tidak muncul untuk kedua kalinya terkecuali jika Browser sobat sekalian Cookie dan Cache nya di bersihkan. Jika bertanya apa itu Cookie dan Cache ?? silahkan di cari di Wikipedia juga ada atau di serach engine google juga bisa.
Untuk sebuah percobaan, sobat dapat mencobanya pada 2 sampai 4 browser, misal sobat memiliki Mozilla Firefox, Google Chrome, Opera Mini, Internet Explorer. coba keluar atau tidak jika browser berbeda?? atau begini, setelah
Facebook pop up satu kali, kemudian sobat hapus Cookie dan Cache yang ada pada browser milik sobat, terus buka kembali blog atau website sobat dan lihat, keluar atau tidak???
Dan untuk Facebook pages yang baru, karena Html nya tidak se simple Facebook page yang lama dan inilah perbedaannya :
Fanpage lama : https://www.facebook.com/kumpulanchordgitar
Fanpage baru : https://www.facebook.com/pages/Aneka-Ragam-Wisata-Indonesia/110067839185863
Saya kira cukup jelas bukan perbedaannya?? yang lama lebih singkat daripada yang baru, dan jika Fanpage facebook milik sobat adalah yang baru maka jadinya akan seperti ini :
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FAneka-Ragam-Wisata-Indonesia%2F110067839185863&width=300&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false&height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>
Di atas dapat sobat lihat bukan perbedaannya? perbedaannya adalah garis miring (/) pada tulisan
/pages/Aneka-Ragam-Wisata-Indonesia/110067839185863di ubah menjadi
%2F sehingga menjadi seperti ini : %2Fpages%2FAneka-Ragam-Wisata-Indonesia%2F110067839185863Apakah sudah cukup jelas penjelasan tambahan saya? jika masih kurang jelas bisa bertanya kembali.