Adding a DecoNetwork Flash Widget to your Facebook Page

Facebook is a buzz of people and potential buyers so you don’t want to miss out on its potential.

Using the DecoNetwork flash widget you can dynamically display your products in your Facebook fan page allowing your Facebook visitors to browse your products on your Facebook page an ultimately click through to your DecoNetwork site.

This tutorial walks you through the steps to convert the standard DecoNetwork Flask Widget into “Facebook friendly” flash code and embed it on you Facebook Page.

Step 1: Copy your flash code

Log into your DecoNetwork store and select Flash Widget from the Marketing tools menu:

Manage Store > Marketing Tools > Flash Widget.

Essentially we will be throwing away most of the flash code generated on this page but we want to use it to acquire some key pieces that we need.

In the HTML code you will see a value called param followed by a value=”http://…”.

Copy this entire “value” value and it will look something like:

http://www.MyDecoNetworkSite.com/flash/publish/flash.swf?src=http%3A%2F%2Fwww.MyDecoNetworkSite.com%2Fpublish%2Fflashfeed%3Fs%3D0%26t%3D%26sk%3Dmenu_001%26sz%3D1%26bgc%3DFFFFFF%26wid%3D730%26cnt%3D4&bgc=FFFFFF

Make sure you capture the entire value from “ to “.

Copy this code to Notepad for later use.

Step 2: Make a flash banner landing image

Flash objects viewed in Facebook to do not start or load automatically. They need to be clicked by the user therefore you need to make a banner or image that will display initially requesting that the user click to view your products.

  1. Create your banner the same size as your flash banner. By default that is 730px wide by 240 pixels high. The image MUST be a .JPG format image. i.e.:
  2. Upload this to your DecoNetwork website
  3. Browse to Manage Store > Appearance > Customize Template CSS
  4. Select the “Select File / Image” button.
  5. Browse to your Flash landing page in .JPG format and upload it.
  6. Select the file. This will create a url reference for you to copy:
  7. Copy this URL and paste it into Notepad for later use. You will need to add your websites full URL in front such as:http://www.MyDecoNetworkSite.com/uploads/10537673/File/FacebookFlash.jpg

Step 3: Make your Facebook Flash code

Now we have all the elements we need to make our Facebook flash code:

  • DecoNetwork flash object
  • Facebook flash landing banner in JPG format

Facebook requires your code to be formatted a little different to normal Flash embedded code so we need to make some changes. First of all, here is the raw code you will need to use:

<fb:swf
 swfbgcolor="FFFFFF"
 swfsrc='https://www.MyDecoNetworkSite.com/flash/publish/flash.swf?src=http%3A%2F%www.MyDecoNetworkSite.com%2Fpublish%2Fflashfeed%3Fs%3D0%26t%3D%26sk%3Dmenu_001%26sz%3D1%26bgc%3DFFFFFF%26wid%3D730%26cnt%3D4&bgc=FFFFFF'
 imgsrc='https://www.MyDecoNetworkSite.com/uploads/10537673/File/FacebookFlash.jpg’
 width='730'
 height='240' />
 </fb:swf>

I’ll explain what each of these lines do:

swfbgcolor : This defines the background color of the flash file if it is transparent. By default it is white (FFFFFF) but you can use any hexadecimal / HTML color value.

swfsrc : this refers to the source or location of the flash file object to display. This is where you copy the flash code acquired in Step 1.

imgsrc : This refers to the source or location of the flash banner landing image created in Step 2.

width : This is where you define the width of your flash banner.

height : This is where you define the height of your flash banner.

Make sure you insert your Flash object code from step 1 in swfsrc and your flash banner landing image from step 2 in imgsrc.

This has created the flash code you need for Facebook.

Step 4: Insert your Flash Code in Facebook

First of all I am assuming you already have a Facebook page for your company or business. If not make one here: http://www.facebook.com/pages/create.php

Once created browse to your page and click on “Edit Page” from the left menu:

Scroll down the bottom and select “Browse More” under ‘More Applications’:

In the “Search Apps” field type: Static FBML.

Select Static FBML:

Under the app thumbnail select “Add to my Page”.

Choose the Facebook page you want to add the app to:

Click Close when done.

Browse back to your Facebook Page and the quickest way to do that is type the name of your Facebook Page in the Facebook search field. It will pop up while you are typing and just select it.

Click “Edit Page” again and now you will see the Application listed in your list.

Select “Edit” under the title of the Application.

Enter a title in ‘Box Title’. This will be viewable by your Facebook users so make it useful such as “My Tshirt Products”.

Paste in the Flash code we generated above in the ‘FBML’ field:

Click Save Changes when done.

A yellow “Changes saved” confirmation bar pops up confirming the changes are saved.

We now want to ensure this Flash Banner appears as a tab on your Facebook Page so your Facebook visitors can easily find it.

Browse back to the Facebook Page main website and click on the “+” near your page tabs:

Select the Static FBML application you created, in my case called “My Tshirt Products” and this will add the tab to your main page:

When clicked the flash banner will load:

Don’t forget to track your traffic in Google Analytics to see how many of your Facebook visitors are heading in your direction!

Enjoy!

5 Comments
Avatar
Carlo May 25, 2011

Same as Steve... I had used FBML for other pages before, but it seems to be no longer available with the current version of Facebook Pages. Any advice?

Avatar
Brad September 29, 2010

CHECK IT: This is in my sFBML box. It yields nothing. No image.

Avatar
Brad September 29, 2010

Width max is now 520. This must be changed for both the image and the value.

Avatar
Steve Morche June 24, 2010

I can't get the Static FBML App to add to my page. It only allows me to add it to my favorites :-(

Avatar
Bryce June 23, 2010

I tried to add the Static FBML App to my page and can't even get it to show that I have a page created to add it to, where am I going wrong?