Thursday, October 25, 2012

Display events of a facebook page using graph api and FQL



If you are a musician or your client is,you must need a event management script that shows upcoming events.You can create it with PHP.But why do all the work when facebook let you create event and offers Awesome Graph Api. You can create events on facebook page.and display that event using graph api into yor website.


As you can see in the demo.it shows all the recent event of this page.I choose this page cause they have lots of upcoming events.it saves time.

What You need

1.A Facebook App
2.Facebook PHP SDK
3.A index.php file
4.style.css file

Facebook App

To work with Graph Api you must have your own app.Follow this steps to crate a Facebook App
1.Go To This link
2.Click on Apps
3.Click on Crate new app
4.A pop up will come fill App name.
5.Click on Continue.Fill the captcha
6.You are done.App created.
7.Now you can find your APP Id and App Secret code.
8.we are done here.

Download Facebook PHP SDK

To work with Facebook graph api you need to download this Php sdk
1.You can download it form Github.I have included facebook php sdk with the source file.
2.If you downloaded form Github.you will find facebook.php and base_facebook.php inside the src folder.copy those files into main folder we need them.

Create Index.php

1.In index.php file we need to include facebook.php  we also need to add app id and App Secret code.Its taken from official facebook developer documentation .You can fine same code in example folder in the facebook php sdk
2.Here is the code
(show code)
// iNCLUDE PHP=SDK
require 'facebook.php';

//Application
$facebook = new Facebook(array(
    'appId'  => 'Your ID',
    'secret' => 'Your CODE',
    'cookie' => true,
));
3.Lets Run the FQL query.FQL is facebook query language .Almost like SQL.
(show code)
 $today = date("Y-m-d");
$time=date("H:i:s");
$now= $today . T .$time;
$param  =   array(
'method'    => 'fql.query',
'query'     => "SELECT name, start_time, end_time, location,attending_count,venue,unsure_count,eid
            FROM event WHERE eid IN ( SELECT eid FROM event_member WHERE uid = 17414523278 AND start_time >= '$now'   )
            ORDER BY start_time asc LIMIT 5 ",
);

4.You must change the uid  of the page with your page uid.
5.If you dont know whats your page uid is just visit your page.
6.Add "graph" before facebook.com/yourpage in the address bar.
7.It will Show a page like below.in this page you can find your page uid.

 8.You can also change the  no. of event to be displayed  Just change the No of LIMIT in fql query
9.In the FQL query we fetched data form event and event_member table.You can fetch more data just go through the table structure.

Display  the result.

Lets Run the loop.
(show code)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Facebook Event</title>
<link rel="stylesheet" href="css/style.css" type="text/css"/>



</head>

<body>
<div id="warp">
<?

$fqlResult   =   $facebook->api($param);


foreach( $fqlResult as  $rows ){
          echo "<div id='shows'>";

 echo"<div id='date'>";
$evmon=substr(trim($rows['start_time']), 5, 2);
$mon=date("$evmon");
$realmon=mktime(0,0,0,date("$evmon"));
$acualmon=date("M", $realmon);
echo "<span id='month'>".$acualmon.'</span>';
$evday=substr(trim($rows['start_time']), 8, 2);
echo "<span id='tdate'>".$evday.'</span>';
echo "</div>";// end date
$fb=$rows['eid'];
 echo"<div id='dtl-warp'>";
echo "<span id='name'>"."<a id='link' href='https://www.facebook.com/events/$fb'>".$rows['name'].'</a>'.'</span>';
echo "<div id='dtl'>";
echo "<span id='city'>".$rows['location'].'</span>';
echo "<span id='time'>Time: ";
$evstime=substr(trim($rows['start_time']), 11, 5);
if (empty($evstime))
  {
  echo $realstime=' ';
  }
else
  {
 echo $realstime  = "<span id='stime'>".date("g:i a", STRTOTIME("$evstime")).' </span>';
  }
$eventime=substr(trim($rows['end_time']), 11, 5);
if (empty($eventime))
  {
  echo $realentime="<span id='etime'>".''."</span>";
  }
else
  {
 echo $realentime  =" TO "."<span id='etime'>". date("g:i a", STRTOTIME("$eventime")).'</span>';
  }
echo "</span>";
echo "</div>";// end dtl
echo "<span id='going'>Going :".$rows['attending_count']."</span>";
echo "<span id='ntsure'>Not Sure :".$rows['unsure_count']."</span>";

echo "<span id='facebook'>"."<a id='face' href='https://www.facebook.com/events/$fb'><img alt='View the event on facebook'src='http://i.minus.com/iibz2etbeUGxT.png'/></a>"."</span>";
echo "</div>";// end dtl warp
echo "</div>";// end shows

}

