JQuery ile Facebook Like Button Uygulaması

by A.Gökhan, M.Sc. | Ekim 3 16:13

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,

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

index.php

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

jquery.js

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

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[1] tıklayabilirsiniz.

Uygulama görüntüsü

Like buttonuna basıldığında

Not: Bu makale, tarafımdan http://stdioe.blogspot.com/2011/12/facebook-like-button-example-with.html[2] adresinde İngilizce dilinde de yayınlanmıştır.

Endnotes:
  1. buraya: http://phpservisi.com/like
  2. http://stdioe.blogspot.com/2011/12/facebook-like-button-example-with.html: http://stdioe.blogspot.com/2011/12/facebook-like-button-example-with.html

Source URL: http://www.phpservisi.com/jquery-ile-facebook-like-button-uygulamasi/