Blog

werewolf_sm

Tutorial: Loading your SlideDecks via iframes (aka the almost-silver bullet)

On August 23, 201215 Comments

We all love our WordPress plugins, but make no mistake – making them work for everyone can be a hairy beast. Each plugin developer has no control over how their user’s theme is coded, or which other developers’ plugins & scripts are being loaded, and how they behave. Given the openness of the WordPress community, it’s to be expected, but sometimes these external factors can conflict with each other to produce…interesting results…

Sometimes theme or script conflicts can prevent SlideDeck 2 from appearing and functioning as it should, right out of the box. Thankfully, we recognized this pretty early on in our internal testing, and we implemented an awesome little feature that can nip the majority of these issues in the bud – by loading them in iframes.

Already know about iframes? Skip straight to the code, below.

No, Apple did not invent the iframei-What?? Is this an Apple product?

No, no, no – iframes have been around a lot longer than the shiny white products of Jobsian heritage. They’re essentially mini web pages that are displayed within a window embedded in the surrounding parent page. Although you may not recognize them, you’ve definitely seen them around: Facebook Like buttons, Twitter search boxes and YouTube videos – all of these commonly-used social web elements are actually embedded in pages using iframes

So why is this helpful to us?

Since iframes are actually windows onto entirely separate pages, the content displayed in them is pretty well-insulated from anything else that’s happening on the surrounding page – whether that’s conflicting CSS styles, or javascript. Embedding your SlideDeck in an iframe therefore lets you effectively sandbag it from other conflicting elements on your page, thereby ensuring that it renders exactly as you intended.

Ok, I’m sold. How do I embed my SlideDeck inside an iframe?

Are you ready for this? We have two different ways to do it. Don’t worry, this won’t hurt a bit!

1. To embed a single SlideDeck inside an iframe: Simply add the parameter iframe=1 into the shortcode you used to embed the SlideDeck in your post or page – here are a couple examples:


<?php echo do_shortcode( '' ); ?>


To embed all SlideDecks inside iframes, moving forward: Under “SlideDeck 2 » Advanced Options“, toggle the “Include the “iframe=1” attribute in all new shortcode embeds by default” option to ON (this will not affect any already inserted SlideDeck shortcodes, so you will need to go back and modify those)

What about SEO? Aren’t iframes, like, the devil when it comes to search rankings?

It depends what you’re going for. Google does actually crawl the content and links contained inside iframes, and gives credit to the originating page. This means that embedding your SlideDeck inside an iframe will confer no SEO benefit to the page you embed them on. The good news, however, is that your SlideDecks all reside locally on your WordPress installation, so your overall site will still be credited as the source of the content.

Hopefully that gives you a good understanding of our ‘silver bullet’ solution for script and styling conflicts. Still got questions? Let us know in the comments!

 

Leave a Reply

Comments (15) Responses

  1.  

    Belleza

    Hi, I would like to use slidedeck outside wordpress, but I want to admin the slideck from wordpress, I mean to call only the slidedeck from the wordpress using iframe at a non WP site , could it be done without breaking the head coding? thank you 🙂

    •  

      Jason

      Hi Belleza – technically, this is possible, but it’s not something that was built in as an official feature.

  2.  

    LJ

    So, my YouTube videos weren’t playing. I did this little doozy of a trick and PRESTO! Videos up and running. Thank you for the silver bullet fellas. Keep up the good work!

  3.  

    Matt Cassarino

    I was noticing the full version image of my final slide would show over the entire page while the page was loading. It would then disappear and Slidedeck would function as normal. But the “flashing” of the image was really annoying and was easy to replicate by doing a hard refresh of the browser (holding down the shift key and clicking refresh).

    Glad that I found the iframe solution. It works great and doesn’t seem to have any negative effects for the user experience or SEO. Nice!

  4.  

    Olivier

    When i activate iframe, navigation is deactivate automatically …

  5.  

    Louise

    When I modified the code, my page displayed with duplicate slide decks, one on top of the other. I am trying to fix this bug message. Suggestions welcomed

    Undefined index: HTTP_USER_AGENT in /home/sanostec/maxairnosecones.com/wp-content/plugins/slidedeck2-personal/lib/constants.php on line 54

    •  

      Dave

      Hi Louise, this isn’t really the right place for a support question like this. Please go ahead and post a support request by clicking on the “Give Feedback” links in the plugin or going directly to http://dtelepathy.zendesk.com/ and submitting a new ticket. Thanks!

  6.  

    Jamie

    Loading in an iFrame is definitely a good way to isolate the code and make it run no matter what. It’s also great for sites that have an older code base and or conflicting CSS styles.

  7.  

    scott

    Just wondered how the iframe=1 will work with the ress=1 do they seem to conflict in any way?

    •  

      Dave

      Hey Scott, you should only run one attribute or the other on the Shortcode. The iframe=1 attribute just places your SlideDeck in an IFRAME and crops off the SlideDeck inside it if the IFRAME is shorter than the SlideDeck’s dimensions (such as when it is deployed in a narrow column). The ress=1 attribute will also place the SlideDeck in an IFRAME, but will scale the SlideDeck accordingly when the space it exists in resizes.

  8.  

    Ben

    It doesn’t work for me. Looks like it’s going to load for a moment and then blank page. No slidedeck.

  9.  

    Jorge Ihlenfeld

    I use this always with Slide Decks.