?>
<span id="author"><a href="http://autobotcode.blogspot.in/">FaceEvent By Autobotcode</a></span>
 </div> <!--end warp-->

</body>
</html>
You are done.

 The whole coding will look like this
(show code)
<?
// iNCLUDE PHP=SDK
require 'facebook.php';

//Application
$facebook = new Facebook(array(
    'appId'  => '295445603898104',
    'secret' => '5bbb8b840def4719b40ba3f3d99eb179',
    'cookie' => true,
));



 //265998713433719
 $today = date("Y-m-d");
$time=date("H:i:s");
$now= $today . T .$time;       
$param  =   array(
'method'    => 'fql.query',
'query'     => "SELECT name, start_time, end_time, location,attending_count,venue,unsure_count,eid
            FROM event WHERE eid IN ( SELECT eid FROM event_member WHERE uid = 17414523278 AND start_time >= '$now'   )
            ORDER BY start_time asc LIMIT 0, 5 ",
);
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Facebook Event</title>
<link rel="stylesheet" href="css/style.css" type="text/css"/>



</head>

<body>
<div id="warp">
<?

$fqlResult   =   $facebook->api($param);


foreach( $fqlResult as  $rows ){
          echo "<div id='shows'>";

 echo"<div id='date'>";
$evmon=substr(trim($rows['start_time']), 5, 2);
$mon=date("$evmon");
$realmon=mktime(0,0,0,date("$evmon"));
$acualmon=date("M", $realmon);
echo "<span id='month'>".$acualmon.'</span>';
$evday=substr(trim($rows['start_time']), 8, 2);
echo "<span id='tdate'>".$evday.'</span>';
echo "</div>";// end date
$fb=$rows['eid'];
 echo"<div id='dtl-warp'>";
echo "<span id='name'>"."<a id='link' href='https://www.facebook.com/events/$fb'>".$rows['name'].'</a>'.'</span>';
echo "<div id='dtl'>";
echo "<span id='city'>".$rows['location'].'</span>';
echo "<span id='time'>Time: ";
$evstime=substr(trim($rows['start_time']), 11, 5);
if (empty($evstime))
  {
  echo $realstime=' ';
  }
else
  {
 echo $realstime  = "<span id='stime'>".date("g:i a", STRTOTIME("$evstime")).' </span>';
  }
$eventime=substr(trim($rows['end_time']), 11, 5);
if (empty($eventime))
  {
  echo $realentime="<span id='etime'>".''."</span>";
  }
else
  {
 echo $realentime  =" TO "."<span id='etime'>". date("g:i a", STRTOTIME("$eventime")).'</span>';
  }
echo "</span>";
echo "</div>";// end dtl
echo "<span id='going'>Going :".$rows['attending_count']."</span>";
echo "<span id='ntsure'>Not Sure :".$rows['unsure_count']."</span>";

echo "<span id='facebook'>"."<a id='face' href='https://www.facebook.com/events/$fb'><img alt='View the event on facebook'src='http://i.minus.com/iibz2etbeUGxT.png'/></a>"."</span>";
echo "</div>";// end dtl warp
echo "</div>";// end shows

}

?>
<span id="author"><a href="http://autobotcode.blogspot.in/">FaceEvent By Autobotcode</a></span>
 </div> <!--end warp-->

</body>
</html>



Lets do CSS

1.you can crate your own CSS or use mine feel free to change,be creative.
(show code)
@charset "utf-8";
/* CSS Document */
body{
    background-color:#000000;
        width: 700px;
        }
#warp{
width:610px;
background-color:#fff;
margin:200px 0 0 250px;
border-radius:5px;
}
#shows{
    width:610px;
    height:100px;
border-bottom:1px solid #ddd;
}
#date{
float:left;
overflow:hidden;
  height:100px;
  width:100px;
border-right:1px solid #CCC;
}
#month{
font-size:25px;
  display:block;
  margin-left:30px;
    margin-top:10px;
}
#tdate{
font-size:25px;
  display:block;
  margin-left:35px;
 
}
#dtl-warp{
float:left;
overflow:hidden;
  height:100px;
  width:500px;
}
span#name{
font-size:18px;
float:left;
  margin-left:5px;
    margin-top:5px;
  width:600px;
}
div#dtl{
float:left;
 width:600px;

}
span#city{
  float:left;
    margin-left:5px;
    margin-top:5px;
}
span#time{
    display: inline;
    padding:2px;
   margin-top:5px;
    font-weight: normal;
    font-size: 12px;
    background-color: rgb(0,0,0);
    color: rgb(255,255,255) ;
    text-decoration: none;
    text-transform: uppercase;
  
    text-align: center;
    vertical-align: middle;

    margin-left:150px;
