Menu

Detail Artikel

Home/ Web Design/Detail Artikel

Membuat Pop Up Facebook Like Untuk Website/Blog

saat ini pengguna facebook sudah sangat banyak sekali, bahkan mungkin hampir semua orang sudah memiliki akun facebook. dan hampir setiap hari ada jutaan orang login dan aktif pada social media Facebook. bagi para blogger agar website/blognya semakin eksis alangkah baiknya jika ditambahkan Facebook Page Like. jika kita hanya memasang widget facebook saja mungkin hasilnya kurang Maksimal. mungkin Pop Up Facebook Like ini dapat membantu dan meningkatkan Like pada Page Facebook anda.
untuk menambahkan Pop Up Facebook caranya cukup Mudah, silahkan Copy Script dibawah ini.

	<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<style type="text/css">
#fbox-background{ display:none;background:rgba(0,0,0,0.8); width:100%;height:100%;position:fixed;top:0;left:0; z-index:99999 } #fbox-close{ width:100%;height:100%; } #fbox-display{ background:#eaeaea;border:5px solid #828282;width:340px; height:230px;position:absolute;top:32%;left:37%;-webkit-border-radius:5px; -moz-border-radius:5px;border-radius:5px } #fbox-button{ float:right;cursor:pointer;position:absolute;right:0;top:0 } #fbox-button:before{ content:"CLOSE";padding:5px 8px;background:#828282;color:#eaeaea; font-weight:700;font-size:10px;font-family:Tahoma } #fbox-link,#fbox-link a.visited,#fbox-link a,#fbox-link a:hover{ color:#aaa;font-size:9px;text-decoration:none;text-align:center;padding:5px }
</style>
<script type='text/javascript'>
//<![CDATA[
jQuery.cookie=function(a,b,c){if(arguments.length>1&&"[object Object]"!==String(b)){if(c=jQuery.extend({},c),null!==b&&void 0!==b||(c.expires=-1),"number"==typeof c.expires){var d=c.expires,e=c.expires=new Date;e.setDate(e.getDate()+d)}return b=String(b),document.cookie=[encodeURIComponent(a),"=",c.raw?b:encodeURIComponent(b),c.expires?"; expires="+c.expires.toUTCString():"",c.path?"; path="+c.path:"",c.domain?"; domain="+c.domain:"",c.secure?"; secure":""].join("")}c=b||{};var f,g=c.raw?function(a){return a}:decodeURIComponent;return(f=new RegExp("(?:^|; )"+encodeURIComponent(a)+"=([^;]*)").exec(document.cookie))?g(f[1]):null};
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_facebook_box') != 'yes'){
$('#fbox-background').delay(5000).fadeIn('medium');
$('#fbox-button, #fbox-close').click(function(){
$('#fbox-background').stop().fadeOut('medium');
});
}
//Baris ini jika dihilangkan, maka popup facebook akan muncul terus pada saat halaman dibuka
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='fbox-background'>
<div id='fbox-close'></div>
<div id='fbox-display'>
<div id='fbox-button'></div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com/cvfrsystem&width=339&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
style='border: none; overflow: hidden; background: #fff; width: 339px; height: 200px;'></iframe>
<div id="fbox-link">Powered by <a style="padding-left: 0px;" href="http://fr-system.co.id/artikel-Membuat_Pop_Up_Facebook_Like_Untuk_WebsiteBlog.frsystem" rel="nofollow">FR-SYSTEM</a></div>
</div>
</div>
Penjelasan
  • $('#fbox-background').delay(5000).fadeIn('medium'); = pada baris ini silahkan ganti waktu delai setelah load halaman selesai. nilai 5000 artinya 5 Detik, silahkan anda ubah sesuai dengan yang anda inginkan
  • $.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 }); = pada baris ini membuat pop Up Facebook hanya muncul hanya sekali, tidak muncul di setiap pengunjung buka banyak halaman di blog/website kita, tujuannya agar pengunjung juga tetap merasa tidak terganggu dengan adanya pop up, atau jika Pop Up facebook mau dibuat selalu keluar pada saat halaman selesai dimuat, maka hapus baris ini
  • https://www.facebook.com/cvfrsystem = Bagian ini silahkan anda ganti dengan Alamat URL Facebook Page anda

Peletakan Script

Untuk Blogspot
  1. SIlahkan anda login ke Akun "Blogspot", selanjutnya klik dan masuk ke "Layout", jika sudah selanjutnya klik "Add a Gatget"
  2. Selanjutnya muncul jendela baru, silahkan anda cari Gatget "HTML/Javascript"
  3. Jika Sudah Muncul Kolom HTML/Javascript. selanjutnya paste Script diatas ke dalam Kolom tersebut. jika sudah Klik SAVE
Untuk Wordpress
  1. Silahkan Login ke Halaman Admin Wordpress Anda
  2. Selanjutnya Masuk Ke Appearance dan Pilih Widgets
  3. selanjutnya Pilih Widget "TEXT"
  4. Lalu Paste Code Diatas di dalam Kolom TEXT
  5. Dan Terakhir silahkan Klik Save
Untuk Website berbentuk HTML/PHP/ASP/JSP
silahkan Paste Code diatas sesuai dengan yang anda inginkan, yang penting sisipkan Script tersebut diantara perintah <body> dan </body>

Sumber : http://helplogger.blogspot.co.id/2014/12/facebook-popup-like-box-blogger-widget.html

Artikel Lainnya

Komentar Anda

Xxelw

0 Komentar

komentar masih kosong

Produk Kami

Popular Post

Facebook Page

Statistik Pengunjung

  • Hari ini
    :
    271
  • Kemarin
    :
    921
  • Bulan ini
    :
    10879
  • Tahun ini
    :
    58364
  • Total
    :
    2272465
  • Hits Count
    :
    3357156
  • Now Online
    :
    2 Users