Cara Membuat Popup Facebook Like di Wordpress dan Blogspot

Cara Membuat Popup Facebook Like di Wordpress dan Blogspot - Dani Sukma.Anda mencari script pop up facebook like ? bagaimana membuat pop up facebook like saat blog pertama kali di kunjungi ? "Dan(Dani maksudnya) :) .. coba cari script untuk menampilkan like facebook fanpage !".untuk menanggapi permintaan tersebut akhirnya saya coba berkeliling mencari referensi, sebenarnya untuk wordpress hosting sendiri ada plugin untuk keperluan tersebut yaitu facebook page promoter lightbox.

Tapi.. kebetulan untuk blog yang saya kelola plugin tersebut tidak berjalan dengan baik, alhasil saya harus mencari referensi lain. Akan lebih mudah jika anda sudah familiar dengan web desain dan menguasai pop up message menggunakan jquery, pada prinsipnya menyertakan facebook page like box ke dalam pop up message yang muncul saat pertama kali mengunjungi suatu halaman untuk membuat facebook like box silahkan anda kunjungi halaman facebook developper.

Membuat Facebook Like Box

isi facebook page url dengan alamat url fan page facebook anda lalu klik get code, terdapat 4 pilihan code, dari beberapa referensi cara membuat pop up like facebook fan page memilih code iframe, tapi dalam praktek yang saya lakukan menggunakan code html 5, berdasar referensi lain komponen iframe tidak seo friendly. Pilih salah satu kode untuk facbook like di bawah ini lalu copas pada widget html pada blog anda, ganti alamat facebook

https://www.facebook.com/pages/Selamatkan-Wanita-DARI-KISTA/557765757604047

menjadi alamat facebook fan page anda sesuaikan data-width="300" data-height="290" dengan lebar space widget sidebar

Kode html5 Facebook like

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-like-box" data-href="https://www.facebook.com/pages/Selamatkan-Wanita-DARI-KISTA/557765757604047" data-width="300" data-height="290" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true">
</div>

Kode Iframe facebook Like

<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FSelamatkan-Wanita-DARI-KISTA%2F557765757604047+&amp;width=300&amp;height=290&amp;colorscheme=light&amp;show_faces=true&amp;header=true&amp;stream=false&amp;show_border=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:290px;" allowTransparency="true"></iframe>

Sampai tahap ini, anda sudah berhasil membuat facebook pan fage statik yang bisa anda tempatkan di widget html pada blog anda(biasanya di letakan di sidebar). Selanjutnya bagaimana membuat agar facebook like fan page tersebut muncul dengan pop up ? anda tidak perlu membuat sendiri script tersebut, saya mendapatkanya di www.trickstoo.com Copy script dibawah ini ke dalam widget html blogspot atau wordpress

Kode Pop Up Facebook Fan Page Like

<div id="fb-root"></div>
<script>
(function(d, s, id) {
	var js, fjs = d.getElementsByTagName(s)[0];
	if (d.getElementById(id)) return;
	js = d.createElement(s); js.id = id;
	js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
	fjs.parentNode.insertBefore(js, fjs);
}
(document, 'script', 'facebook-jssdk'));
</script>

<style type='text/css'>
#trickstoo-box {
	position:fixed !important;
	position:absolute;
	top:-1000px;
	left:50%;
	margin:0px 0px 0px -182px;
	width:300px;
	height:auto;
	padding:16px;
	background:#FEFEFE;font:normal Dosis, Georgia, Serif;
	color:#111;
	border:2px solid #333;
	-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
	-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
	box-shadow:0px 1px 2px rgba(0,0,0,0.4);
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
}
#trickstoo-box a.bsclose {
	position:absolute;
	top:-10px;
	right:-10px;
	background:#fff;
	font:bold 16px Arial, Sans-Serif;
	text-decoration:none;
	line-height:22px;
	width:22px;
	text-align:center;
	color:#000000;
	border:2px solid #333;
	-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
	-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
	box-shadow:0px 1px 2px rgba(0,0,0,0.4);
	-webkit-border-radius:22px;
	-moz-border-radius:22px;
	border-radius:25px;
	cursor:pointer;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type='text/javascript'>
	$(window).bind("load", function() {
		$('#trickstoo-box').animate({top:"90px"}, 1000).delay(3000).hide(0);
		$('a.bsclose').click(function() {
			$(this).parent().fadeOut();
			return false;
		});
	});
</script>

<div id='trickstoo-box' style="z-index:1000">
	<!-- Widget by www.trickstoo.com Start -->
	<center>
		<b><a class="Blogtariff">Like Ahli Kista</a></b>
	</center>
	<center>
		<div class="fb-like-box" data-href="https://www.facebook.com/pages/Selamatkan-Wanita-DARI-KISTA/557765757604047" data-width="The pixel width of the plugin" data-height="The pixel height of the plugin" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true"></div>
	</center>
	<!-- Widget by www.trickstoo.com End -->
	<a class='bsclose' href='#'>&times;</a>
	<!--
	<center style="float:right; margin-right:10px;"><span style="font-size:xx-small; color:#000; text-decoration:none;">+Get this at</span> <a target='_blank' style="font-size:xx-small; color:#3B78CD; text-decoration:none;" href="#">trickstoo</a></center>
	-->
</div>

Cari alamat facebook fan page di bawah ini ganti dengan alamat fanpage anda, simpan dan refersh halaman blog. facbook like fan page akann muncul dengan pop up dan menghilang dalam waktu 3 detik

https://www.facebook.com/pages/Selamatkan-Wanita-DARI-KISTA/557765757604047

untuk merubah waktu untuk menghilang secara otomatisnya cari kode berikut rubah menjadi 5000 atau lebih besar dari 3000

delay(3000)

[ Demo | Ahli Kista ]

Demikian posting cara membuat pop up facebook like di wordpress dan blogspot semoga dapat bermanfaat.

Posting Terkait :
Cara Memasang Breadcrumb di blogspot
Cara Import Bookmark Browser
Cara Merubah Title Blog Menjadi title Posting

Dani Sukma | Blog Dani | Belajar SEO

Pages

Wednesday, October 30, 2013