float:left;
transition: all 0.25s ease-in-out;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    border-radius:3px;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
  font-weight:bold;
}
#time:hover{
    background-color: #3CF;
    color: rgb(0,0,0);
  font-weight:bold;
}
#going,#ntsure{

    padding:3px;
   margin-top:5px;
    font-weight: bold;
    font-size: 10px;
    background-color: rgb(211,10,10);
    color: rgb(255,255,255) ;
    text-decoration: none;
    text-transform: uppercase;
    margin-right: 10px;
    text-align: center;
    vertical-align: middle;
margin-left:5px;
float:left;
transition: all 0.25s ease-in-out;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    border-radius:3px;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
  font-weight:bold;

}
#going:hover,#ntsure:hover{
    background-color: #ddd;
    color: rgb(0,0,0);
  font-weight:bold;
}
a#face{
background-image:url("http://i.minus.com/iibz2etbeUGxT.png");
background-repeat:no-repeat;

}
a#face img{
margin-top:5px;
}
a#link{
color:#000000;
text-decoration:none;  
}
#author a{
color:#000;
  opacity:0.3;
}
#author a:hover{
color:#000;
  opacity:1;
}

Done.
Note: I,m new with php and graph api.let me know if anything wrong here.
Thanks for reading plz share this tutorial

OLDER POST

Older Post

NEWER POST

Newer Post

