Archive for category Web Coding
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.
Changes in Facebook – Boxes, Tabs, FBML and More
Posted by timware in Social Media / Inbound Marketing, Web Coding on February 24th, 2010
As many know, Facebook is planning some pretty significant changes in the coming weeks (or thereabouts) that developers really need to be aware of. These are not trivial changes, but significant changes in how information is displayed. Here is the PowerPoint that was distributed earlier in 2010.
The Big Picture….
- Reduced width of tab width from 760 to 520px;
- No iFrames;
- No Boxes, neither tabs nor boxes on the left-hand column of your Wall/Info tab, underneath your Page’s profile picture.
Facebook, in a PowerPoint that’s been distributed and is available here, states:
As part of a larger effort to improve user experience and promote consistency across the site, Facebook will be modifying Page and Profile layouts by simplifying how identity is managed and displayed.
Changes to layout:
- Tab width changing from 760 to 520 pixels [Discussed in a previous HyperArts post]
- Pages will no longer be able to implement iFrames on their Page. All custom content will need to be on a separate, custom tab, which you can add using FBML or a custom application.
- Boxes will no longer appear on Pages or Profiles. This means that Pages will no longer include the Boxes tab, or the Boxes that currently exist on the left-hand column of your Wall/Info tab, underneath your Page’s profile picture. You can move the content that currently exists in Boxes to a custom tab.
How to Add an iFrame to your Static FBML Page
Posted by timware in Social Media / Inbound Marketing, Web Coding on February 23rd, 2010
Mar 3 2010: It appears the below iframe method is no longer supported. However, you can still embed iframes into Facebook applications, just not in Static FBML. You’ll need to create an “iFrame” application that includes a “wrapper application” (a simple JavaScript app will do) to trigger the iFrame. I have written a post on how to create a Facebook application with embedded iFrame.
You cannot have an iframe in a Static FBML application tab that loads when the user hits the page. As with JavaScript, Facebook requires a user action before it will execute JavaScript or load an iframe.
Note: We believe that the “late February 2010″ changes Facebook has announced may include eliminating the implementation of iframes altogether. They have stated “Pages will no longer be able to implement iFrames on their Page. All custom content will need to be on a separate, custom tab, which you can add using FBML or a custom application.”
So, given that restriction, how do you add iframe content to your Static FBML page?
Pretty simple. Here’s the JavaScript:
<a onClick="outside_location.setInnerFBML(link_1);" style="cursor: pointer;">Let's see that iframe....</a>
<div id="outside_location"></div>
<fb:js-string var="link_1">
<fb:iframe height="500" allowTransparency="true" frameborder="0" scrolling="no" style="width:100%; border:none" src="http://URL-TO-OUTSIDE-LOCATION"></fb:iframe>
</fb:js-string>
<script type="text/javascript" charset="utf-8">
var outside_location = document.getElementById('outside_location');
</script>
The user action that is required is clicking on the “Let’s see that iframe” (for example), which then loads the iframe and external URL.
Resources
Pulling Wufoo forms into an iframe in Static FBML
HyperArts Post on embedding an iFrame in a Facebook Canvas Page application in 2010
Recent (2010) discussion on Facebook Platform Developer Forum
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 »
Facebook Static FBML and Internet Explorer – CSS & Stylesheets
Posted by timware in Social Media / Inbound Marketing, Web Coding on December 18th, 2009
In my post on adding the Facebook application Static FBML to your Fan Page, I laid out in detail how to use this very useful app to create very nice page layouts for your Wall tabs. As I’ve researched this further, I found that good ol’ Microsoft Internet Explorer versions 6, 7 and 8 do not handle these Static FBML pages like Firefox, Safari and the other browsers. Of course, any seasoned Web developer expects this and IE does not disappoint.
Static FBML CSS: Internet Explorer (all versions) and other browsers
With Internet Explorer you have only two options in applying CSS styles to your Static FBML application tab:
- Calling an external stylesheet using, for example:
<link href=”http://yoursite.com/styles/layout.css” rel=”stylesheet” type=”text/css” />
Of course, you need to upload the CSS file to your server (or some Web-accessible server). NOTE: Add this string to the end of your external stylesheet call to force Facebook to refresh the version it has cached (example): <link href=”http://yoursite.com/styles/layout.css?v=10.0” rel=”stylesheet” type=”text/css” /> (change the v= number each time you refresh the page.) - Putting the CSS styles inside the HTML mark-up, i.e. inlining the styles, for example:
<div style=”font-size:14px; margin:0 auto;”>
Although inlining the styles has appeared to always work with Static FBML application-tab pages, using calls to an external stylesheet seems to be only recently supported. I tested our HyperArts Static FBML Page, calling an external stylesheet, and it’s working fine. (If anyone does notice an issue, please let me know!)
The option that <em>doesn’t</em> work with Internet Explorer is using the style tag to embed your CSS rules:
<style type="text/css">
.some-class { margin:0; font-size:14px; }
#some-id { margin:0; font-size:14px; }
</style>
Although the above works in most other browsers, Internet Explorer ignores the contents of that tag.
If at all possible, you should choose the option to call an external stylesheet. You have much greater flexibility in applying — and making changes to — your CSS using a stand-alone stylesheet.
Moving Beyond Internet Explorer 6
Posted by Jim in Web Coding on August 16th, 2009
While the overall craft of building websites has remained rooted in roughly the same technologies over the past decade and a half, it would be far, far from the truth to say that the craft is the same as it was. The tools that we use have, since the beginning, been ever-changing. Stand still for long enough, and the job will change right out from under you. Read the rest of this entry »
Facebook Fan Page Customization