Free Download on Facebook

<div>

</object>

</div>

Using Topspin’s email for media widget is a great way to convert Facebook fans into email addresses. This is important to do because most bands I’ve worked with find that an email blast is far more effective way to get clicks than sending a message to Facebook fans.

Here are three ways to get the email for media widget rocking on your Facebook page.

Method 1: Paste the short link

The first method will work for your profile page, fan page and group page. It also has the advantage of being very simple and of showing up in the feeds of people who are following your pages / are friends with you via profile.

Start by going to your email for media widget, and click on the “Share” link, then click on the Facebook Icon. Log into Facebook if you’re not logged in already.

You should now see this screen:

If you just want to post the widget to your profile wall, then just type in your message and click the Share button. But it is more likely that you want to post this to the Wall of your Fan page or Group page.

To do that, just copy the short URL from this screen. In this example the short URL is:

http://t.opsp.in/CBuE

Now exit this page and go to your Facebook fan page and just paste your shortened URL into a Wall post. Facebook will just pull the widget in:

I said easy right?

The only problem with this method is that eventually the Wall post will get pushed down the page and will not be easy to see. So how about getting the email for media permanently on your Fan page wall?

Method 2: Use My Stuff from Gigya

This method is also really easy and requires no coding. The first step is to search for the application My Stuff from Gigya. If you are logged into Facebook, then try clicking here to jump right to their app page.

Now click the link that says “Add to my Page” just below the button Go to Application. The link you want is right at the bottom of this screenshot:

Select the page you want to add in the screen that pops up by clicking the button “Add to Page.” This will close the overlay window and return you to the Gigya app page.

So, now go to your Page and click “Edit Page.” It is the first link below your image on the top left side of the page:On the next page you’ll now see My Stuff in the list of applications. click on “Edit.”

You should now see a box that says: Add Code

Open another browser tab/ window so you can go back to your email for media widget. This time click the <share> button and click the button that says “Copy embed.”

Now you can return to Facebook and paste the widget’s embed code into the Gigya Add Code box.

Your embed code should look something like this:
<div>

</object>

</div>

Now click the “Add to profile” button. Gigya will take 30 seconds or so to “convert” Topsin’s embed code into a form that will look good on your wall.

Once it has finished, you should see the widget. Above the widget should be a link to “Edit Description.” Click that link and edit the description:

Now here comes the only sort of tricky part. The widget has now been added to your “Boxes” tab. But it is not yet on your home page wall.

To get it on your wall, go back to your Fan page and click on the tab “Boxes.” If you don’t see the tab, look for the right most tab that has >> on it and click on the >>. Your boxes tab may be hiding in there.

Once you’re on your boxes tab, you’ll see “My Stuff” with your widget there.

Now all you need to do is click on the pencil icon at the upper right corner and then click “Move to Wall Tab”

And you’re done!

Method 3: Add Freedownload tab using FBML

Method’s 1 and 2 are great as you don’t have to mess with any code and they work fast. But I think the drawback is that with Method 1, you need to keep reposting to your wall and in Method 2, the widget usually ends up so low on the page you need to scroll to see it.

So I like to also make a tab at the top that screams “Free Download” Or maybe something even more enticing: “Bliss Awaits You Here” since we can name the tab whatever we want.

The last warning before we start up is that you need to have a place where you can upload an image. Your blog would work. I’ve never tried with Flickr / Photobucket etc – I just upload the image either via the blog or just by FTP into a folder on my web server.

Step 1 is to go get the Static FBML application and add to your page just as you did with the Gigya.

Step 2 is to paste your widget embed code onto a text file so you can work on it before finally pasting it into your FBML application.

Step 3 is to change your widget embed code from this:

<div>

</object>

</div>

To this:

widget_id=http://cdn.topspin.net/api/v1/artist/30/email_for_media/2469?timestamp=1261071230&theme=black&highlightColor=0xFF0099″swfsrc=’http://cdn.topspin.net/widgets/email2/swf/TSEmailMediaWidget.swf’ imgsrc=’http://dreamtempo.com/images/widget.png‘ width=’300′ height=’80′>

So you are switching out:

flashvars=”widget_id=http://cdn.topspin.net/api/v1/artist/30/email_for_media/2469?timestamp=1261071230″ with the widget_id from your embed code. It’s highlighted in red above.

You should also set your image width and height to be the same as your widget – or just be aware that if this is different then the widget will load and be bigger/smaller than your image.

NOTE if you copy the code above you will likely have to re-type the ‘ and ” characters so they are not “curly.” Also – there are some closing ‘ missing due to coloring the code. Sorry – it’s hard to make a web page display code as text!!

Below, you can download the finished code as a text file and avoid the crazy quotation issue.

The next thing you need to switch out is the location of your image. I highlighted that in green above.

You are going to need to first upload your own image to your own server. I usually take a screen shot of my widget so when it loads into facebook, it looks like the widget but you may want to experiment with something else -as the user must first click the image to load the widget, and then submit their email.

I have heard that this will *not* work if you are using an image location from Topspin. Upload the image to your own server via your FTP or via WordPress and note you will have to use the full location of your image: http://yoursite.com/folders/imagefilename.jpg

You can trouble shoot if you’ve done this right by pasting your image location into your browser. If you don’t see the image, you don’t have the right image location.

Ok, since this widget is going to be appearing on its own tab, I like to also include some additional text, like how a fan can post the free download to their wall.

The facebook Share icon doesn’t quite work as you’d want it to since Facebook is messing up the function a little, so just offer the shortened URL (Method 1) as the way to share.

Click Here to download my final code as a txt file so you don’t get curly quotes and you’ll see what I mean by offering the shortened URL below the widget for fans to share the widget.

Here is what it should look like in Facebook before you publish the app:

Now we’re ALMOST done. The last step is to get the FBML Box/Application to show up in my tabs.

If you don’t have a lot of tabs it may show up for you already. But on my Fan page, I needed to click the tab with the + on it, then select my newly created free music bliss tab:

Once I’ve clicked on Free Music Bliss HERE the tab is added to my main Facebook page, but as the last tab on the right.

To move it over, I just click on it and drag it to the left. Facebook requires that Wall and Info are the first two tabs so now it is the third tab.

So here is what it looks like once the user has clicked the tab:

Let me know via comments if you have any trouble with any of these methods. I’d also love to hear how many fans you’re able to convert into email addresses.

Direct To Fan Works | DTF Works

Free Download on Facebook