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

 

We start with the javascript for a reservations widget from open table. This calls the form and options for making a reservation. Here is the script below:

<script type=”text/javascript” src=”http://www.opentable.com/frontdoor/default.aspx?rid=27673&restref=27673&bgcolor=F6F6F3&titlecolor=0F0F0F&subtitlecolor=0F0F0F&btnbgimage=http://www.opentable.com/frontdoor/img/ot_btn_red.png&otlink=FFFFFF&icon=light&mode=wide”></script><a href=”http://www.opentable.com/blue-agave-club-reservations-pleasanton?rtype=ism&restref=27673″>Blue Agave Club Reservations</a>

 

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.

http://www.opentable.com/blue-agave-club-reservations-pleasanton

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)

DONE!

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.

Taken from fb’s analytics

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.

 

Enjoy!





11 Comments

  1. vinyl gloves wrote:

    Somebody essentially help to make seriously posts I would state.
    This is the very first time I frequented your web page
    and thus far? I surprised with the research you made to create
    this particular publish incredible. Fantastic job!

  2. xtreme no wrote:

    I just could not depart your website before suggesting that I really enjoyed the standard information a
    person provide for your visitors? Is going to be back often to check up
    on new posts

  3. Hey There. I found your weblog using msn. That is a really neatly written article.
    I’ll make sure to bookmark it and return to read extra of your useful information.
    Thanks for the post. I’ll definitely comeback.

  4. certainly like your web site but you need to check the
    spelling on several of your posts. A number of them are
    rife with spelling issues and I find it very bothersome to tell the truth nevertheless I’ll definitely come back again.

  5. I’m still learning from you, while I’m trying to reach my goals.
    I certainly liked reading all that is posted on your site.

    Keep the posts coming. I loved it!

  6. Ortega wrote:

    Thanks for all the comments. I will have more posts as projects come up. You can leave me a question too if you have a problem or interest to share.

  7. click here wrote:

    Would you be eager about exchanging links?

  8. It is really a great and useful piece of info. I am glad that you shared this
    helpful information with us. Please keep us up to date like
    this. Thank you for sharing.

  9. Kirby wrote:

    Heya this is kinda of off topic but I was wanting to know if blogs use WYSIWYG editors or
    if you have to manually code with HTML. I’m starting a blog soon but have no coding expertise so I wanted to get advice from someone with experience. Any help would be greatly appreciated!

  10. Iola wrote:

    Hi there! Do you know if they make any plugins to protect against hackers?
    I’m kinda paranoid about losing everything I’ve worked hard on.
    Any suggestions?

    • Antonio wrote:

      What kind of hacks are you looking to protect against? You can never stop all hacks, but if you identify for your goals first you can focus your efforts in the right direction.