Posts Tagged Static FBML
Facebook Fan Pages – Show content to Fans Only – Static FBML
Posted by timware in Social Media / Inbound Marketing, Web Coding on March 8th, 2010
If you want to show content to your fans, and require that a visitor to your Fan Page become a fan in order to view the content, here’s a nice bit of FBML to render content on your Facebook Fan Page only to fans. Easy as pie….
First, on your Static FBML page, begin with the following:
<fb:fbml version=”1.1″>
Wrap the content you want to hide from non-fans within these tags:
<fb:visible-to-connection></fb:visible-to-connection>
Then end your page with:
</fb:fbml>
And that’s it! The content contained between <fb:visible-to-connection> and </fb:visible-to-connection> will be visible to fans only.
Other Resources
Adding iFrames to your Facebook Application – 2010
Posted by timware in Social Media / Inbound Marketing, Web Coding on March 8th, 2010
In early 2010, Facebook made some modifications to the API which made the embedding of iFrames more restricted. Although they are no longer supported in Static FBML tabs, iFrames can still be implemented on application Canvas Pages. However, rather than an iFrame loading automatically — as it previously did on Canvas Pages — a user action — a click — is now required to load the iFrame.
In a PowerPoint that Facebook circulated in late 2009, Facebook explained the upcoming changes:
iFrames
Preserving iFrames (on a custom tab)
If you currently use an iFrame in your page and must preserve the content of one or more of your iFrames: Create a wrapper application that lives on a canvas page. This application can have iFrames since it sits on a canvas page. Have this light weight application include the image of what you want to display, with an “Activate” button. Link the “Activate” button to the canvas page wrapper application. More information here.
And here is that “wrapper application,” written in JavaScript:
Read the rest of this entry »
How to Embed a Flickr Slideshow in your Static FBML Tab
Posted by timware in Social Media / Inbound Marketing, Web Coding on March 2nd, 2010
Please refer to my tutorial on adding Static FBML to your Facebook Fan Page for details on adding Static FBML to your Facebook Fan Page. This tutorial shows you how to add a Flickr slideshow, created from one of your “Sets” in your Flickr account, to a Static FBML Application Tab.
Embedding a Flickr Slideshow / Set in your Facebook Static FBML Application Tab is fairly straightforward. Here’s how it’s done:
Create a Flickr Set
If the Set that you want to be the slideshow is already created, skip to Step 4. If you need to first create the Set that will be the Flickr slideshow…
After logging in to your Flickr account….
Read the rest of this entry »
Win a Facebook Static FBML Contact Form Application Tab for your Fan Page
Posted by Analisa in Social Media / Inbound Marketing, Web Coding on March 1st, 2010
It’s time for another freebie from HyperArts! Last month we offered a free FBML page to our fans and followers (stay tuned for an update on our winners and their custom pages).
This month we would like to give away a custom contact form tab. You can see the contact form that we have on our HyperArts Page, which looks like this:
Winners will receive a static FBML application tab with a functioning contact form. This will appear on your existing Fan Page as a separate tab.
To be considered for this prize, please send an email with the subject line “FREE Contact Tab” to smo at hyperarts dot com.
Include the following information:
- Name
- Website
- A link to your existing Facebook Fan Page
Also, become a fan of the HyperArts Facebook Page, where we answer questions, share information and advice, and generally have a good time.
Contest Deadline: April 1, 2010.
How to Embed Your YouTube Channel in a Static FBML Page
Posted by timware in Social Media / Inbound Marketing, Web Coding on February 22nd, 2010
In my earlier post on embedding Flash or YouTube videos on your Static FBML page, I described how Facebook’s Static FBML application supports the embedding of Flash objects, including YouTube videos.
For businesses or organizations that have a YouTube channel, the good news is that you can embed a slideshow of your YouTube channel on a Static FBML application tab page. The presentation is quite nice, with the main video and, below it, a scrollable row of thumbnails that appears when the big video is moused over.
Here’s the drill:
Read the rest of this entry »
Win a Free Facebook FBML Application Tab!
Posted by Analisa in Social Media / Inbound Marketing on February 8th, 2010
UPDATE: The contest has ended, and we will announce winners by the end of this week.
Stay tuned for more info on discounts on FBML pages…
Call us crazy, but we are giving away our Facebook Page development services for free. We have received many inquiries about our custom FBML page, and Tim’s posts on FBML are wildly popular, so we wanted to share the love with you!
A business or organization that comes to us by Feb 22nd, with the following requirements, will win a FREE custom-designed Facebook Page tab (a simpler version of our custom tab).
The winner must:
- Have an existing Facebook Fan Page (in addition to a personal profile or group);
- Supply 2-3 images;
- Supply text, with hyperlinks, if desired;
- Be willing to make HyperArts a temporary admin of your Page (for implementation purposes);
- Be a fan of HyperArts!
We will design and develop a page for a business or organization that contacts us regarding this contest, simply email smo at hyperarts dot com with the subject line “Free FBML Page” and please include the URL to your website and your Facebook Fan Page.
Tutorial: Customize Facebook Pages with “Static FBML” application
Posted by timware in Design, SEO - Google, Social Media / Inbound Marketing, Web Coding on March 25th, 2009
Related: How to Embed YouTube Videos & Other Flash Objects in Static FBML Pages
Related: How to Add an iframe to a Static FBML Page
Related: How to Embed Your YouTube Channel Video Player in a Static FBML Page
Related: Purchase Multiple-Tab Navigation Code & Implementation
This is a how-to article on expanding your Facebook Fan Page (aka Business Page) by using the application Static FBML which allows you to add new “application tabs” to your tabs or box which can incorporate CSS, HTML, Facebook’s flavor of JavaScript, FBJS, and Facebook’s mark-up language FBML. FBML has greatly expanded what is possible on Facebook Pages and, if you’re sufficiently skilled with CSS/HTML and, optionally, FBML, you can make some really fine looking Pages.
Two examples of what we’ve done at HyperArts: Our Facebook Page and Skis on the Run, one of our clients.
What follows is a detailed guide to installing and working with Static FBML. I would also recommend Jesse Stay’s excellent book, FBML Essentials: Facebook Markup Language Fundamentals, published by O’Reilly. You’ll find it indispensable.
So let’s get started!
PLEASE NOTE:
- Static FBML can only be added to Facebook Fan Pages (aka Public Profiles, aka Business Pages);
- You CANNOT auto-run JavaScript in an FBML page – it must require a user action; you can also use FBJS (Facebook JavaScript);
- You SHOULD NOT use a <style type=”text/css”> tag — it works in most browsers, but NOT in Internet Explorer (of course); you can, however call an external style sheet via <link href=”http://yoursite.com/styles/layout.css” rel=”stylesheet” type=”text/css” /> (Read this post about the difference between Internet Explorer and other browsers regarding Static FBML and CSS…);
- Maximum width of FBML page is 760px (However, Facebook has announced this will be reduced to 520px in later 2009/early 2010.);
- Include ONLY the HTML/CSS that’s between the <body> and </body> tags; NO <html>, <body>, <head> or meta tags;
- In order to add applications to your Fan Page, you MUST have a personal profile associated with the Page as an Administrator; the Admin can add apps when logged in.
Facebook Fan Page Customization