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:
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.
- 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.:
- Upload this to your DecoNetwork website
- Browse to Manage Store > Appearance > Customize Template CSS
- Select the “Select File / Image” button.
- Browse to your Flash landing page in .JPG format and upload it.
- Select the file. This will create a url reference for you to copy:
- 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!