7 FBML examples to rock your Facebook fan page. http://bit.ly/gsGAZy

7 FBML examples to rock your Facebook fan page.

Amplify’d from blog.webdistortion.com

<fb:request-form method=”post” type=”Your Fan Page Name Here.” invite=”true” content=”Check out Your Fan Page Name Here on Facebook!<fb:req-choice url=’YOUR FAN PAGE URL here’ ‘ label=’GO’ /> “> <fb:multi-friend-selector actiontext=”Tell your friends about us rows=”3″ showborder=”true” /> </fb:request-form>

Include Sharing With Friends

One of the main benefits of being on the Facebook platform is the ability for viral sharing to take place amongst participants in the network. To encourage your business page to be shared with others you can implement a Facebook “multi-select” box, all within the static FBML box. This will loop through the current users friend list, allowing them to select who they want to share the fan-page with when they click send. You might want to put this under a “Spread the word” type tab to increase your reach.

FBML needed

<fb:request-form method=”post” type=”Your Fan Page Name Here.” invite=”true” content=”Check out Your Fan Page Name Here on Facebook!<fb:req-choice url=’YOUR FAN PAGE URL here’ ‘ label=’GO’ /> “> <fb:multi-friend-selector actiontext=”Tell your friends about us rows=”3″ showborder=”true” /> </fb:request-form>

Include Multimedia

Multimedia objects such as flash, video and images can also be easily added to Fan Pages. If for example you wanted some flash video, or embedding of a flash game, the FB:swf, and FB:flv are perfect candidates. More details on the format of the API request available here for FLV and here for SWF. FBML needed (Flash object).

<fb:swf swfbgcolor=”ffffff”  swfsrc=’http://www.yoursite.com/flash.swf’ width=’380′ height=’250′ />

(FLV video)

<fb:flv src=’http://www.yoursite.com/video-gallery/video.flv’ />

(Image)

<fb:photo pid=”12345″ /> <img src=”http://www.yoursite.com/image.jpg” />

Monitor your pages with Google Analytics

A great social media campaign should focus on measurement over reach. One of the easiest ways to take a look at the data provided via a Facebook page is via Google Analytics. Thankfully, inclusion on an existing static FBML page is particularly easy. Here’s the code you need. Obviously, just replace the uacct with your own account ID to start collecting data about your page. FBML needed

<fb:google-analytics uacct=”UA-9999999-99″ />

Randomise your messages

You can easily add random messages to your Facebook page. You may for example, want to experiment with multiple calls to action – or offer multiple promotions to your audience. The Facebook Random tag lets you achieve that, without any programming. Here’s how: FBML needed

<fb:random> <fb:random-option weight=”2″>A: This will be shown 2 times as often as B.</fb:random-option> <fb:random-option weight=”1″>B: This will be show half as often as A</fb:random-option> </fb:random>

Add profile image

Your profile image is the thumbnail found at the top left of your page. To include it again anywhere on your Facebook Static FBML page, try using this example. A number of size parameters can be set with the tag, so if this size isn’t your thing, you can easily adjust it. Replace the UID parameter with your own userId.

<fb:profile-pic uid=”12345″ size=”normal” width=”400″ />

Add wall sharing capabilities

Sharing of individual bits of data or URL’s on Facebook is pretty integral to success. One easy way to do this on a Static FBML app is via the share-button. This allows you to share both data and links into a users wall / stream. FBML needed

<fb:share-button class=”url” href=”http://www.yoursite.com” >

Or to include more specific meta data. FBML needed

<fb:share_button> <meta name=”medium” content=”news”/> <meta name=”title” content=”Announcing the xxx Application”/> <meta name=”description” content=”"/> <link rel=”target_url” href=”http://apps.facebook.com/xxx”/> </fb:share_button>

Overview

