Tag Archives: FBML

Feb200915

Hasin Hayder

11

embedding google map in canvas


ever tried to embed static google map in your facebook application canvas? wait a bit, i think you are firing a question at me “whats the difference, its all the same, a static image, eh?” – nope! it wont work the way you think . whenever you try to embed a static google map image, google parse it as a “Bad Or Malformed” request and returns nothing! and in canvas url you can’t directly import any javascript but fbjs. so all we have to do is embed google map using a <fb:iframe /> object

enough said, lets see it in action. first try to embed a google static map in regular way and see the result. 


<php
include_once("config.php");
?>
Here is the map of Dhaka <br/>
<img src='http://maps.google.com/staticmap?center=23.70991,90.407&amp;amp;zoom=14&amp;amp;size=400x300&amp;amp;key=<api_key>=23.7099,90.407,green' /> <br/>
Pretty cool, ya?

output is 


Here is the map of Dhaka
Pretty cool, ya?

you will be surprised that this code will render only the texts and no image in your application canvas, though the image url is fully valid.

now here is the revised version using <fb:iframe />


<?php
include("config.php");
?>
Here is the map of Dhaka <br/>
<fb:iframe width='400' height='300' style='border:0' frameborder='0' src='http://sandbox.ofhas.in/fbtest/map.php?lat=23.7099&amp;amp;lon=90.407' ></fb:iframe>
<br/>
Pretty cool, eh?

we are using a map generator (map.php) using the latitude and longitude of a specific location, as the source of our iframe. so here is the source code of map.php


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example: Map Markers</title>
    <script src="http://maps.google.com/maps?file=api&amp;amp;v=2&amp;amp;key=<api_key>"
            type="text/javascript"></script>
    <script type="text/javascript">

    function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(<?=$_GET['lat'];?>, <?=$_GET['lon'];?>), 13);

          var point = new GLatLng(<?=$_GET['lat'];?>, <?=$_GET['lon'];?>);
          map.addOverlay(new GMarker(point));
      }
    }

    </script>
  </head>

  <body onload="initialize()" onunload="GUnload()" style='margin:auto;padding:0px;>
    <div id="map_canvas" style="width: 398px; height: 298px;margin:10 0;border:1px solid #ccc;"></div>
  </body>
</html>

this time output is pretty cool :) have a look

picture-18

so this is it! in our next article we are coming with the complete source code of a standalone twitter like application, developed using FBConnect to allow you to monitor your friend’s status and also to change yours. stay tuned :)


Feb200910

Hasin Hayder

8

displaying a “friend selector” in FBConnect application – a custom component for you

ok, i have learned my lesson while integrating <fb:multi-friend-selector [condensed] /> and <fb:multi-friend-input /> in an iFrame app where i was rying to render it uwing <fb:serverfbml>. i was designing a page where users of your application can select an item, then some of their friends and finally submit the form to the handler script (might be javascript routine too!)

as <fb:serverfbml /> renders the <fb:request-form /> inside another iframe (thats right – iframe inside an iframe) so its quite tough job to pass external data to any of the DOM element inside those iframe. later, i tried to dynamically render the <fb:serverfbml /> with the help of AJAX and XFBML.parseDOMTree() but no luck. the surprising fact that everything out there was renedring properly but not the request form (when returned via ajax). so finally i did it with FQL and by building a custom friend selector component. so here it is


<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Custom Friend Selector</title>
</head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<body>
<fb:login-button></fb:login-button><br/><br/>
Hello <span id="me" uid="503274632" useyou='false'></span> And here is your friend list<br/>

<div id="friends"></div>
</body>
</html>
<script type="text/javascript"> 

function loadFriends(uid) {

    FB.XFBML.Host.autoParseDomTree = false;
    FB.XFBML.Host.addElement(new FB.XFBML.Name(document.getElementById("me")));

    FB_RequireFeatures(["CanvasUtil"], function(){  FB.CanvasClient.startTimerToSizeToContent(); });
    var api = FB.Facebook.apiClient;
    api.fql_query("SELECT uid, first_name, last_name FROM user WHERE  uid IN (SELECT uid2 FROM friend WHERE uid1 = "+uid+") order by first_name", function(result, ex) {

        data = "<table>";
        for (i=0;i<result.length;i++)
        {
            data += "<tr><td><input type='checkbox' value='"+result[i].uid+"' name='friends[]' id = 'friend"+result[i].uid+"' /></td><td>"+ result[i].first_name + " " + result[i].last_name+"</td></tr>";
        }
        data +="</table>";
        $('#friends').css({"overflow-y":"scroll","height":"200px","width":"300px","border":"1px solid #ccc"});
        $('#friends').html( data);

    });
}

FB.init("api_key", "xd_receiver.php",{"ifUserConnected":loadFriends});

