15/03/2011
1
This JavaScript article tutorial provide us many helpful experiences to develop Facebook applications with JavaScript API. Besides, this JavaScript article tutorial also guides you how to build a simple JavaScript application to get feeds. Please go to the full post page for details.
- Demo
- Enlarge
- Reload
- New window
Free iPage Web Hosting for First Year NOW
If you're still looking for a reliable web host provider with affordable rates, why you don't take a little of time to try iPage, only with $1.89/month, included $500+ Free Extra Credits for the payment of 24 months ($45)?
Over 1,000,000+ existisng customers can not be wrong, definitely you're not, too! More important, when you register the web hosting at iPage through our link, we're going to be happy for resending a full refund to you. That's awesome! You should try iPage web hosting for FREE now! And contact us for anything you need to know about iPage.
Part II
Here goes the link of the first part. In this post I will share (or better to say note down about further experience in FB Javascript API).
Here I will try to focus on :::
(2) get fans count and their feed on page's wall to promote and to share the page.
(3) post to wall (to my page or profile) from my site.
Steps for task (2) :
[1] Facebook fan pages are awesome tools for marketing or promotion. They are attached to facebook open graph. SO it is very much easy to access their public info like feed stream and fan count. But for the other info there should be nneded to logging in.
[2] If we hit to https://graph.facebook.com/ we will get all the public info like -- id, name, username(if any), page profile picture, link, location, hours open. For other info we have to use metdata tag. for this purpose we may hit https://graph.facebook.com/?metadata=1. We may find links for feed, posts, tagged, statuses, links, notes, photos, albums, events and videos. Among them feed, posts, photos and albums are publicly accessible.
[3] So using this protocol we can find and fulfil our needs as mentioned above.
[4] We have called javascript api for getting fancount and for feeds we have used php as this is easy to maintain a multilevel data structure like array in php than javascript.
[5] So the frame of our code goes like as below :
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</head>
<body>
<div id="user-info" style="display: none;"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<div id="fb-root"></div>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
$(document).ready(function(){
FB.init({ apiKey: 'XXXXXXXXXXXXXXXXXXX' });
});
</script>
</body>
</html>[6] Here the FB.init is used to initiate the api call. Now to get the fan count we will add the following function after document.ready block and call the function from document.ready.
function getUpdate () {
var htmls = '<div style="background-color:#77A1CD:color:#EAAA00;">';
FB.api('/224365082363', function(response1) {
total_members = response1.fan_count;
name = response1.name;
link = response1.link;
htmls += 'Total <i>'+total_members+'</i> persons likes '+'<a href="/javascript/article/JavaScript_Experiments_of_Facebook_SDK_with_Graph_API.php/'+link+'">'+name+'</a><br>';
htmls += '</div>';
$('#user-info').show();
$('#user-info').attr("style","width:450px;height:auto;background-color:#E4E9EE");
$('#user-info').html(htmls);
});
}
[7] Now to find the lates feeds we have used php. From php we have called the same graph protocol and used file_get_contents. the returned datatype is json. SO we used json_decode to parse the data. Then the data type becomes an stdclassobject. The code goes as follows:
<?php
$myObj = json_decode(file_get_contents("https://graph.facebook.com/224365082363/feed"));
echo "<br>";
$i = 0;
foreach ($myObj->data as $aData){
$user[$i]['from'] = $from = "<a href=\"http://www.facebook.com/profile.php?id=".$aData->from->id."\" >".$aData->from->name."</a>";
$user[$i]['msg'] = $message = $aData->message;
$created = $aData->created_time;
$html = "<div style=\"background-color:#F9F9F9;color:#000000;height:auto;width:500px;\">";
$html .= $from.": ".$message;
$html .= "<font size=\"1\"> ".$created."</font>";
$html .= "<hr style=\"border-style:dotted; border-color:#6D84B4\"/>";
$html .= "</div>";
echo $html;
$i++;
}
?> [8] Here the time returned is on 'yyyy-mm-ddThh:mm:ss' format but normally and specially our application demands time difference from now liek as how many mniutes ago the feed was posted. So for these reason we have used a function that calculates the time difference in days, hours and miniutes. the code block for the function and the calling will be as follows:
<?php
$myObj = json_decode(file_get_contents("https://graph.facebook.com/224365082363/feed"));
echo "<br>";
$i = 0;
foreach ($myObj->data as $aData){
$user[$i]['from'] = $from = "<a href=\"http://www.facebook.com/profile.php?id=".$aData->from->id."\" >".$aData->from->name."</a>";
$user[$i]['msg'] = $message = $aData->message;
$created = $aData->created_time;
$createdtime = date('Y-m-d h:i:s', strtotime($created));
$now = date('Y-m-d h:i:s', time());
$user[$i]['ago'] = $difference = get_time_difference($createdtime, $now);
$html = "<div style=\"background-color:#F9F9F9;color:#000000;height:auto;width:500px;\">";
$html .= $from.": ".$message;
$html .= "<font size=\"1\"> ".$created."</font>";
$html .= "<hr style=\"border-style:dotted; border-color:#6D84B4\"/>";
$html .= "</div>";
echo $html;
$i++;
}
function get_time_difference($start, $end){
$tempstart1 = explode('-',$start);
$startyr = $tempstart1[0];
$startmon = $tempstart1[1];
$tempstart2 = explode(' ',$tempstart1[2]);
$startday = $tempstart2[0];
$tempstart3 = explode(':',$tempstart2[1]);
$starthr = $tempstart3[0];
$startmin = $tempstart3[1];
$startsec = $tempstart3[2];
$tempend1 = explode('-',$end);
$endyr = $tempend1[0];
$endmon = $tempend1[1];
$tempend2 = explode(' ',$tempend1[2]);
$endday = $tempend2[0];
$tempend3 = explode(':',$tempend2[1]);
$endhr = $tempend3[0];
$endmin = $tempend3[1];
$endsec = $tempend3[2];
$start1 = mktime($starthr, $startmin, $startsec, $startmon, $startday, $startyr);
$end1 = mktime($endhr, $endmin, $endsec, $endmon, $endday, $endyr);
$dateDiff = $end1 - $start1;
$fullDays = floor($dateDiff/(60*60*24));
$fullHours = floor(($dateDiff-($fullDays*60*60*24))/(60*60));
$fullMinutes = floor(($dateDiff-($fullDays*60*60*24)-($fullHours*60*60))/60);
$ret = "";
if($fullDays > 0){
$ret .= "$fullDays Days ";
}
if($fullHours > 0){
$ret .= "$fullHours Hours ";
}
if($fullMinutes > 0){
$ret .= "$fullMinutes Minutes ";
}
if($ret!= ''){
$ret .= "ago";
} else {
$ret .= "A Few Moments ago";
}
return $ret;
}
?> [9] so the final out put will be as the following screenshot -
So we will be back soon with posting to wall steps. ;-)
- Sent (0)
- New
Save up to 630$ when buy new iPhone 15
GateIO.gomymobi.com
Free Airdrops to Claim, Share Up to $150,000 per Project
https://tooly.win
Open tool hub for free to use by any one for every one with hundreds of tools
chatGPTaz.com, chatGPT4.win, chatGPT2.fun, re-chatGPT.com
Talk to ChatGPT by your mother language
Dall-E-OpenAI.com
Generate creative images automatically with AI
AIVideo-App.com
Render creative video automatically with AI
Cool Domains for Sale!
Author:
Previews:
Comment:
Votes:
Sent:
Size:
Rank:
Inverting Things [more]
48,501
1
3
0
25.91 KBytes
3 votes / 48,501 previews / 1 comment
15/03/2011
This JavaScript article tutorial provide us many helpful experiences to develop Facebook applications with JavaScript AP...JavaScript Experiments of Facebook SDK with Graph API - JavaScript Experiments of Facebook SDK with Graph API
Reply