[TUT] How To Use Static FBML On Pages

[DJJack]

Hi There, i saw a post on BHW about FBML and decided it would be useful to make it aware to more users by teaching you how to use it. This tool that can be added to pages. Static FBML is an application and an extra add-on for use with pages, when viewing a page there are tabs such as wall, info, this gives you the opportunity to add a custom tab with all your custom coding on, its basically html in there but using some facebook tags from their wiki. This can be used to display linkied images, banners, even full website html code! The limit is 760px wide and the length is not mentionable. So you can use it to add a sales page for products, even embed a product for purchase. Another use is to display CPA links on their for more leads and people can see it easier, basically bringing you further afield from the normal page look. If you continue reading you shall be able to see how this is so:

Firstly you are going to need to search facebook for "Static FBML" and add the application.

Then on the left click add to pages shown in the screenshot below:

Now Click "Add" Next To The Page You Want To Add FBML On.

The next step requires you to go to your page. Now click "edit page" on your page. You will now have to navigate down to the FBML add and click edit, (shown below)

Now You Can Edit Your FBML Code, Here Is A Wiki With Some Examples:

http://lorrainesiew.wordpress.com/2009/07/04/facebook-pages-fbml-examples-part-1/
http://lorrainesiew.wordpress.com/2009/07/09/facebook-pages-fbml-examples-part-2/

You can use most standard HTML but there are a few tags etc that you may need to know, below is something ive edited for one of my pages:

Now If You Look Closely At The Code You Can See The Affiliate Link In There!
You Can Go Back To Edit Page On Your Page & Set The Default Viewing Tab To Your FBML Customised Page. So EVERY Fan Sees It. The one used in the example above is a huge 750x1000 full page advert! This helps me generate more leads.

If there is anything else you want to know please reply to the thread and i will try cover it, also if your looking for more custom code to be used in the static FBML boxes it's only a google away, im sure there are alot more in depth tutorials to add style

Hope that helped anyone that was interested and opened up a new window to some people to help make the most of their page!
Thanks for reading.
~DJJ<3

 

[milestone]

Nice Tutorials. Can help alot of people. I've only ever really had success with FB marketing, so this can really help me. Now, i just need to work out how to get your iframe code to work. Nothing seems to happen when i click the image lol.

 

[DJJack]

Nice Tutorials. Can help alot of people. I've only ever really had success with FB marketing, so this can really help me. Now, i just need to work out how to get your iframe code to work. Nothing seems to happen when i click the image lol.

Are you planning on using the iframe as a profile box or as a tab?
I know you cant use the fb:iframe tag in a profile box, give it a go as a tab.
Have you tried this code?

<fb:iframe src="URL OF IFRAME CONTENT" frameborder="1" height="HEIGHT" width="WIDTH">
</fb:iframe>

 

[milestone]

Yeh, i got it to work in a tab now, is there a way i can change the tab name from BOXES to something else? ... Also, do you have the code for embeding a youtube video into it?.. i cant work out how to do it with the FBML. Thanks.

 

[DJJack]

Yeh, i got it to work in a tab now, is there a way i can change the tab name from BOXES to something else? ... Also, do you have the code for embeding a youtube video into it?.. i cant work out how to do it with the FBML. Thanks.

Congratulations! Yes Press The + Tab And Add Whatever You Called Your Custom Box As A Tab & It Will Display The Custom Name You Gave When Editing.

For A Youtube Video:

<fb:swf
swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"
swfsrc='http://www.youtube.com/v/xxxxxxxxxx'
imgsrc='http://img.youtube.com/vi/xxxxxxxxxx/2.jpg' width='340' height='270' />

Read more: http://www.hyperarts.com/blog/how-to-embed-youtube-videos-flash-facebook-static-fbml-pages/#ixzz0cdWrC2Q3

