Fb:fbjs bridge

From Facebook Developer Wiki

Jump to: navigation, search

Contents

Description

Note: The name of this tag is fb:fbjs-bridge (MediaWiki automatically changes the title, removing the hyphen).

Renders a Shockwave Flash (SWF) object that can act as a bridge between other SWFs (registered through fb:swf tags) and FBJS on the page. This bridge facilitates two-way communication between SWFs and FBJS by allowing script access to the bridge, enabling ExternalInterface to the FBJS and using LocalConnections to bridge to the other SWFs. You can also use the bridge to call the API from the ActionScript 3.0 Library for Facebook Platform.

When registered on the page, other SWFs will get an fb_local_connection flashvar sent to them. This is the name of a LocalConnection set up by the bridge SWF that delegates calls to FBJS from the SWF through the callFBJS method. The method name passed to callFBJS gets handled just like an FBJS method name declared in FBML (if it's a Facebook-defined method, it will be called directly, otherwise it will be prepended with the sandbox prefix), so you can use application-defined FBJS methods as well.

The ID attribute on the fb:swf tag is required to set up FBJS to SWF bridging; if supplied, the SWF will get a flashvar fb_fbjs_connection that it should listen to for LocalConnection messages from the bridge. The return of document.createElement('fb:swf') and document.getElementById('my_swf_id') will have the callSWF method that bridges to the SWF.

Note: You can render this tag on application tabs, the Publisher, and profile boxes.

Note: It is very important that you place the <fb:fbjs-bridge/> above the <fb:swf/> tag. Otherwise it will not work.

Examples

FBML

<fb:fbjs-bridge/> <fb:swf swfsrc="FULL_URL_TO_MY_SWF" width="100" height="100"/> <script> <!-- --> </script>


ActionScript 3.0

var connection:LocalConnection = new LocalConnection(); var connectionName:String = LoaderInfo(this.root.loaderInfo).parameters.fb_local_connection; function callFBJS(methodName:String, parameters:Array):void { if (connectionName) { connection.send(connectionName, "callFBJS", methodName, parameters); } } callFBJS("document.setLocation", ["http://someurl"]);


ActionScript 3.0 (Same functionality - no FBJS):

var connection:LocalConnection = new LocalConnection(); var connectionName:String = LoaderInfo(this.root.loaderInfo).parameters.fb_local_connection; function go(url:String):void { if (connectionName) { connection.send(connectionName, "navigateToURL", url); } } go("http://someurl");


ActionScript 2

var connection:LocalConnection = new LocalConnection(); var connectionName:String = _root.fb_local_connection; function callFBJS(methodName:String, parameters:Array):Void { if (connectionName) { connection.send(connectionName, "callFBJS", methodName, parameters); } } callFBJS("document.setLocation", ["http://someurl"]);


FBML

<fb:fbjs_bridge/> <div id="swfContainer"></div> <script> var swf = document.createElement('fb:swf'); swf.setId('my_swf_id'); swf.setWidth('100'); swf.setHeight('100'); swf.setSWFSrc('FULL_URL_TO_MY_SWF'); document.getElementById('swfContainer').appendChild(swf); document.getElementById('my_swf_id').callSWF('asMethod', 'one', 'two'); </script>


ActionScript 3.0

var connection:LocalConnection = new LocalConnection(); var connectionName:String = LoaderInfo(this.root.loaderInfo).parameters.fb_fbjs_connection; connection.allowDomain("apps.facebook.com", "apps.*.facebook.com"); connection.client = { asMethod: function(paramOne:String, paramTwo:String) { // do something in the SWF } }; connection.connect(connectionName);

Notes

  • You MUST have a script tag on the page somewhere
    • The script tags must not be empty or Facebook gets rid of them so use <script><!-- --></script>
  • When calling send() on your local connection, it needs to take 4 parameters: (connectionName, 'callFBJS', methodName, parameters)
    • parameters needs to be an Array.
  • FlashVars passed into the SWF through FBJS are sanitized, so don't use names like "callback" or "onclick" or they will be removed

See Also

  • fb:flv
  • Bug 994 (this information has been extracted from this bug)
  • AS3 FBJS Bridge (open source AS3 implementation to simplify the bridge calls) UPDATED 4/28/2008
Retrieved from "http://wiki.developers.facebook.com/index.php/Fb:fbjs_bridge"
reference