iframe app in fb
This post is for @_SuzyWilliams and is on placing whatever content you like in your fb fan page with an iframe app. An iframe is just a window into another web page. Any page on the internet an be iframed. Here is an example of this very page page iframed back into this page:
As you can see in the above example it’s just a small window into the very same page. Any edits to the original page show up in the frame because the fame is loading the exact same page. It can save you a lot of time. Update one page and it shows in multiple places or even multiple sites. SO you have a page withe html named “http://yoursite.com/stuff” on your site, you can place an iframe in another site showing the mentioned “/stuff” page. Pretty simple.
Lots of things are iframes on the internet. The boxes on the side bar can be an iframe. The share bittons at the bottome of this very post are iframes. Just format the original page to the size of the iframe. Or don’t. Scroll bars can be used. But are kind of ugly in my opinion.
iframes apps are useful in fb when you want an app to display information or services your website may offer. In this first case Open Table reservations for the restaurant Agave. The fb page is http://facebook.com/agaveca
This by itself would be fine. I didn’t like the plain look of it. So lets use the change details link to get a more lively page.
Then drop the url in an iframe html tag with some width and height.
<iframe src=”http://www.opentable.com/blue-agave-club-reservations-pleasanton” width=800px height=1000px></iframe>
How to get this into your fb page:
I would create my own fb app with maybe some open graph stuff or at least goog analytics in the page. For speed purposes (and to eliminate the need to purchase an SSL certificate) lets use the fb app Static HTML.
Just add this app to your page.
Toss in the iframe code above
Customize the icon in your settings
TEST!! (You can test your code portion outside of fb with an online html tester like: http://www.draac.com/htmltester.html Just paste it in and test)
Let people know they can use this in fb! (if it works)
I would probably add a bit more html around the frame. Links to site, twitter, and the mobile applications of Open Table for example. (html for links should be <a href=”url you are send people to” target=_blank”><img src=”pic for link”></a> the target = blank opens a new tab. Important since we are using an iframe and don’t want the frame to go to the link.)
This will work with just about any content you want in fb. Contact forms, menus, pretty much anything! As an example you can look at the fb page for http://www.facebook.com/freeapplianceremoval and schedule a recycling pick up and never leave fb.
Another example with out java script could be for the website http://www.finalgravitybeer.com Because they use weebly and have a tap list page that is updated constantly. Adding /mobile to the url to get the page in the narrow non side bar mobile format, we can then iframe it in. Here is the code:
<iframe src=”http://www.finalgravitybeer.com/mobile/taplist.html” width=”800″ height=”1000″></iframe>
The StaticHTML app would be fine for this use and it’s a good way to drive customers to a fb page. Another benefit of having a useful resource is repeat visitors to your fb page. Here is a bar graph from a page I admin. Since framing in a utility customers can use, repeat visitors has gone up dramatically in the 6 – 10 range.
A lot of people want site hits and not fb page hits. In truth all that matters is getting your customers the information they need and that it’s branded correctly. They will come if they want to buy your product or service and will remember you exist because of your branding. You can iframe in a service or even a feed.
IF you really MUST get the web site hits up on you site, it’s no problem. Just make sure you are iframing into a page that is on your server. Located at something like “http://yoursite.com/nameofpageyouwantframed.html”. You can even add Google Analytics tracking code in the page.
I will add an example of framing in a RSS feed here soon.
IF you want to skip all this code style fun, http://www.shortstack.com/ is a free template way to achieve similar results. You lose some control over styling and will be dependent on that service remaining up for your content to be there.