***UPDATED: 5/16***
Recently, I needed an iFrame page template so that I could create pages that appear on multiple external websites, especially Facebook pages. So in order to do this, I had to remove the header, navigation, footer, breadcrumbs, and post title. For styling, I added an iframe custom body class. Here is a Sample iFrame Page.
So here is the code from the page:
[php]
<?php
/*
*Template Name: iframe
*/
remove_action('genesis_header', 'genesis_header_markup_open', 5);
remove_action('genesis_header', 'genesis_do_header');
remove_action('genesis_after_header', 'genesis_do_nav');
remove_action('genesis_after_header', 'genesis_do_subnav');
remove_action('genesis_footer', 'genesis_do_footer');
remove_action('genesis_before_footer', 'metric_include_footer_widgets');
remove_action('wp_head', 'genesis_header_scripts');
remove_action('genesis_before_loop', 'genesis_do_breadcrumbs');
remove_action('genesis_post_title', 'genesis_do_post_title');
add_filter('body_class','my_body_classes');
function my_body_classes($classes) {
$classes[] = "iframe";
return $classes;
}
genesis();
?>
[/php]
For example, it can be styled by adding something like the following:
[html]body.iframe {
background: none repeat scroll 0 0 #FFFFFF;
}[/html]
You could also remove the sidebar or you could just force the layout to be full-width:
[php]add_filter('genesis_pre_get_option_site_layout', 'wps_iframe_layout');
function wps_iframe_layout($opt) {
$opt = 'full-width-content';
return $opt;
} [/php]
The possibilities of this are endless! I would love to know what you do with this!
John says
Thanks for sharing this! I am guessing you could add a remove action for the genesis_sidebar and just have the body class?
Which would be great for facebook.
wpsmith says
Hello John,
Yep! It was created for Facebook pages!
You could remove the sidebar or you could just force the layout to be full-width:
[php]add_filter(‘genesis_pre_get_option_site_layout’, ‘wps_iframe_layout’);
function wps_iframe_layout($opt) {
$opt = ‘full-width-content’;
return $opt;
} [/php]
Thanks John! I’ve added this information to the Post and to the file download!
Adam W. Warner says
This looks pretty handy, however, I’m not sure I’m seeing the whole picture and I wonder if you could elaborate more on the use case scenario?
I understand I create a page template, remove what needs to be removed, and style it accordingly, but how would one use this in FB in your example? You just grab the source of the page output and plop that into an FB page tab?
Just trying to see the whole picture…
Adam W. Warner says
After a little investigation, I believe I’ve found the solution to my question. You have to sign up as a Facebook App developer and while creating your own app, link to the page using your page template above.
This is the link that lead me to the answer….
http://www.socialmediacharity.com/2011/03/create-facebook-iframe-tab-facebook-pages/
Now onto to create something awesome! 🙂
wpsmith says
Hello Adam,
Ok, big picture. Facebook, just moved to an iframe system departing from their FBML. So, here’s what I do (and of course there is the manual process): (1) Use the Facebook Tabs Manager plugin (my post). The plugin doesn’t do much for you except some Facebook Javascript and CSS (for which it can easily be done manually as well if you want to do the extra work); however, it does provide helpful steps to fill out the Facebook app, which is what you have discovered). (2) If you want a menu, use the Facebook Menu Shortcode (which I use to create a Facebook menu of the pages that I have converted for Facebook use, even a special Like Me page with hidden content as my “home” Facebook page, so a mini-site within Facebook). (3) Finally, design the page accordingly.
Please let me know if you need anything else!
Thanks,
Roger Pilon says
As I was fighting to add a php include in a template WP file without success, I decided to make a search about “Genesis” + “iframe”. Guess what, I found your post!
I have 2 options, I can buy it directly from Genesis or buy it from you. You seems to know a lot about Genesis and WP.
Can you contact me by email as I have a few questions before deciding to make the move or not??
Thanks
Roger Pilon