Hopefully some of these  FBML examples should help get your Facebook page off the ground, with some additional functionality  for minimal effort. Combining some of the tags that Facebook provide out of the box, with a little creativity can really boost your social media marketing efforts without the need for calling on a programmer.

Adding your newsletter

If your blog or website offers subscription via email, an additional place to find subscribers is within the Facebook network. Fans that stumble upon your page, or are invited by others may want to add themselves to your subscriber list directly from you page, without visiting your site. Using the code that your newsletter provider gave you, you can easily create a newsletter tab with a subscribe box. Whilst this isn’t strictly FBML (its just HTML) – its an easy way to increase your reach and exposure on the cheap. FBML needed. Something similar to below. This is what I’m using folks.

<form action=”http://feedburner.google.com/fb/a/mailverify” method=”post” target=”popupwindow” onsubmit=”window.open(‘http://feedburner.google.com/fb/a/mailverify?uri=WebDesignInIrelandBlog’, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520′);return true”> <p>Enter your email address:</p> <p><input type=”text” style=”width:140px” name=”email”/></p> <input type=”hidden” value=”WebDesignInIrelandBlog” name=”uri”/> <input type=”hidden” name=”loc” value=”en_US”/> <input type=”submit” value=”Subscribe” /> </form> Read more at blog.webdistortion.com

 

See this Amp at http://bit.ly/gsGAZy

Amplify’d from www.socialmediaexaminer.com

10 Cures for Your Social Media Pains

By Jamie Beckland Published November 23, 2010

For marketers, social media is becoming increasingly complicated. The number of channels continues to grow and the pressure to show how all this effort will impact the bottom line only grows stronger.

The pains of managing social media are obvious – now let’s look at 10 different cures to make those pains disappear.

#1: I can’t keep track of what’s going on!

Between answering questions on LinkedIn Answers and updating your Ning profile, you missed the fact that one of your customers just wrote a scathing comment on your Facebook page.

Cure: Start a social dashboard

Social media management platforms allow you to consolidate multiple social media accounts into one place, so you can manage them all more efficiently. You get an overview of what is happening in different channels, all on one screen. The benefits extend far beyond that, but that’s enough of a reason to look into these solutions. Some solid choices include Hootsuite and Awareness. But different platforms work better for different needs.

#2: I’m talking to a bunch of nobodies!

You exchange 40 tweets with someone who is knowledgeable about your industry. Great! A real prospect! Then you find out that she is a 20-year-old college student (with 15 Twitter followers) writing a paper – and she has absolutely no ability to make a purchasing decision.

Cure: Understand social influence.

You should spend time engaging with people who can move your business forward. That means you need to identify the most influential social media people in your niche. Klout is a tool that tracks influence on Twitter and Facebook. Use it to see if that person is a thought leader, a connector, or a decision-maker.

#3: My customers are out there – but where?

You just know that your current customers are on social media. But your Facebook page only has 40 fans. Where are your customers, and how do you connect with them?

Cure: Check out your customers’ social profiles.

Flowtown and Gist both unify multiple social media presences based on your existing customer email database. This gives you a quick way to find out which of your customers are using different social media platforms, and which customers are influential.

Tools like Gist put your customers’ email addresses together with their social media identities.

#4: I share a lot of content – but it doesn’t drive visits to my site.

You’ve seen the recommendations from experts to keep your self-promotion to a minimum. Social media is about sharing. But you’re also accountable for your own metrics. How can you share, and still get people to check you out?

Cure: Create social media landing pages.

By giving you control of the frame of your link, ObjectiveMarketer gives you the chance to message and brand all of your social media links with customized content. You get all of the benefits of sharing great content with your followers, plus you can show them the interesting things that you’re up to at the same time.

#5: I can’t justify all the time it takes to do social right!

Your team spends hours each week retweeting, sharing links and joining the conversation. But now it’s the end of the year, and you need to make a budget for next year. You know you can’t go on with such a long to-do list, but you don’t have the metrics to show the impact.

