Show Facebook Group Wall on web site

I was working last night and my task was to show the facebook groups wall on a normal website . It can be done easily using facebook graph api after working an hour it was done. So lets discuses the steps here.

And the output will be something like this

First get the group name,description and photo.

$group_id = '2204685680';
$url1 = 'https://graph.facebook.com/'.$group_id;
$des = json_decode(file_get_contents($url1));

This will return all the basic info and those will be in Json format, after decoding that we’ll get some data

stdClass Object

(
    [id] => 2204685680
    [version] => 0
    [owner] => stdClass Object
        (
            [name] => Fatih Beyaz
            [id] => 709103042
        )

    [name] => PHP
    [description] => PHP: Hypertext Preprocessor

For anyone who uses PHP.
    [privacy] => OPEN
    [icon] => http://b.static.ak.fbcdn.net/rsrc.php/y_/r/CbwcMZjMUbR.png
    [updated_time] => 2006-07-09T11:39:30+0000
)

Now we have to pull the posts. For this we need to add feed at the end of the previous url , and the code will be like 

$url2 = "https://graph.facebook.com/{$group_id}/feed";
$data = json_decode(file_get_contents($url2));


This will return last 25 wall post , we can get more if we want by using &limit=NUMBER .

For the design lets write some css .

<style type="text/css">
 .wrapper {
 width:300px;
 border:1px solid #ccc;
 font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
 float:left;
 }

 .top {
 margin:5px;
 border-bottom:2px solid #e1e1e1;
 float: left;
 width:290px;
 }

 .single {
 margin:5px;
 border-bottom:1px dashed #e1e1e1;
 float:left;
 }

 .img {
 float:left;
 width:60px;
 text-align:center;
 margin:5px 5px 5px 0px;
 border-right:1px dashed #e1e1e1;
 }

 .text {
 width:220px;
 float:left;
 font-size:10px;
 }

 a {
 text-decoration: none;
 color: #3b5998;
 }
</style>


and including all the things together the full code will be like

<?php
header ('Content-type: text/html; charset=utf-8'); 
$limit = 5;

$group_id = '2204685680';
$url1 = 'https://graph.facebook.com/'.$group_id;
$des = json_decode(file_get_contents($url1));


echo '<pre>';
print_r($des);
echo '</pre>';


$url2 = "https://graph.facebook.com/{$group_id}/feed";
$data = json_decode(file_get_contents($url2));
?>
<style type="text/css">
 .wrapper {
 width:300px;
 border:1px solid #ccc;
 font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
 float:left;
 }

 .top {
 margin:5px;
 border-bottom:2px solid #e1e1e1;
 float: left;
 width:290px;
 }

 .single {
 margin:5px;
 border-bottom:1px dashed #e1e1e1;
 float:left;
 }

 .img {
 float:left;
 width:60px;
 text-align:center;
 margin:5px 5px 5px 0px;
 border-right:1px dashed #e1e1e1;
 }

 .text {
 width:220px;
 float:left;
 font-size:10px;
 }

 a {
 text-decoration: none;
 color: #3b5998;
 }
</style>


<div>
 <div>
 <a href='http://www.facebook.com/home.php?sk=group_<?=$group_id?>&ap=1'>
<?=$des->name?></a>
 <div style="width:100%; margin: 5px">
 <?=$des->description?>
 </div>
 </div>
 <?
 $counter = 0;
 
 foreach($data->data as $d) {
 if($counter==$limit)
 break;
 ?>
 <div>
 <div>
 <a href="http://facebook.com/profile.php?id=<?=$d->from->id?>">
    <img border="0" alt="<?=$d->from->name?>" src="https://graph.facebook.com/<?=$d->from->id?>/picture"/>
 </a>
 </div>
 <div>
 <span style="font-weight:bold"><a href="http://facebook.com/profile.php?id=<?=$d->from->id?>">
<?=$d->from->name?></a></span><br/>
 <span style="color: #999999;">on <?=date('F j, Y H:i',strtotime($d->created_time))?></span>
 <br/>
 <?=$d->message?>
 </div>
 </div>
 <?
 $counter++;
 }
 ?>
</div>


Enjoy  

Advertisement