Apr
30
2011

 

As explained in the previous article, you can post to user walls with or without dialog. Which method to use depends on your need. If you want user to enter a message, then you need the dialog. At other times, you might want predefined messages so why bother prompting the user? (Note that Facebook has some policies of what you can set in the message field, read about it here: http://developers.facebook.com/docs/reference/dialogs/feed/.)

 
Let’s walk through an example…

Here’s a swf that I want to post, which I have uploaded to my site located at http://www.permadi.com/sampleSWF/FlashMovieSample.swf.

 

I also have a static image to display as thumbnail at http://www.permadi.com/tutorial/facebook-js-graph-api-post-to-wall/image.png.
.

Why the thumbnail? A thumbnail is required by Facebook — you can’t just post swf, it has to have a static image for the ‘paused’ state.

 
Here’s how to embed them:

Without Dialog

This can be done using FB.api by invoking userId/feed call, where userId is the numeric id of the target user (the target is most likely a friend of the current user).

[c]
FB.api('/me/feed', 'post', data, onPostToWallCompletedCallback);
[/c]

You can also use me as user id to to post to the user’s own wall. The source parameter should bet set to the full URL of the swf. The picture parameter should bet set to a full URL of a static image version of the swf.

Using my swf and thumbnail above, here’s how I would post them to my wall (I am using descriptive text so you can see where they are displayed on the wall):

[c]
function postToWallUsingFBApi()
{
	var data=
	{
		message: "Posting SWF using FB.api",
		display: 'iframe',
		caption: "Caption Field",
		name: "Name",  
		picture: 'http://www.permadi.com/tutorial/facebook-js-graph-api-post-to-wall/image.png',  
		source: 'http://www.permadi.com/sampleSWF/FlashMovieSample.swf',  
		link: "http://www.permadi.com/",  // Go here if user click the picture
		description: "Description field",
		actions: [{ name: 'action_links text!', link: 'http://www.permadi.com' }],			
	}
	FB.api('/me/feed', 'post', data, onPostToWallCompleted);
}

// The id of the post will be in response.post_id
function onPostToWallCompleted(response)
{
	// Just show error message if there's an error
	if (response)
	{
		if (response.id)
		{
			alert("Posted as "+response.post_id);
		}
		else
		{
			alert("Error");
		}
	}
	// user cancelled
}
[/c]

You can read the Facebook ReferenceĀ at http://developers.facebook.com/docs/reference/api/post/#publishing.

 
Remember to use full URLs for the source and picture parameters. You do not need to specify the dimensions of the swf.

With Dialog

You can show a feed dialog by using FB.ui method as described here: http://developers.facebook.com/docs/reference/dialogs/feed/ .

 
Set the method parameter set to stream.publish. The filename of the swf goes to the picture parameter. The display_options for the display parameter can be either ‘iframe’, or ‘popup’. The default is ‘iframe’.

 
Most of the parameters are well explained in the linked Facebook documentation, but there are some gotchas that I will list later. One important thing to mention now is that you must include the picture field even if you only want to post the swf, otherwise you might get this error: “flash objects must have the ‘swfsrc’ and ‘imgsrc’ attributes”. The picture will be used as a preview-frame which user can click to play the swf (see elsewhere below for screenshots). If you’re posting to friend’s wall, use to parameter with that friend’s user id, as described here: http://developers.facebook.com/docs/reference/dialogs/feed/.

 
Let’s see an example now, using the SWF and thumbnail image that I have mentioned previously:

[c]
function postToWallUsingFBUi()
{	
	var data=
	{
		method: 'stream.publish',  
		message: "Posting SWF using FB.ui.",
		display: 'iframe',
		caption: "Caption field",
		name: "Name field",
		picture: 'http://www.permadi.com/tutorial/facebook-js-graph-api-post-to-wall/image.png',   
		source: 'http://www.permadi.com/tutorial/facebook-js-graph-api-post-to-wall/FlashMovieSample.swf', 	
		link: "http://www.permadi.com/",  // Go here if user click the picture
		description: "Description field",
		actions: [{ name: 'action_links text!', link: 'http://www.permadi.com' }],			
	}
	FB.ui(data, onPostToWallCompleted);
}

// The id of the post will be in response.post_id
function onPostToWallCompleted(response)
{
	// Just show error message if there's an error
	if (response)
	{
		if (response.id)
		{
			alert("Posted as "+response.post_id);
		}
		else
		{
			alert("Error");
		}
	}
	// user cancelled
}
[/c]

This is how the dialog will look like:

The result looks like this (the thumbnail picture is displayed, waiting for user to click it):

And if user clicks on the picture, the swf will expand and play:

Notes

  • SWF cannot autoplay no matter what you do. User has to click on the image (which is set with the picture parameter) to start the swf.
  • Facebook knows the dimensions of the swf even if you do not specify it.
  • The picture field will be used to display static representation of the swf.
  • Facebook has some policies of what you can set in the message field, read about it here: http://developers.facebook.com/docs/reference/dialogs/feed/
  • The picture and source variable must contain full url (including the http:// part), not relative url.
  • Facebook will cache your picture and any resource you specify in the source parameter. Therefore, you might notice that if you alter the image or resource without changing the filename, you will not see the changes on new posts immediately. I don’t know how often the cache is refreshed but in my experience, the cache expires in hours, not days.
  • You can force a refresh by adding a dummy query string at the end of the url. For instance if I changed the image at http://www.permadi.com/tutorial/facebook-js-graph-api-post-to-wall/permadi.png (which is referred in the examples above) and I want to see the result in new posts, then either rename permadi.png to something else, or add a dummy query string such as http://www.permadi.com/tutorial/facebook-js-graph-api-post-to-wall/permadi.png?someRandomNumber.
  • Another effect to the above is that if you delete the referenced resource from the URL, the resource will also be missing on the posts that are already existing once the Facebook cache expired t(he post will still be there, but the resources will be blank).

    SWF Coding Gotchas

  • Do not use relative when referring to external assets in your swf. Any external file loaded by the swf (after it’s posted on Facebook wall) must contain full URL and you will most likely need to add crossdomain.xml to your site so that those assets are accessible by Facebook domain. For example, instead of doing:
    [c]
    loader.load("sub_movie.swf");
    [/c]
    

    Do this:

    [c]
    loader.load("http://www.mysiteexample.com/myswflocation/sub_movie.swf");
    [/c]
    
  • You can pass parameters to swf if necessary via query string in the source parameter, like:
    [c]
    source:"http://example.com/myswf.swf?name=permadi&score=90"
    [/c]
    

    Example

    You can view the source of the example here:
    http://www.permadi.com/tutorial/facebook-js-graph-api-post-to-wall/index3.html. You need to change the APP_ID to use the example in your app.

    7 Responses to “Javascript Facebook Graph API: Posting SWF To Wall/Feed”

    1. Can the swf get who click the image to display?

    2. As far as I know, you can’t do that in a wall post.

    3. How can i specify the dimension of the flash file in my wall when i post to the wall ?

    4. Did anyone know how to tag friend on post via graph api?
      I recently used @[id:0:name] but it seems doesn’t work anymore.

      any idea? ^thnks

    5. use url linter to update facebook’s cache whenever you load in new images:

      http://developers.facebook.com/tools/debug

    6. You don’t need to specify the dimensions, because Facebook will have to scale the SWF to fit their wall ‘frame’ dimensions.

    7. Hi!

      Can someone help me how to set up my Facebook APP to make this work? I keep getting this error:

      API Error Code: 191
      API Error Description: The specified URL is not owned by the application
      Error Message: redirect_uri is not owned by the application.

    Leave a Reply

    *