JQuery ile Facebook Like Button Uygulaması

Ekim 03 16:13 2012 Yazar: A.Gökhan, M.Sc. Bu yazıyı yazdır

Merhaba,
Hepimizin Facebook hesabı vardır. Hatırladığınız ve bildiğiniz gibi, Facebook ‘ta bir çok özellik bulunmaktadır. Bunlardan bazıları herkesin sıkça kullandığı chat, zaman tüneli, like button özellikleridir. Bunlar büyük ölçüde JQuery kütüphanesi ile yapılmaktadır. Burada göstereceğimiz örnek uygulama, tabiki de kodlama ve görüntü olarak Facebook like button ile eş değildir. Ancak buna benzer bir uygulama olacağını hepimiz göreceğiz.

Facebook ‘taki özellikleri artık uzunca anlatmanın hiç bir anlamı yok, zira herkes Facebook ‘taki özelliklere hatta her şeye hakim. Dünya ‘da en fazla Facebook ‘ta vakit geçiren bir millet olduğumuza göre bu kısmı atlıyorum. Ancak bir cümle ile tanımlamak gerekirse, birileri bir şey paylaşır, diğerleri de onu beğenir ya da hiç bir şey yapmaz. Bu uygulamanın kodlamasına geçelim:

İhtiyacımız olan şeyler,

ayarlar.php (veritabanı konfigürasyonları)
jquery.js (jquery ile ajax methodunu kullandığımız sayfa)
jquery kütüphanesi (jquery.lib.min.x.y.js)
islem.php (veritabanına beğenme sayısını kaydettiğimiz ve toplam beğeni sayısını aldığımız sayfa)
index.php (ana sayfa)

index.php

<script type="text/javascript" src="../jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="jquery.js"></script>

This is facebook like button example. I've just shared this, like it please!

<a id="begen" href="#">Like</a>

This is facebook like button example. I've just shared this, like it please!

Like tuşuna basıldığı anda, JQuery sayfasına veri gönderilir. JQuery ise AJAX methodu ile veritabanına +1 değerini ekler.

ayarlar.php

$conn=mysql_connect("localhost", "username", "password") or die("error1");
mysql_query("SET NAMES 'utf8'") or die("error2");
mysql_select_db("jquery_applications",$conn);
error_reporting(0);
ini_set('display_errors','Off');
error_reporting(E_ALL);

$conn=mysql_connect("localhost", "username", "password") or die("error1");

mysql_query("SET NAMES 'utf8'") or die("error2");

mysql_select_db("jquery_applications",$conn);

error_reporting(0);

ini_set('display_errors','Off');

error_reporting(E_ALL);

jquery.js

// JavaScript Document
$(document).ready(function() {
	$('#begen').click(function() {
		$('#durum').fadeIn(1000);
		//var rasgele=Math.floor(Math.random()*11);
		var bekle="Adding..";
		$.ajax({
			cache:false,
			async:false,
			url:'islem.php',
			//data:rasgele,
			success:function(inc) {
				$('#sonuc').html(inc);
				$('#durum').html(bekle);
				$('#durum').fadeOut(1000);
			}
		});
	});
});

// JavaScript Document

$(document).ready(function() {

$('#begen').click(function() {

$('#durum').fadeIn(1000);

//var rasgele=Math.floor(Math.random()*11);

var bekle="Adding..";

$.ajax({

cache:false,

async:false,

url:'islem.php',

//data:rasgele,

success:function(inc) {

$('#sonuc').html(inc);

$('#durum').html(bekle);

$('#durum').fadeOut(1000);

}

});

id=like olan nesne, click fonksiyonu ile çalıştırıldığında, veritabanına +1 eklenmiş olur. Ekleme işlemini JQuery yapmaz, yalnızca POST eden sayfa ile köprü kurar. +1 ekleme işleminin nasıl yapıldığı, aşağıdaki islem.php sayfasında görülecektir.

islem.php

	include("ayarlar.php");
	//veri ekliyoruz
	$rasgele="PhpVeJquErY".rand(0,99999999);
	$isim=crypt($rasgele);
	$ekle=mysql_query("INSERT INTO isimler(isim) values('$rasgele')");
	//verilerin adedini getiriyoruz
	//ekledigimiz veri ###dahil###
	$getir=mysql_query("select * from isimler");
	$sonuc=mysql_num_rows($getir);
	echo "Total: ".$sonuc;

include("ayarlar.php");

//veri ekliyoruz

$rasgele="PhpVeJquErY".rand(0,99999999);

$isim=crypt($rasgele);

$ekle=mysql_query("INSERT INTO isimler(isim) values('$rasgele')");

//verilerin adedini getiriyoruz

//ekledigimiz veri ###dahil###

$getir=mysql_query("select * from isimler");

$sonuc=mysql_num_rows($getir);

echo "Total: ".$sonuc;

Bütün hepsi bu kadar. Basit bir Facebook like button hazırlamış olduk. Bu hazırlamış olduğumuz ufak uygulamanın demosunu incelemek isterseniz, buraya tıklayabilirsiniz.