Facebook Connect – send feed dialog to profile
Well it seems I am one for app integration. I am now onto a Facebook app, well, Facebook Connect.
So, lets see how it’s done.
I will show a simple example of how to get a user logged in (I spend more than a few hours trying to find a decent example on the web about this) and then send a feed to your Facebook profile and news feed, thingy.
First look at this video blog by the young(VERY) developers at Facebook.
I watched that and thought great! Look how easy it was. I then couldn’t find ANY actual code from the example. No source code below, no links to a archive. Where was the followup help! I must same the FB API sucks.
So, I will help you, and save you the 5 hours I spent on it.
Setup the xd_receiver.htm
<html xmlns=”http://www.w3.org/1999/xhtml” >
<body>
<script src=”http://static.ak.connect.facebook.com/js/api_lib/v0.4/XdCommReceiver.js” type=”text/javascript”></script>
</body>
</html>
put that into xd_receiver.htm in the root directory of your site (rails, public folder).
Next
<script type=”text/javascript”>
function update_user_is_connected(){
var user_box = document.getElementById(“facebook_login”);
user_box.innerHTML = “<fb:profile-pic uid=”+FB.Connect.get_loggedInUser()+” facebook-logo=true></fb:profile-pic><fb:name uid=”+FB.Connect.get_loggedInUser()+” useyou=false></fb:name>”
FB.XFBML.Host.parseDomTree();
}
function update_user_is_not_connected(){
var user_box = document.getElementById(“facebook_login”);
user_box.innerHTML = “<fb:login-button></fb:login-button>”
FB.XFBML.Host.parseDomTree();
}
FB_RequireFeatures([“XFBML”], function()
{
FB.Facebook.init(“YOUR_API_KEY”, “/xd_receiver.htm”,
{“ifUserConnected”: update_user_is_connected,
“ifUserNotConnected”: update_user_is_not_connected});
FB.Facebook.get_sessionState().waitUntilReady(fb_session_ready);
});
</script>
add that javascript at bottom of your page, IN THE BODY TAG.
NOTE you must replace YOUR_API_KEY with the one you get when you create a new app on Facebook. Click on “Setup New Application”.
And finally
<fb:login-button></fb:login-button>
</div>
put that where you want the login button.
So all that will get you a login button, which will change when you login to your FB profile pic and name. GREAT!
Now lets send a feed dialog to your profile page for all your friends to see!
Go to the tools section in The Facebook Developers site and add a “Feed Template”. Click on “Feed Template Console” and follow the instructions.
This will result in a Feed Bundle Number, which you need.
Once you have that
function send_feed(){
var comment_data = {“images”:[{“src”:”/archive/wetwareconz/images/my_picture.png”, “href”:”/archive/wetwareconz/blog/some_url”}],”something_else”:”a_value”};
FB.Connect.showFeedDialog(YOUR_BUNDLE_NUMBER, comment_data, null, null, null, null);
}
<% if flash[:show_facebook_feed] %>
function fb_session_ready(){
FB.Connect.ifUserConnected(send_feed);
}
<% end %>
</script>
NOTE replace YOUR_BUNDLE_NUMBER with…. you get it.
When you setup your Feed Bundle you might have added custom fields. Above I have included some fake ones to give you an idea how to format them. Replace the appropriate bits for your information you want sent. You should be able to work it out. Also with the images.
Now, the way I have implemented this above works with rails. It will load the Facebook Feed Dialog only when the controller sets the flash[:show_facebook_feed] has been set to true.
But you can fire the function however you want. If you remove the “<% if flash[:show_facebook_feed] %>” and “<% end %>” bits, the FB Feed Dialog will show once the page has loaded.
Related Posts
In: Uncategorized · Tagged with: Facebook, facebook connect, facebook feed dialog, facebook profile feed, Rails