(Replace The xxxxxxxxxx's with your video id)

 

[milestone]

Thanks Man this is great lol

 

[DJJack]

Thanks Man this is great lol

This is no problem at all, always a pleasure to help out! Let me know if theres any more code i can help you with, either leave it here on the thread or PM me and i will get back to you in the morning, im off to bed now, Hope the rest of BHW users enjoy the tutorial, thanks,
~DJJ<3

 

[alphad0g]

even though I haven't read this whole post yet, I know the information that DJJack provides is quality stuff.

Thanks dude.. I will read this more when I get home.

 

[DJJack]

wait dude im lost, im new to this.. whats static fbml? what does it do?

Hi Sorry, I will add an introduction to the post at some point today that shoes you more in depth what the uses of static fbml are and how they are displayed etc... Basically when viewing a page there are tabs such as wall, info, this gives you the opportunity to add a custom tab with all your custom coding on, its basically html in there but using some facebook tags from their wiki. This can be used to display linkied images, banners, even full website html code! The limit is 760px wide and the length is not mentionable. So you can use it to add a sales page for products, even embed a product for purchase. Use CPA on their for more leads and people can see it easier, basically bringing you further afield from the normal page look!

 

[DJJack]

Yes thats exactly one of the functions that it can do, as in if you have a full page creative in a CPA offer you can just paste the code for it in there and people will see that straight away if you set your page up to have the static FBML box as the default tab. This is so much better than just having the link in the page description as it can give visual images. As you can see further up the topic, i've indetified the ability to iframe as well.

 

[goawayplease]

Here's DJJack's code on how to IFrame from a previous topic: http://www.blackhatworld.com/blackhat-seo/facebook/160742-iframe-facebook.html

DJJack:
<!-- Start iframe CODE -->

<a onClick="outside_location.setInnerFBML(location_two);" style="cursor: pointer;">
:: Click To See Something Amazing :: </a> 

<div id="outside_location"> 
<img src='http://www.buttonimageurl.com' />
<fb:iframe width="760" height="760" frameborder="0" src="http://www.iframeurlhere.com" /> </div>

<fb:js-string var="location_two"> <fb:iframe width="760" height="500" frameborder='0' src='http://www.iframeurlhere.com' /> </fb:js-string> 

<script type="text/javascript" charset="utf-8"> var outside_location = document.getElementById('outside_location'); </script> 
<br />

<!-- End iframe CODE -->

 

[cpaaddict]

also dont forget to press the lil pencil icon on your box to post the advert/banner to your wall. this will go on the left where fans and that are.. i have mine placed there in prime position all the time

 

[DJJack]

also dont forget to press the lil pencil icon on your box to post the advert/banner to your wall. this will go on the left where fans and that are.. i have mine placed there in prime position all the time

Yes quite right, although there are 2 choices for this.
You can either post it to your wall and have a thin column down the left of the page or set the default viewing tab for the page as the full screen static fbml box. (This i find as its the main content more people look at it and endevour to click it). Thanks for pointing out the posting to wall feature!

There are so many different things you can use this for!

 

[soberealtor]

great thread...can you add a search box to the page and search data being displayed like XML feeds?

I might quite sure if i know what iam talking about...lol

 

[DJJack]

great thread...can you add a search box to the page and search data being displayed like XML feeds?

I might quite sure if i know what iam talking about...lol

Hi there,
glad you like the thread, what sort of search box were you thinking of? What would it do. Is it an embedded one from a source or custom to a specific site. XML is compatible with FBML therefore this is possible. Just some of the tags in the xml feeds would probably need adapting to fit the appropriate format.
Thanks,
~DJJ<3

 

[joemc]

great thread...can you add a search box to the page and search data being displayed like XML feeds?

I might quite sure if i know what iam talking about...lol

I'd say to use a flash widgetand the sn:swf tag if you wanna display xml feeds/etc.

 

[DJJack]

I'd say to use a flash widgetand the sn:swf tag if you wanna display xml feeds/etc.

Good idea, you can generate free flash widgets from widget box,
they do conversions of xml/rss feeds, really easy!

www.widgetbox.com

 

[soberealtor]

Good idea, you can generate free flash widgets from widget box,
they do conversions of xml/rss feeds, really easy!

www.widgetbox.com

can u help me out with this....not sure how to implement this however it sounds very promising.

 

[FBPRO]

thanks for the info, very handy

 

[joemc]

can u help me out with this....not sure how to implement this however it sounds very promising.

What info do you want to display?