Cure: Use your existing metrics – just show the social benefit.

Argyle Social tracks the response from your social media updates and maps them back to the conversion metrics you set up on your website. And it looks back up to 90 days in order to account for a longer consideration cycle – showing how a bunch of tweets adds up to an eventual sale.

Argyle Social tracks the social media links you share and maps that activity back to your website conversions.

#6: I don’t know what my followers are doing online!

You see what happens to your own status updates and blog posts – visitors come to your site, readers leave comments, etc. But you have no idea what they’re doing on the rest of the web.

Cure: Tell people what you like to find out what they like.

This is one place where the biggest names in social media can help you. Twitter and Facebook offer login credentials that any website can adopt (there are open source alternatives as well). Whenever possible, you should connect to other sites using one of these login protocols and “Like” content across the web liberally. Often, you can see who else in your network is also interested in that website. In this way, you’ve created a new opportunity for engagement.

Facebook “Likes” are a great way to find out what your fans are interested in from across the web. “Like” the content you find as you browse, and you’ll see what your fans like in return.

#7: I can’t filter out the noise from the important stuff.

Every time you login to Twitter, you see that there are thousands of unread tweets. Your Facebook page is overrun with comments from people you’ve never heard from before. And there are 1,575 blog posts that are ready for a comment from you.

Cure: Get information fast – when you need it.

Cadmus can definitely help in this arena. It’s designed to show you the most important tweets from your network. If you’re looking for information from your network on a specific topic, Nsyght searches across your social network. It’s like Google but only for the people in your social network.

#8: All this engagement isn’t leading to anything!

You get retweeted by the same people over and over. You have the same conversation with multiple followers. You’re running in a hamster wheel, not moving your marketing forward.

Cure: Get yourself some game mechanics.

Game mechanics means linking your marketing efforts together, so that one interaction naturally leads to the next. You have to create a series of social media events that encourage your followers to engage more deeply – and game mechanics provide a solid framework for planning.

#9: There are not enough hours in the day!

As soon as you feel like your Facebook presence is strong, you know you need to create a SlideShare presence. There’s always one more tweet to write, one more blog post to comment on and new marketing campaign to support.

Cure: Make the case for dedicated resources.

Your marketing program needs to evolve, or it will die. That means your team needs new skills, and a more sophisticated understanding of social media. Work internally to make the case, based on your current success, to shift marketing dollars into social media. And make sure you find the people, whether internal or external, who can hit the ground running.

#10: I have all this content, but I don’t know what to do with it.

You’re doing a great job of engaging with your audience. They’re responding and you have some great quotes. But you’re not getting the full marketing benefit from this engagement.

Cure: Create a space on your site to feature the best social content.

Assuming that marketing involves bringing people to your site so they can take some action, you should feature some social content from your community on your site. This gives your best followers a pat on the back, and allows others to brag about you so you don’t have to. Testimonial pages are a great way to do just that.

What are your biggest social media pains? The community just might be able to cure them for you. If you’ve figured out how to cure them already, be sure to share your solutions in the comments box below.

About the Author, Jamie Beckland

Jamie Beckland creates social and emerging media programs for White Horse, a digital marketing agency, and has built online communities since 2004. Other posts by Jamie Beckland » Read more at www.socialmediaexaminer.com

 

See this Amp at http://bit.ly/ggOk3z

http://bit.ly/ghnh86

10 Cures for Your Social Media Pains http://bit.ly/ggOk3z

Untitled

Amplify’d from www.socialmediaexaminer.com

10 Cures for Your Social Media Pains

By Jamie Beckland Published November 23, 2010

For marketers, social media is becoming increasingly complicated. The number of channels continues to grow and the pressure to show how all this effort will impact the bottom line only grows stronger.

The pains of managing social media are obvious – now let’s look at 10 different cures to make those pains disappear.

#1: I can’t keep track of what’s going on!