</script>

and here is how it looks,

picture-151

you will find it useful in your FBConnect applications :)

Feb200902

Hasin Hayder

18

publishing on your friend’s mini feed (no session key)

the way superpokey or other applications do this, first they ask you to select some friends from your friends list, then they ask you to publish on their wall. at this stage a popup dialog opens up and asks if you really want to publish that story on your friend’s wall. if you agree, the news goes straight to your friend’s wall.

so how do they do it? you know the publishActionOfUser() actually publish feed’s on your wall, but there’s no guaranty if the news will go to your friend’s news section. so to do this, you have to use feedStoryForm. this form was introduced in facebook old profile, but comes in a new flavor when the profile section is completely redesigned by facebook. feedForms are used to publish news on user’s mini feed as well as his/her friend’s wall. but it always asks the user to authorize the publishing of news first. lets see how it actually works

step 1: register feed template
first, you have to register a feed bundle for your application. later we will use that feed bundle for publishing stories. so lets open feed console and select your application. feed console is accessible at http://developers.facebook.com/tools.php?feed

picture-4

now click on next. in the next screen you have to input a one line feed template. to check if you template is valid, you can also input sample data to pass to this template as “template data” which is infact a valid json object. lets do this

one line feed story

note one thing that to share a feed with friends, you must put {*target*} token in the one line feed templates.

our one line feed template is: {*actor*} is publishing some news about {*subject*} on friends wall and he wants to share it with {*target*}
parameters are: {”subject”:”fishing”}

now click on next to create short story template.
short story template

short story title template: {*actor*} is sharing some news about {*subject*} with {*target*}
short story body template: {*content*}

params: {”subject”:”fishing”, “content”:”The fishing goes superb in this sunny weather”}

now click on the “Update Preview” to check the validity of our short story feed. If it’s valid, lets proceed to next step of “Full Story Template” by clicking next. both short story and full story feeds are optional. this time we will skip full story template. so on the next screen just click “skip” and proceed to final screen.

now we are on the final screen of “Creating Action Link”. lets understand what is action link. check the following picture for details of our parameters and how it will appear on your friends wall.

action link

ok, we are done – now click on next and on the following screen click on “Register Template Bundle”, a popup dialog box will confirm you that the feed has been created and it will also show you the id of this feedbundle. note that id.

feed bundle id

step 2: include the feedStoryForm in your application
as we have our feed bundle registered, now it’s time to go into action. lets include the feed form in our application. here’s the code


<?php

require_once 'config.php';

// Greet the currently logged-in user!
echo "<p>Hello, <fb:name uid=\"{$uid}\" useyou=\"false\" />, Its story time</p>";
?>
<form method="post"
          fbtype='multiFeedStory'
          action='http://sandbox.ofhas.in/fbtest/feedstory.php'>   

	<b>What's it all about?</b><br/>
           <input size="50" type="text" name="subject" id="subject" value="" /><br/>
           <b>Ok! tell your friends more about this</b><br/>
	<textarea cols="50" rows="8"  name="content" id="content" ></textarea><br/>
	<b>Thats cool, so whom do you want to inform about it?</b>
	<div style="margin:10px 0 10px 0">
		<fb:multi-friend-selector condensed="true" />
	</div>
	<input type="submit" value="Publish News" label="Publish News" >

</form>
<script>
function shareDone()
{
     new Dialog().showMessage("Info","Successfully shared your news with your friends");
}
</script>

output will be something like this

output

the config.php just initiated the facebook object, so nothing to mention about that. but now we have to code the handler of the feed story request that facebook will make when your users will hit the “Publish News” button.

step 3: feed story handler
this file will be invoked internally by facebook over http. in this file you have to process the parameters of yoru feed form and return a valid response to facebook as a json object so that facebook can proceed further to publish your user’s news. lets see how it works – here’s the code


<?php
$subject = $_REQUEST['subject'];
$content = $_REQUEST['content'];
$actionsubject= $subject;
?>
{"content": {"next_fbjs":"shareDone();",
                   "feed": {"template_id":48644843809,
                                "template_data": {"subject":"<?=$subject;?>",
                                                            "content":"<?=$content;?>",
                                                            "actionsubject":"<?=$actionsubject;?>"} } },
 "method":"multiFeedStory" }

So we are done!

now when user’s will click on “Publish News” button after selleting friends, he will see a dialog box pops up for the authorization to publish the news – like this

picture-15

user can select whether he wants to publish “short” or “one” line feed story. remember we had skipped the full story template? if we created full story template, user will get another option like “full” in this dialog box. so when this dialog box pops up, user will have to click “Publish” to publish the story.

check out the published feed on your friend’s wall
picture-16

let us know your comment if you like our article. we are coming with new recipe soon.