1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

[TUT] How To Use Static FBML On Pages

Discussion in 'FaceBook' started by DJJack, Jan 15, 2010.

  1. DJJack

    DJJack Regular Member

    Joined:
    Jan 10, 2010
    Messages:
    321
    Likes Received:
    150
    Gender:
    Male
    Occupation:
    Web Developer, Events Guru
    Location:
    UK
    Home Page:
    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:
    [​IMG]

    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)

    [​IMG]

    Now You Can Edit Your FBML Code, Here Is A Wiki With Some Examples:
    Code:
    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:
    [​IMG]
    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
     
    • Thanks Thanks x 11
    Last edited: Jan 15, 2010
  2. milestone

    milestone Regular Member

    Joined:
    Aug 27, 2009
    Messages:
    261
    Likes Received:
    50
    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.
     
  3. DJJack

    DJJack Regular Member

    Joined:
    Jan 10, 2010
    Messages:
    321
    Likes Received:
    150
    Gender:
    Male
    Occupation:
    Web Developer, Events Guru
    Location:
    UK
    Home Page:
    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?
    Code:
    <fb:iframe src="URL OF IFRAME CONTENT" frameborder="1" height="HEIGHT" width="WIDTH">
    </fb:iframe>
     
  4. milestone

    milestone Regular Member

    Joined:
    Aug 27, 2009
    Messages:
    261
    Likes Received:
    50
    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.
     
  5. DJJack

    DJJack Regular Member

    Joined:
    Jan 10, 2010
    Messages:
    321
    Likes Received:
    150
    Gender:
    Male
    Occupation:
    Web Developer, Events Guru
    Location:
    UK
    Home Page:
    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:
    Code:
    <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)
     
  6. milestone

    milestone Regular Member

    Joined:
    Aug 27, 2009
    Messages:
    261
    Likes Received:
    50
    Thanks Man this is great lol
     
  7. DJJack

    DJJack Regular Member

    Joined:
    Jan 10, 2010
    Messages:
    321
    Likes Received:
    150
    Gender:
    Male
    Occupation:
    Web Developer, Events Guru
    Location:
    UK
    Home Page:
    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
     
  8. alphad0g

    alphad0g Regular Member

    Joined:
    Jan 9, 2009
    Messages:
    254
    Likes Received:
    47
    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.
     
  9. DJJack

    DJJack Regular Member

    Joined:
    Jan 10, 2010
    Messages:
    321
    Likes Received:
    150
    Gender:
    Male
    Occupation:
    Web Developer, Events Guru
    Location:
    UK
    Home Page:
    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!
     
  10. DJJack

    DJJack Regular Member

    Joined:
    Jan 10, 2010
    Messages:
    321
    Likes Received:
    150
    Gender:
    Male
    Occupation:
    Web Developer, Events Guru
    Location:
    UK
    Home Page:
    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.
     
    • Thanks Thanks x 2
  11. goawayplease

    goawayplease Regular Member

    Joined:
    Apr 10, 2008
    Messages:
    299
    Likes Received:
    67
    Here's DJJack's code on how to IFrame from a previous topic: http://www.blackhatworld.com/blackhat-seo/facebook/160742-iframe-facebook.html

    Code:
    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 -->
    
     
  12. cpaaddict

    cpaaddict Supreme Member

    Joined:
    Apr 6, 2007
    Messages:
    1,312
    Likes Received:
    920
    Location:
    UK - Bristol
    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
     
  13. DJJack

    DJJack Regular Member

    Joined:
    Jan 10, 2010
    Messages:
    321
    Likes Received:
    150
    Gender:
    Male
    Occupation:
    Web Developer, Events Guru
    Location:
    UK
    Home Page:
    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!
     
  14. soberealtor

    soberealtor Junior Member

    Joined:
    Jun 8, 2009
    Messages:
    134
    Likes Received:
    34
    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
     
  15. DJJack

    DJJack Regular Member

    Joined:
    Jan 10, 2010
    Messages:
    321
    Likes Received:
    150
    Gender:
    Male
    Occupation:
    Web Developer, Events Guru
    Location:
    UK
    Home Page:
    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
     
  16. joemc

    joemc Junior Member

    Joined:
    Jan 11, 2010
    Messages:
    100
    Likes Received:
    14
    I'd say to use a flash widgetand the sn:swf tag if you wanna display xml feeds/etc.
     
    • Thanks Thanks x 1
  17. DJJack

    DJJack Regular Member

    Joined:
    Jan 10, 2010
    Messages:
    321
    Likes Received:
    150
    Gender:
    Male
    Occupation:
    Web Developer, Events Guru
    Location:
    UK
    Home Page:
    Good idea, you can generate free flash widgets from widget box,
    they do conversions of xml/rss feeds, really easy!
    Code:
    www.widgetbox.com
     
    • Thanks Thanks x 1
  18. soberealtor

    soberealtor Junior Member

    Joined:
    Jun 8, 2009
    Messages:
    134
    Likes Received:
    34
    can u help me out with this....not sure how to implement this however it sounds very promising.
     
  19. FBPRO

    FBPRO BANNED BANNED

    Joined:
    Dec 20, 2009
    Messages:
    213
    Likes Received:
    49
    thanks for the info, very handy
     
  20. joemc

    joemc Junior Member

    Joined:
    Jan 11, 2010
    Messages:
    100
    Likes Received:
    14
    What info do you want to display? :)