Between answering questions on LinkedIn Answers and updating your Ning profile, you missed the fact that one of your customers just wrote a scathing comment on your Facebook page.

Cure: Start a social dashboard

Social media management platforms allow you to consolidate multiple social media accounts into one place, so you can manage them all more efficiently. You get an overview of what is happening in different channels, all on one screen. The benefits extend far beyond that, but that’s enough of a reason to look into these solutions. Some solid choices include Hootsuite and Awareness. But different platforms work better for different needs.

#2: I’m talking to a bunch of nobodies!

You exchange 40 tweets with someone who is knowledgeable about your industry. Great! A real prospect! Then you find out that she is a 20-year-old college student (with 15 Twitter followers) writing a paper – and she has absolutely no ability to make a purchasing decision.

Cure: Understand social influence.

You should spend time engaging with people who can move your business forward. That means you need to identify the most influential social media people in your niche. Klout is a tool that tracks influence on Twitter and Facebook. Use it to see if that person is a thought leader, a connector, or a decision-maker.

#3: My customers are out there – but where?

You just know that your current customers are on social media. But your Facebook page only has 40 fans. Where are your customers, and how do you connect with them?

Cure: Check out your customers’ social profiles.

Flowtown and Gist both unify multiple social media presences based on your existing customer email database. This gives you a quick way to find out which of your customers are using different social media platforms, and which customers are influential.

Tools like Gist put your customers’ email addresses together with their social media identities.

#4: I share a lot of content – but it doesn’t drive visits to my site.

You’ve seen the recommendations from experts to keep your self-promotion to a minimum. Social media is about sharing. But you’re also accountable for your own metrics. How can you share, and still get people to check you out?

Cure: Create social media landing pages.

By giving you control of the frame of your link, ObjectiveMarketer gives you the chance to message and brand all of your social media links with customized content. You get all of the benefits of sharing great content with your followers, plus you can show them the interesting things that you’re up to at the same time.

#5: I can’t justify all the time it takes to do social right!

Your team spends hours each week retweeting, sharing links and joining the conversation. But now it’s the end of the year, and you need to make a budget for next year. You know you can’t go on with such a long to-do list, but you don’t have the metrics to show the impact.

Cure: Use your existing metrics – just show the social benefit.

Argyle Social tracks the response from your social media updates and maps them back to the conversion metrics you set up on your website. And it looks back up to 90 days in order to account for a longer consideration cycle – showing how a bunch of tweets adds up to an eventual sale.

Argyle Social tracks the social media links you share and maps that activity back to your website conversions.

#6: I don’t know what my followers are doing online!

You see what happens to your own status updates and blog posts – visitors come to your site, readers leave comments, etc. But you have no idea what they’re doing on the rest of the web.

Cure: Tell people what you like to find out what they like.

This is one place where the biggest names in social media can help you. Twitter and Facebook offer login credentials that any website can adopt (there are open source alternatives as well). Whenever possible, you should connect to other sites using one of these login protocols and “Like” content across the web liberally. Often, you can see who else in your network is also interested in that website. In this way, you’ve created a new opportunity for engagement.

Facebook “Likes” are a great way to find out what your fans are interested in from across the web. “Like” the content you find as you browse, and you’ll see what your fans like in return.

#7: I can’t filter out the noise from the important stuff.

Every time you login to Twitter, you see that there are thousands of unread tweets. Your Facebook page is overrun with comments from people you’ve never heard from before. And there are 1,575 blog posts that are ready for a comment from you.

Cure: Get information fast – when you need it.

Cadmus can definitely help in this arena. It’s designed to show you the most important tweets from your network. If you’re looking for information from your network on a specific topic, Nsyght searches across your social network. It’s like Google but only for the people in your social network.

#8: All this engagement isn’t leading to anything!

You get retweeted by the same people over and over. You have the same conversation with multiple followers. You’re running in a hamster wheel, not moving your marketing forward.

