July 2010
33 posts
I don’t think I’ve ever read an article dissuading businesses from using social media. It’s fast becoming standard practice to strategize around one or more social media platforms and the advantages of embracing this form of advertising generally outweigh the disadvantages. But what do you do if the product your trying to sell is universally disliked? How do you use social media platforms to promote a product you know everyone is going to hate?
That’s the thing about social platforms. Rejection is instant, swift and brutal. Online communities don’t necessarily need a dislike button to tell you how much they hate your product. They comment, retweet and start their own “anti” fan pages that will destroy any efforts you make to stay the course.
If you don’t know your product is crap and you start advertising on social platforms then the negative feedback you receive can end up being quite constructive. At least now you have the opportunity to go back and rethink your product. But what if you work for a big company, one that has had success promoting its products on social platforms before and is keen to replicate the same results? How to you devise a social media strategy that helps sell the product?
If your product is a movie for example, one that is getting negative reviews that could severely impact ticket sales, what do you do? Abandon a social media campaign altogether or censor the things being said?
The danger of not participating at all in social networks is that you lose the chance to counter the tide of negativity by highlighting the positives. If the reviews are in and the general consensus is that the movie sucks, then you need to be active in promoting good reviews and the opinions of people who liked the movie.
The danger of participating in social networks and controlling negative comments is that you’re going against the very nature of the platform itself. Social platforms work because of the relative quality of user-generated content and the freedom to share with others, without fear of censorship. It’s more likely that if you choose to participate but delete all negative responses then that action could spark an “anti crusade” by hardcore fans. Think “The Last Airbender” and you’ll know what I’m talking about.
The third consideration is whether the disdain being leveled against your product is actually deserved. What if there’s just one or two vocal fans throwing a swell of negativity in your direction? What do you do then?
I don’t believe in doing something just because you can, but on this topic my thoughts are divided. Personally I can’t condone social censorship but I can understand the desire to protect your business. If you end up spending half the day deleting negative comments (from a variety of different users) then it’s just not worth it. You don’t have a time machine, you can’t go back and pick someone other than M. Night Shyamalan to direct your movie. Instead focus on promoting the good points. Maybe the movie had an awesome soundtrack? Head over to MySpace and promote that instead. Launch a social game to help promote the movie but whatever you do, don’t disrespect users by reaching for the delete button.
Tutorial: How to make custom Facebook tabs. Customizing your Facebook fan page is really quite easy, once you know… http://fb.me/CUqs6z6G
RT @UQEnterprize: With 1 day til entries close for #UQEnterprize check out these 10 inspiring TED Talks for start-ups (via @rww) http:// …
Video Promo: It’s tough for an upstart band to make it big, and since all you young musicians are in roughly the… http://fb.me/Evc1asml
Welcome to the first in a series of practical tutorials designed to help you understand web based products a little better and hopefully give you the skills you need to integrate them into your day to day business. I’m going to kick off with a detailed look at Static FBML. Before we begin I recommend you having an application like Text Edit, or Text Wrangler open, we’re going to be cutting and pasting code in this tutorial and it’s always handy to have one open so you can go back to something when you need it. If you don’t have Text Edit, Word will work fine, it’s just a little bulkier than you really need.
So what is Static FBML? Well Static FBML is “Static Facebook Markup Language”. It’s the application you need to make your own custom tabs on Facebook. Over the last few months I’ve noticed lots of little FBML businesses popping up all over the place offering to do it for you, in return for a small fee. I think adding custom features to your Facebook fan page or profile is pretty easy so I don’t think it’s fair to be charging people for something that they can really do themselves, with a little know-how. At Moore Film I wrap up the cost of fan page customization with all our standard web design packages. I also like to run through this tutorial with my clients at the end of a project so they have the resources they need to make changes if they want or even add pages in the future.
Adding Static FBML to a Fan PageBefore creating any web page you need to have an idea of what the final page is going to look like. There are certain limitations with working with FBML which you need to be aware of. You can’t go absolutely crazy with the space you have but you can definitely create something that functions well and looks good. When I design something in Static FBML I approach it like a poster design, one that will eventually end up in lots of little smaller pieces.
Make sure you have all your buttons, backgrounds and text pre designed. I find it easiest to create one full document in Photoshop then create and save the button elements separately. Once you’ve got all that ready to go your first stop will of course be Facebook. If you haven’t made your fan page yet do so now.
Once you’re logged in:
- Search for the “Static FBML” application – the one with almost 70m monthly users.
- Click on the “Add to my page” button
- Visit your fan page
- Click on the “Edit page” button under your logo
- Find the FBML application then click on it – this will take you to an empty page.
Now the biggest thing you need to get your head around when designing in Static FBML is the code. Don’t let this scare you off! You’ll only need to know three paragraphs of code to design a basic welcome tab.
The first thing I’m going to do is add a background image to our welcome tab. Before adding any code in the FBML box, you need to visit your media library. I use the media library attached to my WordPress blog to upload images. If you don’t have access to a media library, register with Photobucket or something similar and upload the jpg image you want to use as your background there instead.
- Once you’ve uploaded the image, copy the URL at the bottom or if you’re using Photobucket copy the direct link URL.
- Paste this URL into the Text Edit page you opened earlier, we’ll go back to it when we’re ready.
- Next, repeat the process with all your buttons.
Now that all our images have been uploaded we can go back to our new FBML page on Facebook and begin assembling our page.
Assembling Your FBML PageThe first piece of code I’m going to use is for the background. You can use this piece of code over and over again – all you need to do is change two links. The key to reading code is knowing what to look for. In order to change the background we need to replace the information inside the brackets with the URL we got from Photobucket or from our Blog media library.
<div id=”app0000000000_bgImage” style=”border:none; position:fixed; left:0; top:0; width: 755px; height: 720px; background-image:url(INSERTURLHERE); background-repeat:no-repeat; background-position:top”>
Once you’ve pasted the new URL into the brackets, take a quick look at the width and height. Facebook are meant to be reducing the width of FBML pages pretty soon to a maximum of 520 px. At the moment I use 720, but if you want to future proof your page it’s best not to exceed 520. So, change the width to 520 and make the height whatever you like. To avoid your background image looking squashed, particularly if it has text written on it, make sure you follow these parameters when first creating the background image in Photoshop.
Next we’re going to introduce our social network buttons. For this you’ll need another basic code:
<a href=”INSERTLINKURL” target=”_blank”><img src=”INSERTIMAGEURL” border=”0″ alt=”Photobucket”></a>
Paste this underneath the background info. Because we want the button to link to another webpage we’re going to be adding two different URL’s. The first URL should contain the link information and the second URL should contain the image address that you got from your Blog or Photobucket upoad.
For example, if you’re adding a button that links to twitter, the first URL will be:
http://www.twitter.com/yourtwitteruserID
If you wanted to include an email button instead, use the following code in place of the first URL.
mailto:youremailaddress
The second will be the URL from the media library in your Blog. Once you’ve added both URL’s you need to save and check the page.
What you’ll most likely see is a button that doesn’t quite sit in the place you want it to. This is easily fixed. All we need to do is go back to your FBML page and make a few adjustments. Insert the following code AFTER the background code and play around with the horizontal and vertical alignment. Change the “right” option to be “left” or “middle” and change the horizontal to be “top” or “bottom” and see what happens.
<div align=”center” valign=”right“>
<div align=”center” valign=”left“>
If the positioning is close but not quite right, try adding:
<br>
If you add this break code just after the background info then all your buttons will be nudged down the page a little at a time. You can repeat this code as many times as you need to until the button is sitting where you want it. Place the break code in between buttons if you want to add some space there also.
Adding a Video File to your FBML PageThe last thing I want to show you is how to insert a video file into your custom tab. All you need to embed a video file is a simple piece of code that has been specifically developed to work on Static FBML pages. If I wanted to embed a Youtube video for example I’d grab this code:
<fb:swf
swfbgcolor=”000000″
imgstyle=”border-width:3px; border-color:white;”
swfsrc=’INSERTVIDEOEMBEDLINK‘
imgsrc=’INSERTIMAGEURL‘ width=’746′ height=’413′/>” alt=”Photobucket”></a>
Just like we did with the social icons, we need to replace two URL’s. The first URL sits inside the first sets of quotation marks. This is the URL that Youtube or Vimeo gives you when you click on the embed option at the website.
The only limiting thing about embedding video content in a Static FBML page is that Facebook have a “click to view” policy. This means that you can’t just pop a piece of video content on the page without first covering it with an image that the viewer can click on. When someone clicks on the image it activates the video and makes it work.
So the second URL we need to replace needs to link to an image that can be placed over the video player. I tend to replicate the look of the video player and place that over the top but you can really use whatever like. To get the necessary URL you need to do what you did with the other images and upload the image to your media library or upload it to Photobucket and grab the URL they give you below the image.
Once you’ve done this you need to start playing around with where the video will display on the page, using the <br> break code and <div align> codes I showed you earlier.
There are many advanced features you can use in Static FBML pages, like embedding a Twitter feed etc but they’re a little more technical. Hopefully this tutorial has given you enough information to start sprucing up your own pages.
Any questions, leave us a message
![]()
Further Resources:
Check out 5 Killer Facebook Fan Pages
Read FBML Essentials By Jesse Stay