Adding App Studio Widgets to your Facebook Page

From KickApps Documentation

For a long time, we have enabled KickApps publishers to create highly engaging social widgets with drag and drop ease in the App Studio.

Now, you can publish these widgets directly to your Facebook Fan Pages, so that your audience can have the same social experience at your domain, or within Facebook. The same look and feel, same members, same content.

Once a KickApps widget is embedded, updating your Facebook Fan Page is as easy as editing your widget in the App Studio's WYSIWYG (What You See Is What You Get) editor. Follow this link for more information, from getting started, to detailed instructions on building social widgets in the KickApps App Studio: Widget & Video Player Studio .

When you've got a widget to embed, follow the directions below to learn how to embed KickApps social widgets into your Facebook Fan Page.

Examples

See KickApps'"Customers" tab on our Facebook page at KickApps Customers tab for an example.

See KickApps'"Careers" tab on our Facebook page at Careers tab for an example.

Adding a widget to a Facebook page

1. Go to FaceBook’s page administration page and choose a page to edit.
2. You need to add the “Static FBML” application to your page. At the bottom of the edit page, you’ll see a link to add that application. Or you can go directly to the “Static FBML” application link and click the “Add to my Page” link.
3. Now that the FBML application is added to your page, you can go to your Page’s “Edit Page” and click on Apps > FBML > Go to App.

Click the edit link to add FBML code in boxes and manage the FBML boxes added to your Page. Snapshot below.

1. To add an App Studio widget into an FBML box, use the following code template and replace XXXXX with the AS# or WidgetID#.
   

CODE

<fb:swf
swfsrc='http://serve.a-widget.com/kickFlash/KickShell.swf?referralUrl=&widgetHost=serve.a-widget.com&buildVersion=6.10.10&affiliateSiteId=XXXXX&widgetId=XXXXX' imgsrc='http://media.kickstatic.com/kickapps/images/XXXXX/photos/WIDGET_ XXXXX_ap.jpg' width='1000' height='703' />
</code><br />Sample Code 1<br /><code html4strict><fb:swf
swfsrc='http://serve.a-widget.com/kickFlash/KickShell.swf?referralUrl=&widgetHost=serve.a-widget.com&buildVersion=6.10.10&affiliateSiteId=158501&widgetId=367911' imgsrc='http://media.kickstatic.com/kickapps/images/158501/photos/WIDGET_367911_ap.jpg' width='1000' height='703' /></code><br />You can preview the widget by filling in the AS and widgetID parameters in the following URL:<br /><code html4strict>http://serve.a-widget.com/kickFlash/previewWidget.html?as=158501&widgetId=367911</code><br />Sample Code 2<br /><code html4strict><fb:swf
swfbgcolor="000000"
swfsrc='http://serve.a-widget.com/kickFlash/KickShell.swf?referralUrl=&widgetHost=serve.a-widget.com&buildVersion=6.10.10&affiliateSiteId=155849&widgetId=362154&width=491&height=350&revision=21' imgsrc='http://media.kickstatic.com/kickapps/images/155849/photos/WIDGET_362154_ap.jpg' width='340' height='270' />

Preview widget link

http://serve.a-widget.com/kickFlash/previewWidget.html?as=155849&widgetId=362154

1. Save.