Cure: Get yourself some game mechanics.

Game mechanics means linking your marketing efforts together, so that one interaction naturally leads to the next. You have to create a series of social media events that encourage your followers to engage more deeply – and game mechanics provide a solid framework for planning.

#9: There are not enough hours in the day!

As soon as you feel like your Facebook presence is strong, you know you need to create a SlideShare presence. There’s always one more tweet to write, one more blog post to comment on and new marketing campaign to support.

Cure: Make the case for dedicated resources.

Your marketing program needs to evolve, or it will die. That means your team needs new skills, and a more sophisticated understanding of social media. Work internally to make the case, based on your current success, to shift marketing dollars into social media. And make sure you find the people, whether internal or external, who can hit the ground running.

#10: I have all this content, but I don’t know what to do with it.

You’re doing a great job of engaging with your audience. They’re responding and you have some great quotes. But you’re not getting the full marketing benefit from this engagement.

Cure: Create a space on your site to feature the best social content.

Assuming that marketing involves bringing people to your site so they can take some action, you should feature some social content from your community on your site. This gives your best followers a pat on the back, and allows others to brag about you so you don’t have to. Testimonial pages are a great way to do just that.

What are your biggest social media pains? The community just might be able to cure them for you. If you’ve figured out how to cure them already, be sure to share your solutions in the comments box below.

About the Author, Jamie Beckland

Jamie Beckland creates social and emerging media programs for White Horse, a digital marketing agency, and has built online communities since 2004. Other posts by Jamie Beckland » Read more at www.socialmediaexaminer.com

 

See this Amp at http://bit.ly/ghnh86

Subscribed to CustomFacebookDesign http://ping.fm/yx2Zc

Subscribed to blueoctoberofficial http://ping.fm/fKUiP

Facebook Could Soon Have Trademark For The Word “Face” http://ping.fm/SGMgO

Creating a custom facebook fan page http://bit.ly/d6KyIh

Tracking user engagement on Facebook fan pages http://bit.ly/9SmlvU

Amplify’d from www.webdigi.co.uk

Tracking user engagement on Facebook fan pages

In our previous blog post we showed how to setup Google Analytics for Facebook fan pages. The article was very well received and highlighted the importance of improved analytics. Please review the older article for detailed instructions on how to setup Google Analytics. Here are a few interesting concepts which will help you build better Facebook fan pages and also take your Analytics information one step further:

Fans versus Non Fan activity

An interesting way to look at your Facebook fan page activity is to split them with activity by your Fans and non fans. To do this, we need to use segments in Google Analytics to split activity into Fan and Non-Fan activity. You can create a segment based on pages visited by your user or specific event.

Using segments to track Fan/Non Fan activity

We will need to use FBJS (Facebook Javascript) and the tag <fb:visible-to-connection>. The tag will allow us to display a section to Fans and another to Non-Fans. We have managed to use this to create a single action button but calling different FBJS functions depending on whether the user is a fan of the page or not. Once a Javascript function is activated, the appropriate tracking image has to be shown to log the visit correctly on Google Analytics. Displaying this tracking image causes a hit to be registered on Google Analytics and this can be used to segment traffic. Visit our tracking page to get the code and see this in action.

Tracking activity on forms and on your pages

This is a good method to track user engagement with the Facebook page. Several users might visit your Facebook page but only a few might actually engage with the form. When your custom Facebook fan page loads, Facebook does not activate the Javascript you have written. This is only activated when a user performs an activity. Something like clicking on a button, clicking of your form, playing a video, entering some details onto the form, clicking on a button of your carousel, etc. This is a good opportunity to track activity on your page. All you have to do is use a script tag like the one used in the Advanced tracking page.

Goal and Funnel Visualisation

This can be a quite powerful tool, you can track for example how many users visit your contact page, how many then proceed to engage with the page and how many eventually click on the contact button. Here is an example of a funnel visualisation.

