Self Debugging
The greatest of faults is to be conscious of none — Thomas Carlyle
Facebook Connect Demo
Update: I removed the widget from the right side column because Facebook Connect still has bugs and it didn’t work for all users. Instead, here is an image of how the widget would look like live on the blog.
This is a demo I wrote for the Facebook Meetup on Sept. 29th. Unfortunately I didn’t get the chance to show it, so I’m posting it here for anyone interested in seeing a sample use of Facebook Connect on a blog.
The demo is a widget you add to your blog to allow your readers to become fans. It stores the data on the Facebook datastore, and therefore doesn’t require a database on your server. It consists of a simple HTML/Javascript widget to put on your blog, and a few php files to put on your server to handle communication with the Facebook APIs.
Here I’ll explain how I did this so you can try it yourself.
1. First, I created a Facebook Application called “SelfDebugging”, and I set the callback URL to the root of my blog: http://www.selfdebugging.com . I didn’t change any other setting.
2. I uploaded the xd_receiver.htm file to the root of my blog. For more information about this check out Trying out Facebook Connect on the developers wiki.
3. I uploaded the Facebook php client libraries to my blog URL in a folder named “facebook” right under the root. You can get the latest version of the libraries from here.
So far everything is just standard code for any Facebook Connect application. The next steps will be the custom code.
4. I created a fans.php file on the root of my blog. Here is the source code:
<?php
include_once 'facebook/facebook.php';
$fb = new Facebook("6795b8c55abfd31bce6d52f2495a92d7", "217e26e2e1a6bde7ec90865ac8a53dfc");
$user = $fb->get_loggedin_user();
if (isset($_REQUEST["addfan"])) {
$result = array("uid" => $user);
$objectId = $fb->api_client->data_createObject("blogfan", $result);
$fb->api_client->data_setAssociation("isblogfan", 1, $objectId);
echo "thank you";
}
elseif (isset($_REQUEST["getfans"])) {
if (!$result = $fb->api_client->data_getAssociatedObjects('isblogfan', 1, true)){
$result = array();
}
$all_fans = array();
foreach ($result as $objid) {
$all_fans[] = $objid['id2'];
}
if ($all_fans) {
$result = $fb->api_client->data_getObjects($all_fans);
foreach ($result as $fan){
echo '<fb:profile-pic uid="' . $fan[2] . '" size="thumb" facebook-logo="true">‘;
}
}
}
?>
5. I created a text widget in Wordpress (the one you see on the right side) and put this code in:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>Facebook Connect Demo</title>
</head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js">
<script src=”http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php” type=”text/javascript”></script>
<script type=”text/javascript”>
function initConnect()
{
FB_RequireFeatures([”XFBML”], function(){
FB.Facebook.init(”6795b8c55abfd31bce6d52f2495a92d7″, “xd_receiver.htm”, {doNotUseCachedConnectState: false});
});
}
function getFans()
{
$(”#fans”).load(”fans.php?getfans=1″, “”, initConnect);
}
function becomeFan()
{
FB.Connect.requireSession();
FB.Facebook.get_sessionState().waitUntilReady(function(){
//alert(”You’re uid = ” + FB.Facebook.apiClient.get_session().uid);
$(”#result”).load(”fans.php?addfan=1″);
});
}
</script>
<style>
#fans { width:180px; }
#fans img { margin:5px; }
</style>
<h2>Blog Fans</h2>
<div id=’fans’></div>
<div id=’result’></div>
<input type=”button” onclick=”becomeFan();” value=”Become a fan” /><br />
<script type=”text/javascript”>
getFans();
</script>
</body>
</html>
One Response to “Facebook Connect Demo”
Leave a Reply
 |
My name is Waleed Abdulla. I'm an entrepreneur and software engineer. Working on my new Internet startup and enjoying the long hours in Redwood City, CA. You can reach me at: waleed at ninua dot com
My Projects
A social community around blogs.
Emerging technologies news.
Forums and social news for micro-communities.
Ziizo.com
Online bookmarking and productivity tool for private bookmarking and note taking.
XRules
An XML business rules language I wrote (Open Source)
А вы знаете, что свой ресурс можно продвигать статьями не только у себя на блоге, а ещё и публикуя их в специальных каталогах? Зайдите ко мне и посмотрите как это уже делают другие вебмастера. Напишите свою статью (можно взять за основу любой пост из этого блога) со ссылками и добавьте ко мне в каталог статей. ССылка на каталог у вас есть, ещё раз её указывать здесь не буду, ибо нет смысла. Регистрация по каталогам отмирает, ну или по крайней мере сдаёт свои позиции, а вот продвижение статьями набирает обороты.