Membuat pop up box Facebook page like
bcscoder 16 Oct 2014 at 7:07 pm Nge-Tekno facebook like pop up Tutorial kali ini, kita akan membuat pop up facebook like yang bisa kalian gunakan dan pasang di halaman website kamu. Jadi idenya ini ad
16 Oct 2014 at 7:07 pm Nge-Tekno
facebook like pop up
Tutorial kali ini, kita akan membuat pop up facebook like yang bisa kalian gunakan dan pasang di halaman website kamu. Jadi idenya ini adalah saat user mengunjungi halaman website kalian untuk pertama kalinya, maka pop up ini akan muncul secara otomatis. Tentu user bisa menutup pop up box ini sehingga tidak menggangu mereka untuk browsing di website kita.
Persiapan
Jadi sebelum lanjut lebih dalam kita summary dulu sedikit apa yang akan kita buat kali ini:
- Pop up facebook like box
- Responsive design, jadi tampilannya bagus untuk semua device
- Hanya menggunakan pure javascript.
- Keep it simple
Kita akan buat directory yang simple yang bisa kamu kembangkan nanti, final file dan directory dari tutorial ini adalah seperti di bawah ini.
- index.html - styles/ |_ main.css - js/ |_ cookies.js |_ main.js1. index.html
File index.html akan berfungsi sebagai main file dalam app kita kali ini. Kita buat isinya simple saja dulu.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Facebook Like Box</title>
</head>
<body>
<h1><center>Helllo World! This is my cool website.</center></h1>
</body>
</html>Kemudian, dalam body kita akan tambahkan sebuah div yang didalamnya berisi iframe untuk meload facebook page yang kamu inginkan.
<div class="likebox" id="likebox">
<div class="fanbox">
<a href="#" class="boxclose" id="likebox_btn"></a>
<iframe id="likebox_iframe" allowtransparency='true' frameborder='0' scrolling='no' ></iframe>
<div class="footer">@bcscoder</div>
</div>
</div>Nah sekarang coba buka file index.html yang kita buat tadi di browser kamu. Hasilnya kurang lebih seperti di bawah ini.
Ga ada yang spesial disini, hanya mematikan kalau kita sudah di jalan yang benar :))
2. style.cssNah sekarang kita buat file css untuk stylingnya. Jangan lupa juga kita ingin membuat pop box tersebut nantinya responsive.
.likebox {
display: block;
background: #000000;
width: 92%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
padding: 4%;
opacity: 0.8;
}
.likebox .fanbox {
position: fixed;
background:white;
width:88%;
height:200px;
top: 0; right: 0; bottom: 0; left: 0;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin: auto 4%;
padding: 2%;
}
.likebox a.boxclose{
position: absolute;
cursor:pointer;
color: #fff;
border: 1px solid #4C4C4C;
border-radius: 30px;
background: #000000;
font-size: 18px;
font-weight: lighter;
display: inline-block;
line-height: 10px;
padding: 6px 6px;
text-decoration: none;
right: -8px;
top: -8px;
}
.likebox .footer{
position: absolute;
cursor:pointer;
color: #fff;
font-size: 12px;
font-weight: lighter;
display: inline-block;
line-height: 10px;
padding: 6px 6px;
text-decoration: none;
margin: auto;
bottom: -20px;
left: 0;
right: 0;
text-align: right;
font-style: italic;
}
.likebox .boxclose:before {
content: "×";
}
.likebox .fanbox iframe {
width: 100%;
height: 100%;
}
@media (min-width: 768px) {
.likebox .fanbox {
width: 400px;
padding: 15px;
margin: auto;
}
}Oke simpan file diatas dengan nama style.css dan taruh di folder styles. Setelah itu kamu tambahkan file style.css di index.html yang sudah kita buat sebelumnya.
<link rel="stylesheet" href="styles/style.css"/>
Tambahkan script di atas di bagian head dari index.html. Jika sudah ayo kita buka lagi file index.html lagi di browser kamu. Jika kalian mempunyai tampilan seperti di bawah maka sekali lagi kita sudah di jalan yang benar.
Kalian akan melihat sebuah blank pop up box dimana nanti di dalamnya akan kita isi dengan facebook page like, tentu jika kalian mengganti ukuran browser, maka size dari pop up tersebut akan menyesuikan. Kalian bisa check lebih lanjut di dalam file style.css bagaimana itu bisa terjadi.
Yup, kita sudah hampir selesai, tapi masih ada yang kurang. Yaitu facebook page like belum terload di dalam pop up dan jika kalian click icon x, maka seharusnya pop up box tersebut akan hilang. Nah sekarang saatnya buat file javascript untuk menambah funsi tersebut.
3. main.jsDi dalam main js ini, kita akan membuat sebuah fungsi untuk meload facebook page like kedalam i frame dan juga event yang akan mengecek jika iframe facebook like box tersebut sudah terload, maka pop up box akan muncul kepada para pengunjung website kita.
var base_url = '//www.facebook.com/plugins/likebox.php?href=';
var page_url = 'http://www.facebook.com/ngide.net';
var other = '&colorscheme=light&show_faces=true&border_color=#fff&stream=false&header=false';
var iframe = document.getElementById('likebox_iframe');
iframe.src = base_url+page_url+other;
iframe.onload = function () {
var div = document.getElementById('likebox');
div.style.display = 'block';
document.getElementById("likebox_btn").onclick = function () {
div.style.display = 'none';
return false;
};
}
Sedikit penjelasan tentang script di atas:
pada line 4 kita mencari element iframe berdasarkan idnya yaitu likebox_iframe, kemudian di line 5 kita set attribute src-nya untuk me load facebook page like kamu. Oh ya kamu bisa mengganti variable page_url ke facebook page punya kamu.
dimana pada line 6 kita akan mengecek jika iframe tersebut sudah terload dengan sempurna mana kita akan memunculkan pop up box (line 8). Kemudian untuk menghilangkan pop up box tersebut saat user meng-klik kita akan menambah sebuah event onclick (line 9) dimana saat button itu di click, maka pop up box tersebut akan menghilang (line 10).
Nah setelah kamu save file tersebut dengan nama main.js dan simpan di dalam folder js, include file tersebut di file index.html yang kita buat sebelumnya. Tinggal tambahkan script di bawah sebelum tag closed body.
<script src="js/main.js"></script>
Sebelum lupa, kalian buka lagi file style.css dan ganti style display untuk class likebox menjadi none.
/* style.css */
.likebox {
display: none; //ganti ini dari block -> none
background: #000000;
width: 92%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
padding: 4%;
opacity: 0.8;
}Oke, kita sekarang buka lagi file index.html di browser kamu, dan coba check pop up box kamu terload dengan benar dengan close button juga berfungsi dengan baik B).
Sudah cukup? saya rasa belum, bagaimana kalau kita tambah sedikit animasi fade in dan fade out pada pop up box yag kita buat? Ok, kita buka file main.js dan tambahkan script di bawah ini pada bagian atas.
//fungsi untuk fadeout & fadein element yang kita pilih
function fadeOut(el) {
el.style.opacity = 1;
(function fade() {
if ((el.style.opacity -= .1) < 0)
{
el.style.display = "none";
} else
{
requestAnimationFrame(fade);
}
})();
}
function fadeIn(el, display) {
el.style.opacity = 0;
el.style.display = display || "block";
(function fade() {
var val = parseFloat(el.style.opacity);
if (!((val += .1) > 0.8))
{
el.style.opacity = val;
requestAnimationFrame(fade);
}
})();
}Kemudian sedikit modifikasi di script main.js pada saat iframe.onload untuk pemakaian dua fungsi diatas.
iframe.onload= function () {
var div = document.getElementById('likebox');
fadeIn(div);
document.getElementById("likebox_btn").onclick = function () {
fadeOut(div);
return false;
};
}<br>Simpan dan coba buka file index.html di browser kamu dan kamu akan mempunyai animasi fade in saat pop up box itu terload dan juga fade out saat close button di klik.
4. cookie.jsSebenarnya, sampai disini kalian sudah bisa aplikasikan script di atas pada halaman website kamu. Tapi saya hanya ingin menampilkan pop up box tersebut hanya sekali saja misalnya saat user pertama kali berkunjung atau setiap 1 x sehari, 2 x sehari atau suka suka kita saja. Nah agar bisa seperti itu, kita akan memanfaatkan yang namanya cookie.
A cookie, also known as an HTTP cookie,web cookie, or browser cookie, is a small piece of data sent from a website and stored in a user's web browser while the user is browsing that website (wikipedia).
Nah dengan cookie, kita bisa menyimpan sebuah data yang kecil di browser pengunjung website kita dan menggunakannya untuk mengecek apakah mereka sudah pernah melihat pop up box kita atau belum. Jadi kita akan set sebuah cookie dengan expire time yang bisa kalian tentukan sendiri nanti. Misalnya kita set expire time = 5 hari, maka user akan melihat pop up box ini lagi setelah 5 hari dari saat pertama x melihat pop up box in.
var jsCookies = {
// this gets a cookie and returns the cookies value, if no cookies it returns blank ""
get: function (c_name) {
if (document.cookie.length > 0)
{
var c_start = document.cookie.indexOf(c_name + "=");
if (c_start != -1)
{
c_start = c_start + c_name.length + 1;
var c_end = document.cookie.indexOf(";", c_start);
if (c_end == -1)
{
c_end = document.cookie.length;
}
return unescape(document.cookie.substring(c_start, c_end));
}
}
return "";
},
// this sets a cookie with your given ("cookie name", "cookie value", "good for x days")
set: function (c_name, value, expiredays) {
var exdate = new Date();
exdate.setDate(exdate.getDate() + expiredays);
document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : "; expires=" + exdate.toUTCString());
},
delete : function (c_name) {
document.cookie = c_name+"=; expires=Thu, 01 Jan 1970 00:00:00 UTC";
},
// this checks to see if a cookie exists, then returns true or false
check: function (c_name) {
c_name = jsCookies.get(c_name);
if (c_name != null && c_name != "")
{
return true;
} else
{
return false;
}
}
};Code di atas merupakan sebuah fungsi untuk set, get, delete dan check cookie. Kita simpan code diatas dengan nama cookie.js di dalam folder js. Lalu kalian tinggal tambahkan script file cookie.js di dalam file index.html di atas file main.js
<script src="js/cookie.js"></script>
Kita buka lagi file main.js dan lakukan sedikit modifikasi untuk penggunaan cookie.
//fungsi untuk fadeout & fadein element yang kita pilih
function fadeOut(el) {
el.style.opacity = 1;
(function fade() {
if ((el.style.opacity -= .1) < 0)
{
el.style.display = "none";
} else
{
requestAnimationFrame(fade);
}
})();
}
function fadeIn(el, display) {
el.style.opacity = 0;
el.style.display = display || "block";
(function fade() {
var val = parseFloat(el.style.opacity);
if (!((val += .1) > 0.8))
{
el.style.opacity = val;
requestAnimationFrame(fade);
}
})();
}
var base_url = '//www.facebook.com/plugins/likebox.php?href=';
var page_url = 'http://www.facebook.com/ngide.net';
var other = '&colorscheme=light&show_faces=true&border_color=#fff&stream=false&header=false';
//check apakah cookie likebox sudah ada di browser user
var status = jsCookies.check('likebox_cookie');
if(status=='false')
{
//jika tidak ada, show pop up dan set cookie untuk likebox
var expire = 1; //dalam hari (day)
jsCookies.set('likebox_cookie', window.location, expire);
var iframe = document.getElementById('likebox_iframe');
iframe.src = base_url+page_url+other;
iframe.onload = function () {
var div = document.getElementById('likebox');
fadeIn(div);
document.getElementById("likebox_btn").onclick = function () {
fadeOut(div);
return false;
};
}
}
<br>File diatas adalah file final dari main.js. Kita set expire time dari cookie tersebut selama 1 hari, atau kamu bisa menggantinya sesuai dengan kebutuhan kamu. Jika kamu ingin mendisable cookie, maka kama tinggal set expire = -1. Jadi saat cookie itu sudah expire maka pop up box akan muncul lagi saat user membuka halam website tersebut.
Kesimpulan
Jadi apa yang kita pelajari dari tutorial ini? pertama kita bisa tau bagaimana menampilkan facebook page like di website kita. Kemudian kita sedikit belajar soal css dan javascript. Mungkin kalian ada yang bertanya kenapa tidak menggunakan jquery saja untuk event dan cookienya? Jawabannya adalah saya cuman ingin membuat tutorial ini sesimple mungkin, selain itu dengan menggunakan jquery untuk hal sesimple ini saya rasa terlalu wah (just in my opinion) . Jadi itu lesson learned yang bisa kita ambil sekarang.
Demo bisa dilihat di sini dan sample code bisa di check di sini. Seperti biasa jika ada pertanyaan, komentar saran atau kritik, tinggalkan pesan di bawah! Trims and GGTQ :))
Share via:
About Author
@bcscoderhello! saya seorang pecinta dunia programming, gamer dan freelancer web developer. Follow me @bcscoder