A simple two step funnel visualisation

The above two step funnel visualisation shows you how many users visited our contact page and how many proceeded to submit the form. This could have also been made into a three step funnel displaying how many visited the contact page, how many clicked around and how many actually clicked the contact button.

Tracking Purchases or clicks on your fan page

To track clicks which can be purchases, clicks on links, etc. We generate a tracking code for each action that we want to track using our trusted Google Analytics code generator. We then load this image location on click of a button, or link, etc using the usual onclick event handler.

In conclusion

These techniques require some knowledge of Javascript and a reasonable understanding of how the image technique lets you work around Facebook’s Javascript restriction. You can get the complete source code to how we segregate fan and non fan visits, etc here. We are a web development company and will be happy to help you out with your unique tracking needs on your Facebook page. Please share your thoughts, comments and ideas on how to track user behaviour in more depth. Read more at www.webdigi.co.uk

 

See this Amp at http://bit.ly/9SmlvU

Google Analytics for Facebook Fan Pages http://bit.ly/aUwVoe

Amplify’d from www.webdigi.co.uk

Google Analytics for Facebook Fan Pages

We launched our Facebook fan page earlier this month and as with all Facebook pages only Facebook Insights program is available to page administrators. Facebook Insights shows demographic details and interactions on your pages BUT limited to show information of fans only. It is far less sophisticated and comprehensive when compared to the free Google Analytics. One of the limitations of Facebook Fan pages is that you can only run limited Javascript on it and Google Analytics needs Javascript code included to correctly track visitors. We have successfully managed to get ALL functions of Google Analytics working on our Facebook fan page (including visitor statistics, traffic sources, visitor country, keyword searches with all other powerful reporting & maps overlays etc).

Google Analytics Example

How to setup Google Analytics on your Facebook fan pages

The workaround we use in our code is to include Google Analytics as an image instead of setting the standard Javascript. This method tracks every visitor to the custom facebook pages on Google Analytics. It required a combination of server side cookie management and an additional <img> tag to the bottom of the facebook fan page. Here are the steps to get Google Analytics working on your facebook fan page.

1) Setup Google Analytics account. If you already have one, create a new website profile. You can name it facebook.com or facebook.com/your_page_name. You will finally get your tracking code which looks like this UA-3123123-2 2) Create your custom img tag for each of your pages you like to track. EG: contact form, services, products etc. You can use our tool to create the Google Analytics link generator for Facebook pages. 3) Add the entire custom image html tag from step 2 to the bottom of each Facebook fan page that you need to track.

That is all there is to it! Google Analytics is not real-time, so you will need to give it some time. Approximately a day before you see the fruits of your “hard” work.

For advanced users

Use this method, if you don’t want to use our hosted link redirection as mentioned in the method above. You can download the entire source code which is just about three files to get this setup working on your own server (running PHP4.3 or above). The code is written in PHP and essentially creates the Google image tracking URL with the referrer, page information, ID, etc. The additional advantage of hosting this on your own server and domain is that visits from your website to your facebook fan page gets tracked, etc. You will also be able to customise further if you wish. Please do share any useful updates you apply to the tracking link code.

Facebook – Google Analytics Tracker v1.1 (Updated 21st Feb, 2010).  For advanced method – Download this code to use on your server.

If you don’t have a Facebook fan page yet, visit our tutorial for code and help on creating customised Facebook fan pages.

PS: We could not find any other source / blog that described how to get Google Analytics on Facebook fan pages! There is support for canvas pages and applications but nothing for StaticFBML fan pages. Hope this helps and please leave your comments below.

UPDATE: 1) A lot of users have asked how to track visits to the wall. Yes, this can be done. Please see the comments by iphp below. 2) Here is a screenshot to a staticFBML where the code should be placed 3) We have managed to set up funnels, goals and segments to separate fan and non fan activity. 4) This blog and comments cover all aspects of setting up Google Analytics. If you still want help, we are available to offer paid support and installation of Analytics for your page. Please contact us here. Read more at www.webdigi.co.uk

 

