Your the experts.. Please help! :)

Right.. What I am trying to achieve I am not sure can be done..

I want to have a separate wordpress theme for my facebook iframe… My facebook page users will be able to use sections of my site via facebook and post ads via the facebook iframe.. The problem is obviously my site template is too large to fit in the iframe.. I need to find out how to implement a different theme for the facebook iframe..

Can anyone give me any pointers?

Kindest Regards,

Danny.

  • Mason
    • DEV MAN’s Sidekick

    Hiya Danny,

    So you want to show your wordpress theme/content on your facebook fanpage?

    Assuming that’s the case and that you already have a facebook fan page and app set up, you should be able to create a page in WordPress. It will be assigned a body class by default (so if you create a page called “fb” a body class of “fb” is created).

    This will allow you to create a whole section of new stylings for your theme that can be formatted to fit your facebook iframe dimensions.

    Does that do what you’re looking for? Let us know!

  • Danny
    • Design Lord, Child of Thor

    Ahhhhh, new problem.. I want the facebook page user to be able to navigate through the whole site using the iframe as well as post classified ads (Using your classified plugin..)..

    The fb class is only applicable to that one page and will revert back as soon as the user changes the page..

    I have been brainstorming and have come up with:

    A mirrored wordpress installation on a fb. subdomain using the same database tables.

    BUT the facebook user will want to post classifieds via the wp install on the subdomain, the text will show up on the main site but any uploaded pictures will be bound to the subdomain and not be accessible via the main site.. Is there a work around for both the main wp install and the sub domain install to use the same uploads/images folder?

    Also, I was thinking about mobile themes.. You can get wp to detect a mobile browser and provide a theme for it.. Can you get it to detect whether the page is being served in an iframe and apply the same principles?

    Many thanks,

    Danny.

  • Danny
    • Design Lord, Child of Thor

    Sorry… Seem to be blasting this thread :slight_smile:

    Another idea….

    Using jquery to output the size of the iframe viewport using -> http://api.jquery.com/width/

    I have tested the script within the facebook tab and it outputs 743px.. I understand that jquery might be beyond the scope of this website but if anyone knows how to convert the 743px into something usable as a body class that would be great..

    i.e if viewport = 743px add fb to body class….

    Kind Regards,

    Danny.

  • Kruzen
    • The Incredible Code Injector

    Lemonfresh,

    Facebook pages aren’t really designed to allow full sight navigation through an iframe, however you might be able to achieve some of what you’re looking for by building a facebook specific section of your website that has links to doing things like posting a classified ad, etc.

    http://pixelloop.org/2011/03/15/facebook-iframe-fanpage-with-wordpress-and-thesis/

    This link has good information on removing theme elements from a page to work well with facebook.

    You might frame in a custom /fb/ section of your site that has links to “post a new classified” or “view a new classified” etc, with a target=”_new” so they get the full browser experience.

    If you are trying to emulate an in-page application with the full functionality of your site, your best bet may to load something like http://themebot.com/webmaster-tools/1-wordpress-theme-switcher-reloaded (I’m not sure if the theme switcher that WPMU makes allows for inurl theme switching), and then setting up your frame source to have the hardcoded theme change in the source URL.

  • Danny
    • Design Lord, Child of Thor

    I have found out how to define a stylesheet for facebook..

    The width of a facebook iframe is 520px, so, it is a case of simply adding a reference to your facebook stylesheet by inserting:

    <link rel="stylesheet" media="screen and (max-width: 520px)" type="text/css" href="<?php bloginfo('template_directory'); ?>/location of your facebook.css file" />

    I hope this helps someone who wants to provide any wordpress page via an iframe without using a plugin..

    Also, if you wanted to hide specific elements, i.e the navigation (so users do not navigate through your site via the iframe) all you would add to facebook.css is:

    #your-element {

    display:none;

    visibility:hidden;

    }

    Kind Regards,

    Danny.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.