Internet Business Blog
« Previous | Home | Next »

 

Facebook Fan Pages and Static FBML Part 3: iFrames!

Share/Bookmark

July 6, 2010

Facebook Fan Pages and Static FBML Part 3: iFrames!

Facebook Fan Pages and Static FBML Part 3: iFrames!

In Facebook Fan Pages and Static FBML Part 1 I showed how to setup a Facebook Fan Page and in Facebook Fan Pages and Static FBML Part 2 I showed how to use Static FBML to customize the page and to create a form that the user could fill out and it would send you an email using AJAX without ever leaving Facebook.

In this article I'm going to show how to use these techniques to make a Fan Page use Static FBML to display an iFrame.

If you don't know what an iFrame is, it's a method of embedding a web page in a web page. A portion of the main web page has a "window" that is another web page, from the same web server, or from a different web server. There's lots of uses for this and I won't cover them here.

I'm a little hesitant to show this information because I fear that Facebook will block it from working as they have other techniques to display iFrames.

You can see an example of an iFrame in a Facebook Fan Page on the Fan Page for my photo gallery site: www.facebook.com/pqGallery after you click the "Like" button, click the "Slideshow" Tab. Once on the "SlideShow" Tab, click the "Click to Load SlideShow" Button and you'll see an iFrame load that contains a dynamic image slideshow.

Why do you have to click the "Click to Load SlideShow" button? Because Facebook will not automatically start an AJAX command, they require the user to click something. This has the obvious down side of the user having to click something to see your iFrame, but the upside of giving you the ability to have several buttons that they could choose from to load exactly what they want to see.

So, how does this work? First, you HAVE to master what I covered in Part 2. If you can't get that to work, the iFrame technique will not work. Once you can do that, you can use the same technique to make the iFrame. Instead of processing a form and sending an email, the php code that you put on your server sends back to Facebook, via the AJAX connection, the code for your iFrame... and it works!

Below is the exact Static FBML code I use on the pqGallery SlideShow tab. Please Note: you will need to change the call to my server and my php file - I've put in a comment just before this line of code:

Below is the exact content of the PHP file that gets called. pqGallery actually generates this for you for embedding iFrame slideshows of images, so all I had to do here was to copy and paste the code it generated.

As with the examples in the previous articles, it can be frustrating to debug this type of setup. However, eliminating one element at a time until you get something to work is the best way, then, add back what you removed, again, one element at a time and then you'll find the offending code and can work to fix it.

Until next time,
Fred

Share/Bookmark

Tip Jar: Leave a Donation

Comments: 48,   TrackBacks: 0.

Posted by on July 6, 2010 | Printer-Friendly

TrackBack: http://www.pqInternet.com/blog/mt-tb.cgi/230

You may reprint or distribute this article as long as you leave the content intact, list me at the author, and include a link back to this web site... see this page: linking back to this blog.

Assigned Categories: Social Media | Web Site Design, HTML, CSS

Related Entries:


Get Free Updates! Enter your name and e-mail address to receive a short notice each time I make a new post.

First Name:

Last Name:

E-Mail Address:

E-Mail again:

NOTE: You will receive a confirmation email. You must click the link in the email to activate your free updates. Please check your spam folder(s) if you don't receive the email.