See this Amp at http://bit.ly/aUwVoe

Create a different Welcome Tab Content For Non Fan and Fans

This is a great way to get people to like your Fan Page. Great article

Amplify’d from www.socialmediaexaminer.com

How to Create Fan-only Facebook Content with the Reveal Tab

Have you ever wondered how some Facebook pages show specific content or offers only to fans? If so, look no further.

One of the most popular FBML tags is fb:visible-to-connection. A favorite of marketers, this FBML tag allows a Facebook page to show different content to fans and non-fans. When a non-fan clicks the Like button – viola! – the non-fan content disappears and the fans-only content replaces it. As a method of motivating a visitor to become a fan of your page, this can be very effective.

This FBML tag is often—and erroneously—referred to as a “hack”; however, it was created by Facebook to do exactly what it does: ”to display the content inside the tag on a user’s or a Facebook page’s profile only if the viewer is a friend of that user or is a fan of that Facebook page.”

Examples of Brands Using Fans-only Content

There are many ways to motivate your visitors to Like your page. Here are a few examples from brands on Facebook:

Levi’s promises “Instant access to exclusive content.”

1-800 Flowers offers a discount code for 20% off your next order.

Teesey Tees keeps it mysterious: “See what the deal is.”

DIGISTORE offers “Discount Codes, Unadvertised Specials, Free Monthly Giveaways.”

You get the picture. “We have great content here, BUT FIRST you gotta Like us!”

Of course, you should make sure that your “teaser” to non-fans is sufficiently compelling for them to Like your page. Many pages require a visitor to become a fan before displaying certain content, but they don’t convey the value of the content. Teesey Tees, above, comes very close to this.

Following are instructions on how to add fans-only content to your page.

Add the Static FBML Application to Your Page

First, you’ll need to add the Static FBML application to your page. Here is a tutorial.

NOTE: Static FBML can only be added to a Facebook page (i.e., Business Page, Company Page, Brand Page). It cannot be added to a personal profile.

What Is FBML?

FBML is Facebook’s own proprietary mark-up language that enables your tab content to interact with the Facebook API (”Application Programming Interface”). It is as easy to use as HTML.

Most FBML tags, including the ones I use in this article, have an opening tag and a closing tag. The content for each tag — HTML, CSS and/or more FBML — is placed between these opening and closing tags.

Creating Your Fans-only Content on Your Custom Tab

Once you’ve added the Static FBML application, the implementation of this FBML tag is pretty easy. The only part that is somewhat tricky is getting rid of the white space the fans-only content creates even though it’s not yet visible.

Facebook uses the “visibility:hidden” style to hide the fan content until the user Likes the page. However, this style rule still reserves the space for the content; it just doesn’t show the content. Consequently, the non-fan content is pushed down the page! However, this is easily solved with a bit of CSS “absolute positioning.” I incorporate this approach into the following examples.

The code for the FBML box: <div id="wrapper"> <fb:visible-to-connection> FANS-ONLY CONTENT GOES HERE <fb:else> <div id="non-fans">NON-FANS CONTENT GOES HERE </div> </fb:else> </fb:visible-to-connection> </div>

As shown above, all the tab content will be contained in the “wrapper” DIV.

<div id=”wrapper”> opens this containing DIV. CSS styles are applied to the ID “wrapper” via the stylesheet.

All the fans-only and non-fan content is placed between the opening <fb:visible-to-connection> tag and closing </fb:visible-to-connection> tag. This content can be HTML, FBML and CSS.

The fans-only content comes first, followed by the non-fan content which immediately follows the opening <fb:else> FBML tag.

The non-fan content is contained within the <div id=”non-fans”> and </div> tags. CSS styles are applied to the ID “non-fans” via the stylesheet.