21 comments:

  1. MMMDecember 7, 2012 at 7:54 PM

    thank you for this tutorial. can you show a way of displaying the city (venue.city) the location is in, not just the location name? i can't get this running... thanks in advance for any tip...

    ReplyDelete
  2. AnonymousApril 18, 2013 at 2:59 PM

    I want to make this work on Wordpress - but i keep getting errors...

    ReplyDelete
  3. Promi TVApril 18, 2013 at 4:31 PM

    tried it billion times. always get this error:

    Fatal error: Uncaught exception 'Exception' with message 'Facebook needs the CURL PHP extension.' in /users/aeight/www/facebook/base_facebook.php:19 Stack trace: #0 /users/aeight/www/facebook/facebook.php(18): require_once() #1 /users/aeight/www/facebook/index.php(3): require('/users/aeight/w...') #2 {main} thrown in /users/aeight/www/facebook/base_facebook.php on line 19


    pls help !

    ReplyDelete
    Replies
    1. SambiT Rul3zApril 19, 2013 at 9:05 PM

      its working fine...thing is that i was busy with my colg exam so i lost my hosting...so demo is not working i guess...just follow the step one by one

      Delete
    2. AnonymousMay 4, 2013 at 3:53 PM

      You need "cURL library" for PHP5

      more information -http://www.php.net/manual/pt_BR/curl.installation.php

      Delete
  4. NegroAchievementSeptember 6, 2013 at 1:31 AM

    demo does not even work

    ReplyDelete
  5. NegroAchievementSeptember 6, 2013 at 1:31 AM

    demo does not even work

    ReplyDelete
  6. AnonymousDecember 12, 2013 at 5:23 PM

    Hi
    You know how to add (pic_cover) of the event?
    With (peak) or (pic_big) it works, but I can not with (pic_cover).
    Help

    ReplyDelete
  7. UnknownJanuary 29, 2014 at 10:56 PM

    tried it billion times. always get this error:

    Fatal error: Uncaught exception 'Exception' with message 'Facebook needs the CURL PHP extension.' in /users/aeight/www/facebook/base_facebook.php:19 Stack trace: #0 /users/aeight/www/facebook/facebook.php(18): require_once() #1 /users/aeight/www/facebook/index.php(3): require('/users/aeight/w...') #2 {main} thrown in /users/aeight/www/facebook/base_facebook.php on line 19

    ReplyDelete
  8. gerwin visJune 17, 2014 at 8:57 AM

    This comment has been removed by the author.

    ReplyDelete
  9. gerwin visJune 17, 2014 at 9:08 AM

    tnxs!! works perfect!
    i've put the page on a normal page and made a i frame in Wordpress showing everything.
    Is there a possibility to show the details from the event?

    grtzz

    ReplyDelete
  10. ทดลองเล่นสล็อต ppMarch 17, 2023 at 8:33 AM

    ทดลองเล่นสล็อต pp เกมสล็อตออนไลน์ รูปแบบใหม่ อัพเดทปี2022 มีเกมให้เลือกเล่นเยอะแยะ ไม่ว่าจะเป็น คาสิโนสด pg slot บาคาร่าออนไลน์เกมยิงปลาซึ่งสามารถเล่นผ่านมือถือได้ทุกระบบ

    ReplyDelete
  11. 50 รับ 200March 17, 2023 at 8:42 AM

    50 รับ 200 จะช่วยให้คุณได้อยู่กับ 200 บาทนั้น นั้นคือการ ฝาก50รับ150 บาท ในรวมกัน pgslot

    ReplyDelete
  12. PG SLOTMarch 18, 2023 at 5:02 AM

    slot machine ที่ได้รับความนิยมชั้น 1 ของทวีปเอเชีย ที่มากับระบบฝาก PG SLOT เบิกเงินอัตโนมัติ เร็วทันใจมากขึ้นเพื่อการทำ แจ็คพอตแตก ก็เลยเอามาให้บริการ บนเว็บ เกมสล็อตออนไลน์

    ReplyDelete
  13. PGMarch 18, 2023 at 5:05 AM

    เกมสล็อต 50 รับ 200 บาท แล้วสงสัยจะใช้ไปทำอะไรดี ก็อย่างที่เราทราบกันว่าเพื่อนๆ สมัครสมาชิกในเว็บไซต์ของเราเพื่อเข้าเล่นเกม PG

    ReplyDelete
  14. สล็อตเครดิตฟรี50May 19, 2023 at 2:48 AM

    สล็อตเครดิตฟรี50 เล่นผ่านเว็บ pg slot ไม่ต้องฝาก ทดลองเล่นโดยไม่ต้องฝาก pg slot เล่นได้แบบไม่มีขีดจำกัดตลอด 24 ชั่วโมง รวมทั้งเบิกเงินในปริมาณ รับเครดิตง่าย ๆ ไม่ต้องฝากก็เล่นได้

    ReplyDelete
  15. pgslot6g ที่ดีที่สุดMay 19, 2023 at 2:49 AM

    pgslot6g ที่ดีที่สุด เป็นเว็บไซต์เกมสล็อตออนไลน์ที่มีเกมสล็อตหลากหลายประเภทให้ผู้เล่นได้เลือกเล่น เช่น PGSLOT, สล็อตแบบผสมผสาน, สล็อตโบนัส,

    ReplyDelete
  16. superpg1688September 11, 2023 at 7:55 AM

    superpg1688 เป็นค่ายเกมสล็อตออนไลน์ที่มีความปลอดภัยสูงด้วยเหตุว่าเล่นได้นานัปการต้นแบบ เล่นจริง ได้เงินจริง pg slot ลงทะเบียนเป็นสมาชิกค่ายฟรีอย่างเดียวสมาชิกใหม่ที่มาแรง

    ReplyDelete
  17. pgslot เข้าเล่นที่ง่ายที่สุดSeptember 11, 2023 at 7:55 AM

    pgslot เข้าเล่นที่ง่ายที่สุด ไม่ว่าคุณจะเป็นผู้เล่นที่มีประสบการณ์หรือเพิ่งเริ่มเล่น PG SLOT คู่มือนี้จะแนะนำคุณเกี่ยวกับวิธีที่ง่ายและมีประสิทธิภาพที่สุด

    ReplyDelete
  18. ทดลองเล่น สล็อตpgSeptember 11, 2023 at 10:00 AM

    ทดลองเล่น สล็อตpg สล็อตแมชชีนเป็นงานอดิเรกยอดนิยมมายาวนาน โดยผสมผสานโอกาสและความบันเทิงเข้าด้วยกันเพื่อมอบความตื่นเต้น PG SLOT นานหลายชั่วโมงไม่

    ReplyDelete
  19. pg slotFebruary 27, 2024 at 1:15 AM

    ทางเข้าpg soft slots games มีเกมให้สำหรับทุกคน PG SLOT แล้วก็ทุกๆรสนิยม คณะทำงานของพวกเราได้ปรับปรุงฟีพบร์มากหลายแบบเพื่อตอบรับกับเกมเมอร์ทุกแบบเพื่อทุกคุณได้รับประสบการณ์ที่ดี

    ReplyDelete

Subscribe to: Post Comments (Atom)