Comments and TrackBacks
  Comments:
  1. From: William Chen

    That's some progressive code, mate... I'd like to see more of your ideas!

    Posted by William Chen on July 7, 2010 9:24 AM

  2. From: Jane

    Thanks for clarifying about the iFrame. Now I can put some features on my Facebook fan page.

    Posted by Jane on July 10, 2010 9:05 PM

  3. From: Uzi

    I can't believe that facebook allows iframes. It means that we can load any dynamic page inside the iframe. How would facebook know that we are not going against their policies?

    Posted by Uzi on July 13, 2010 5:12 AM

  4. From: Anne Haynes

    I really like this series. I'm a novice programmer and need instruction to make things work. I can read the code, but writing it is another story. You give enough information for me to troubleshoot and that's saying a lot!

    Thanks again!

    Posted by Anne Haynes on July 13, 2010 6:13 PM

  5. From: Mr. Basota

    Hey dude, thanks for this nice information. Without this post, i can not imagine that facebook uses iframes.

    Posted by Mr. Basota on July 15, 2010 11:25 AM

  6. From: Lara

    This is definitely a helpful (series of) post(s). Newsletter sign up box works excellent! Thanks!

    Posted by Lara on July 18, 2010 3:39 AM

  7. From: Paul

    I never would have guessed that facebook used iFrames. As a newcomer to the programming industry I just want to thank you for this awesome post. The code really helped not only in this specific project, but in helping me understand other similar projects as well.

    Posted by Paul on July 20, 2010 10:06 AM

  8. From: Billy

    WOW!! I was just having a discussion with a colleague about how I wish I could have some sort of way to customize Facebook like I was able to through html with myspace. Your process is precisely what I was looking for, now I have to somehow master the code. Nice photos of leaves by the way. Thank you!!

    Posted by Billy on July 21, 2010 6:22 PM

  9. From: Angelie

    Been managing my fan page, and this is the first time I get to know that one could customize such page. Thank you for sharing that code.. think I'll have to try it for my fan page.. that's another discovery and if it is possible for me to apply it on my page then I guess I have to share it for my friends. Thanks again for sharing.

    Posted by Angelie on July 22, 2010 3:02 AM

  10. From: Laynia

    That's an awesome bit of code you've given us here. Thanks a lot!

    Posted by Laynia on July 22, 2010 2:18 PM

  11. From: Jan

    I have been reading a lot lately about FB fan pages but haven't as yet decided to set one up. Are they really worth the time and effort?

    Posted by Jan on July 26, 2010 5:38 PM

  12. From: piojita

    is there any way to do that load without a user action ?

    Posted by piojita on July 28, 2010 10:38 AM

  13. From: Steve Marino

    Thanks so much for this series of posts (well I'll thank you even more once I've got it set up). I had no idea that Facebook could be customized this way and I've not seen anyone else doing it either.

    Posted by Steve Marino on July 28, 2010 7:10 PM

  14. From: Maritime Lawyers

    Thank you for sharing (series) of information pertaining to the possible activities which we could do in facebook. My idea about using facebook is too little and this post made me realize the other alternatives. Now, I have ideas about customizing my page. Thanks to your post!Looking forward for you new valuable information concerning this matter.

    Posted by Maritime Lawyers on July 31, 2010 4:32 AM

  15. From: Darrin

    Wow, very detailed post on configuring Facebook pages. Good work.

    Posted by Darrin on August 1, 2010 11:56 AM

  16. From: Jenny

    I did know that you can customized your fan page from FB! Thanks for sharing!

    Posted by Jenny on August 2, 2010 4:54 AM

  17. From: Ritrattista

    Among the social networking sites that we had today, Facebook is my personal favorite because of the fact that you do a lot of things with Facebook. I used to customize and update my FB account daily but I never knew that i can do the same with my fan page. I'm so glad with this new discovery and I will definitely share this to my friends. Thanks a lot for sharing.

    Posted by Ritrattista on August 7, 2010 3:10 AM

  18. From: Ritrattista

    Thanks for sharing this information. It's a big help for me to build my fan page and customize my page in Facebook. Maybe after I customize my page, other people will attract and add me as a friend.

    Posted by Ritrattista on August 9, 2010 2:31 AM

  19. From: Moving Quotes

    An old post, but I haven't noticed the iframe feature on my personal facebook account! Bookmarking this and applying the script later. Thanks for sharing!

    Posted by Moving Quotes on August 11, 2010 5:46 PM

  20. From: Petr Macek

    Thanks for the post, a bit too techy but I will get through it :), right now I am planning to create my own customized tab so this info comes handy :) Thanks, Petr

    Posted by Petr Macek on August 13, 2010 5:16 PM

  21. From: DropShip

    Excellent series you have here. This code should be really helpful, thanks so much for sharing :D

    Posted by DropShip on August 17, 2010 3:21 PM

  22. From: Gemma

    This was extremely helpful for me! I hope to read more of your tutorials in the future!

    Also, as a side note: do you recommend other social networking sites for businesses aside from twitter and facebook?

    Posted by Gemma on August 19, 2010 2:45 PM

  23. From: cgr007

    Hey Fred,

    Thanks for this cool piece of code....and BTW love the photographs in your pqGallery fanpage/slideshow.

    Two questions I have are:

    1. How did you get to display your "Contact Form" box below your profile box (and/or to the left of the "static FBML/Landing Tab" space?

    2. How did you get a FB dialog box to load with the "Thank you for your comment" message, once the Ajax Form post had completed?

    Posted by cgr007 on September 3, 2010 11:05 AM

  24. From: Sonya

    Thank you so much for sharing your very useful instructions :)

    I am wondering if you could instruct me what would be the best way to go around adding a like button to the FBML tab.. that is if I would have some image or link that people could like?

    Thanx!!

    Posted by Sonya on September 14, 2010 4:59 PM

  25. From: InspiroHost

    Thanks for sharing the code, mate. However, businesses today mostly outsource this task to other companies having an expertise in facebook page development; since it saves them much time and hassle. A lot of cost effective solutions are available in the market.

    Posted by InspiroHost on September 15, 2010 11:28 AM

  26. From: Web Design and Hosting

    Those are good info of some useful codes and i am very much confident that these codes will surely be helpful in maintaining the pages. It is very rare that you get such amazing info.

    Posted by Web Design and Hosting on September 19, 2010 10:27 AM

  27. From: anchorage movers

    That's awesome, I had no idea you could put an iframe into Facebook. This opens up a lot of creative options!

    Posted by anchorage movers on September 21, 2010 2:01 PM

  28. From: Bulk Solid

    Wow, it was quite a discovery for me pal. I never really did imagine that Facebook is actually using iframes. Now, i could customized better my facebook account just like my other social networking sites. I'm so glad you shared it. Thanks again!

    Posted by Bulk Solid on September 25, 2010 3:22 AM

  29. From: joe brown

    You had written details for facebook. I like it.

    Posted by joe brown on October 13, 2010 4:41 AM

  30. From: Rene

    Great code thanks a lot! Worked very well for me after trying a bunch of other posts.

    Posted by Rene on October 28, 2010 11:14 PM

  31. From: Shallum

    hello i used this feature it worked for me but suddenly it is not working now? i haven't changed any code or anything?plz help

    Posted by Shallum on October 30, 2010 2:58 AM

  32. From: Brad

    Ummmm... I kind of love you right now. This code just saved my a$$. Thanks a million. This is much more reliable than other setInnerFBML codes out there to get the iFrame working in static FBML which won't load on click if set to default page and also won't load if the url with the ?app=380830893... parameters are in it. Very nicely done.

    Posted by Brad on November 18, 2010 4:21 PM

  33. From: Christian Natklub Købehavn

    Does this info about iframes on Static FMBL tabs still apply? Or perhaps it has stopped working permanently since Facebook is planning to change how things work and perhaps kill FBML in time, if I have understood it correctly.. Anybody knows!?

    Posted by Christian Natklub Købehavn on November 26, 2010 7:41 AM

  34. From: Kaan

    Hi,
    This still works. Thanks a lot for sharing it.

    Posted by Kaan on December 13, 2010 6:03 AM

  35. From: Soumik

    This is a great piece of code you've shared...I was able to implement it yesterday and it was working...but this morning I wake up to find out that it no longer is working.

    Has anyone else experienced the code working and then breaking without any changes whatsoever? Any work around?

    Thank you!

    Posted by Soumik on December 15, 2010 7:09 PM

  36. From: abyz

    Nice tutorial ! thanks for all ...

    Posted by abyz on December 16, 2010 11:51 AM

  37. From: cgr007

    Thanks much!!!

    Was able to use this code for my Facebook FanPage:

    Best,

    C

    Posted by cgr007 on December 27, 2010 11:12 PM

  38. From: San Diego Assisted Living

    Excellent information! Yes this still works, what a great way to leverage FB. I've added links to posts before, but nothing this powerful!

    Posted by San Diego Assisted Living on January 11, 2011 8:18 AM

  39. From: Sandeep Sohal

    nice post, I have bookmarked ur site, keep the good work

    Posted by Sandeep Sohal on January 23, 2011 4:12 AM

  40. From: Alakananda

    Absolutely brilliant. I had pretty much given up on IFrames on page tabs till I saw this :)

    Posted by Alakananda on February 8, 2011 10:18 AM

  41. From: Michael Walmsley

    Thanks for a great series of articles. I'm just getting started with FBML and this has been a great help to me. I'm looking forward to implementing some of these techniques on my FB fan page.

    Keep up the good work.

    Mike

    Posted by Michael Walmsley on February 10, 2011 6:46 PM

  42. From: Yanipan

    Hi, and thank you for a great tutorial! it really helped me.
    I have two problems I can't overcome so far...

    the first is that when a user click on an element to activate the tab, my app connects to facebook (it is the PHP SDK). after he allows the permission I redirect him back to the tab. the problem is that now he needs to click again on the AJAX activation element, and only now he gets into the app. Is there a way to connect him and leave him in the AJAX?

    the second question is - I need to pass a variable from the URL to the application. Is there a way to do this?
    thanks again,
    Yanipan

    Posted by Yanipan on February 13, 2011 11:20 PM

  43. From: phil@how to grow veg

    that is outstanding work - thanks for sharing it

    Posted by phil@how to grow veg on September 9, 2011 5:58 AM

  44. From: Maritime Lawyer

    I was searching for a code like this, and im so glad that i came across your post. It is appropriate to ask if I may use your code? Hopefully the answer will be yes. i`ll get back with details once I manage to make it work for me.
    thx for posting.
    Cheers.

    Posted by Maritime Lawyer on September 28, 2011 4:42 PM

  45. From: mutuelle

    Thanks for the tips,I'm not good at coding, but I used to use iFrame,to create dynamic tabs

    Posted by mutuelle on November 29, 2011 8:51 AM

  46. From: Tyler

    awesome! thanks for sharing.

    Posted by Tyler on February 3, 2012 5:07 AM

  47. From: Henry

    Nice article. Most people think the only thing you can do to a facebook page is add pictures and post on the timeline. I actually didn't know about this. Thanks again.

    Posted by Henry on December 27, 2012 5:03 PM

  48. From: Dave

    Thanks for making my fan page more appealing :)

    Posted by Dave on May 5, 2013 8:24 PM

 


Post A Comment




Remember personal info?




Comment Policy <--- Read the comment policy (Updated 1/13/2010).

About  Contact  Free Products Fred W. Black

RSS, EMail, Facebook...

Subscribe by EMail

RSS 2.0 Feed for www.pqInternet.com.
Add to Google Toolbar

Free Updates via EMail

Receive Free Updates.

Free Products and Software.

My Services

www.pqWorks.com

Search

Link to Me!

How to Link to this Blog.

Products

Products I Use & Recommend

AcQyro - Customer AcQuisition

30 Days to Change Your Life!

Z Plus Subliminal Clearing

www.aweber.com Opt-In List Management.

PayDotCom Affiliate Marketing through Paypal

Categories

All

ClickBank

Copywriting

Funny

Internet Business

Internet Marketing

Life

Search Engines: SEO

Social Media

Technology

Traffic

Truth and Freedom

Videos (free)

Web Site Design, HTML, CSS

Recent Entries

CISPA H.R. 624... More Invasion of Our Online Privacy

Google Panda Update Coming this Weekend

Still Fighting Google EMD Update

Google EMD Update... Sinking Websites by the Dozen!

Is CallMDPlus the Ultimate Affiliate Program?

Google Penguin = Pain...

Conflicting Thought Patterns: Is Fear of being Unplugged a Sign of Impending Failure?

SOPA (Stop Online Piracy Act) & Protect IP Pending Bills

The Lost Art (and Appreciation) of Quality

Knowledge without Wisdom is Dangerous.

11 Reasons You're Failing

How to Change Your Life in 30 Days?

Barney Fife Chases the SEO Bandits at J.C. Penny

Have You Been Slapped by the Google Ranking Adjustment?

Advertising on Facebook

All Entries

Archives

All

Money Attracting Products

Make Custom Gifts at CafePress

Blog Roll

Do More Than Pray (.com)

Terry Dean

Ryan Healy

ProBlogger

Internet Business Resources Blog

Michel Fortin

G. Brent Riggs

Jonathan Leger

Mark J Ryan

Effortless Abundance

Friday Traffic Report

Links

Pretend with Miss Kim DVD

Burlington Dance Center

Front Street Playschool

the IconFactory

Fred Black Music

Daryl Laws Sports Performance Blog

Williams High School Booster Club

Repairing Canon Lens Error

Cell Phones for Soldiers

Blue Solar Water Bottles

Custom Woodwork

About this Blog...

By:Fred W. Black

Contact Information

Powered by:Movable Type 3.34.

Copyright 2006 -2013, PhaseQuest.Com.
All rights reserved.

Subscribe by EMail RSS 2.0 Feed for www.pqInternet.com.

Add to Google Toolbar
My Facebook Fan Page
Twitter
Add www.pqInternet.com, to Google. Add www.pqInternet.com, to My Yahoo! Add www.pqInternet.com, to My MSN. Subscribe to www.pqInternet.com, with Bloglines Add www.pqInternet.com, to Your Technorati Favorites! Add www.pqInternet.com, to Windows Live

Some photos are by: Lee Hinshaw Photography

© Copyright 2006 - 2013 PhaseQuest, all rights reserved.

 

Get Free Updates!

Insert your name and e-mail address to receive a short notice each time I make a new post.

First Name:

Last Name:

E-Mail Address:

E-Mail again:

NOTE: You will receive a confirmation email. You must click the link in the email to activate your free updates. Please check your spam folder(s) if you don't receive the email.

*I value your privacy and will never sell, rent, giveaway, or abuse your information.