Immediately following the non-fan content is the closing </fb:else> tag, followed by the closing </fb:visible-to-connection> tag and, finally, the </div> tag to close the “wrapper” DIV.

Here is the Static FBML box with the above code, and the link to an external stylesheet:

Here is the CSS for the external stylesheet (with example URL): #wrapper { width:520px; margin:0 auto; border:0; padding:0; position:relative; } #non-fans { width:520px; position:absolute; top:0; left:0; }

Your external stylesheet should have only the CSS style rules. Don’t include the <style> … </style> tags!

If you can’t use an external stylesheet

If you don’t have a server where you can upload a separate stylesheet, you can “inline” the styles inside the HTML tags. Although this isn’t ideal, it’s an option if you can’t create a separate stylesheet, host it on a server, and link to it with the <link> tag.

Here is the above example, with the styles for the <div> tags inlined (notice we don’t need the IDs if we use this approach):

Testing and Troubleshooting

Testing and troubleshooting this particular FBML tag is a bit tricky, because when logged in as a user who is a page admin, you will see both fans-only and non-fan content when viewing the tab.

Create a user account for testing: The most efficient way to test is to create a Facebook account for testing only, or use a friend’s or colleague’s account. (Creating a new personal profile for testing may violate Facebook’s Terms of Service — See #4, Registration and Account Security — even if done with good intentions.) You can be logged in to Facebook as one user (the admin account) in one browser and logged in as the test account in a different browser (I use Firefox and Safari). Then you don’t have to keep logging in and out of Facebook as admin, then as tester, etc. When testing, you’ll need to toggle back and forth between Liking and Unliking a page. To Unlike a page, click on the Wall tab. Near the bottom of the left column of the Wall, you’ll see “Unlike”: Click that to Unlike the page, and you can click the Like button to re-Like the page. Repeat as necessary.

Use an external stylesheet, NOT inlined styles: Most browsers will correctly display your page if you have inlined the CSS with the <style> tag, but NOT Internet Explorer 8! Because millions of people use this particular browser, your CSS should be in its own file (with the extension “.css”) and be referenced from your FBML page, with the <link rel=”stylesheet” type=”text/css” href=”URL-TO-EXTERNAL-STYLESHEET” />. You’ll need to have this file hosted somewhere on the web where you can link to it.

Double-check all URLs: If any files (images, CSS, etc.) are not being displayed or accessed, be sure to test the URLs for these files directly in your browser, typing or pasting the URL in the address bar to make sure you can access the file directly. If you can’t access the file directly, then your URL is incorrect.

Check for proper syntax: Make sure that URLs are surrounded by matching quotes (single or double is fine, but they must match) and that they are plain-text, straight-up-and-down quotes (not “fancy” or “curly” quotes).

Check your Tab on the Most Popular Browsers and on Mac AND Windows: You want to be sure your tab is displaying properly on the most popular browsers (Firefox, Internet Explorer, Safari and Chrome, at the very least) and on both Mac and Windows. What displays well in Firefox, Chrome and Safari may not (and often doesn’t) display well on Internet Explorer.

What About Facebook’s Announcement on Killing Off FBML?

On August 19, 2010, Namita Gupta announced the impending phase-out of FBML. However, I expect that support for Static FBML and the fb:visible-to-connection tag will be around indefinitely. Static FBML is Facebook’s own application and just several months ago they offered Static FBML custom tabs as a consolation prize to users who were distraught over the killing off of the Boxes tab. I expect it will be supported well into 2011 and perhaps beyond.

Read this detailed article on the future of Static FBML and FBML, which includes the opinions of a number of expert developers.

About the Author, Tim Ware Tim Ware is the owner of HyperArts Web Design, helping businesses build and promote their Web presence. His focus these days is Facebook app development and Static FBML. Other posts by Tim Ware » Read more at www.socialmediaexaminer.com

 

See this Amp at http://bit.ly/9Id7Yg