Easy iFrame loader

buy us a beer for our efforts
it’s more than grease that makes the wheels go round



Simple plugin that (at this time) uses a shortcode to late load iFrames using javascript.  This gets over 2 separate problems.

1.  loading of iframe does not happen until after the complete page has loaded by using the window.onload command, thus making page loading quicker when an iFrame is used directly in the HTML as an iFrames want to load first stopping the rest of the page loading.

2. gets over the automatic deletion of iFrame info from the editor when the user changes between Visual and HTML mode.

3. makes it easy for administrators to pre-determin the size of different iframes from the admin screen

How to use it

The shortcode has many different options to allow for complete control of the iFrame, taking in to account the need to have click text also. The shortcode details are listed below, there is another page with information on the template tags that are available

Defaults for the Shortcode

[iframe_loader width=”100%” height=”150″  frameborder = ’0′  longdesc=’ ‘ marginheight=’0′  marginwidth=’0′ name=’ ‘ click_words=’ ‘ click_url=’ ‘  scrolling=’auto’   src=’ ‘]

options

itemOptionsdescriptionDefaultcompulsory
widthpx or %Can be set as a percentage i.e 100% or as a px value, the px is not needed at the end of the number i.e. 300100%yes
heightpxCan be set as a px value only, the px is not needed at the end of the number i.e. 250150yes
frameborder0 = no
1 = yes
Puts a border around the iframe, mostly unwanted0no
longdescURLA link to the a URL where there is more information about the iFrame, mostly used for blind peopleno setno
marginheightnumber valueadds a margin above and below the iframe0no
marginwidthnumber valueadds a margin to the left and right of the iframe0no
scrollingyes
no
auto
Controls the scrolling when the iframe content is larger than the iframe areaautono
namea nameSets a name for the iFrame so that it can be controled by Javascript laterno
srcURLThe URL of the iFrameyes
click_wordsSentenceThe words that go just below the iframe that are clickable to allow a user to perform different activites. Like open a larger Map when using google maps. *must be used in conjunciton with click_url or nothing will showno
click_urlurlThe URL of what you would like the click_words to go to. Like opening a larger Map when using google maps. *must be used in conjunciton with click_words or nothing will showno

Example usage
[iframe_loader src="http://player.vimeo.com/video/15507608" height="225" width="400" click_words="go to vimeo to view it" click_url="http://vimeo.com/15507608" ]

gives

[iframe_loader src="http://player.vimeo.com/video/15507608" height="320" ]

gives

example with Amazon Link code for Affiliates
[iframe_loader src="http://astore.amazon.com/wwwphatreacti-20" height="1000"]

or

example with Amazon link code to buy now ACDC
[iframe_loader src="http://rcm-uk.amazon.co.uk/e/cm?lt1=_blank&bc1=3B5998&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=phatreaction-21&o=2&p=8&l=as1&m=amazon&f=ifr&md=0M5A6TN3AXP2JHJBWT02&asins=B00009QI1U" height="240" width="120"]
or the more simple
[amazon_buy src="http://rcm-uk.amazon.co.uk/e/cm?lt1=_blank&bc1=3B5998&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=phatreaction-21&o=2&p=8&l=as1&m=amazon&f=ifr&md=0M5A6TN3AXP2JHJBWT02&asins=B00009QI1U"&393

or

92 Responses to “Easy iFrame loader”

  1. Joe says:

    Doesn’t seem to work with Amazon affiliate link code.

    • andyk says:

      Joe,

      Just in case, I’ve just setup an A Store also. did not make the height=”4000″ or the scrolling=”no” as suggested by Amazon, but I did not want to put the comments too far down the page…

      regards
      Andy

  2. andyk says:

    Joe,

    As you can see from the two new examples I have provided it works 100% with affiliate links and amazon and iframes. Please give me a link to where you think it does not work correctly?

  3. Chris says:

    My url that I am trying to use has [ and ] inside it, is it possible to still use this?

  4. Chris says:

    Andy,
    Thanks for the great job on the plugin. Once I start making money with my site I’ll send some your way!

    One question. Is it possible to center the iframes on the page? For instance, if I have 2 Amazon product links, can I have them show up on the same line. Here is what I currently have, but I’d like to have both products on the same line.
    http://ridinginhd.com/movie-production/helmet-hd-video-cameras-gopro-hd-vs-contourhd/

  5. andyk says:

    Chris, on you page you have forgotten to set the width and it has defaulted to 100%, what you might find easier is the [amazon_buy sr=”"] shortcode which is already setup with the right height and width for an amazon buy button.

  6. Robert says:

    Hi, thanks for the great plugin.

    I have one question. I want to align the iframe to the right but i tried several times but failed to get it to work.

    Is it possible?

    • andyk says:

      Hey Robert,

      It was impossible before to effect all of the different shortcodes or functions, but now (release 1.3) they are all able to accept a class setting.

      so in a shortcode you just add class="classname"

      for the functions they all now have a class option at the end of them.
      i.e.
      A Store
      add_iframe_a_store($src, $width='', $height='', $class='')
      Amazon buy
      add_iframe_amazon_buy($src, $class='')
      You Tube
      add_iframe_youtube($video, $click_words='', $click_url='', $class='')
      Vimeo
      add_iframe_vimeo($video, $click_words='', $click_url='', $class='')

      The original function add_iframe_late_load always had the option to add a class.

      regards
      Andy

  7. kk says:

    Hi,
    The plugin does not work for my post. I did two examples:
    [iframe_loader src=”http://www.skilled2heal.com" height=”500″ ]
    [iframe_loader width=”500” height=”500″ frameborder = ’0′ longdesc=’ ‘ marginheight=’0′ marginwidth=’0′ name=’ ‘ click_words=’ ‘ click_url=’ ‘ scrolling=’auto’ src=’ http://www.oceantrilliumsuites.com/amen.htm‘

    The first one gives me a gray box. The second gives me my host gator 404. Still in draft mode, not sure if you can see it, but here is the link:
    http://www.kshotz.com/?p=668&preview=true
    Thank you,
    K

  8. kk says:

    Thank you so much for your quick and accurate help…it was those quotes.
    K

  9. Rob Hubert says:

    Hi,

    I’m just started with WordPress and by looking on Google for a WordPress php script I came on a website with a lot of php scripts for WordPress and find your file. I have installed it and read the readme.txt file. I can English, but I don’t understand anything.

    I think I can use your script to called html files into a page in wordpress. But there is a little problem for me to understand. I want to put the follow link into a page http://www.genealogie-hubert-schuwer.nl/updates.htm , and I have make this link: [iframe_loader src=”http://www.genealogie-hubert-schuwer.nl/updates.htm -20″ height=”1000″], I get the follow error:

    The requested URL /wordpress/”http://www.genealogie-hubert-schuwer.nl/updates.htm was not found on this server.

    Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.

    I do something wrong, but reading the readme file and the text on your website I didn’t see a solution.

    I hope you or a reader can help me out.

    Thank you for your help.

    Best regards,

    Rob
    The Netherlands

    PS I hope you get a bountiful baby boy in May.

  10. Rob Hubert says:

    Hi Andy,

    Thank you very much for your checking and write a special page in Dutch for the solution. You don’t have to apologies for your Dutch. It’s good to read and understandable. It’s working on my test page.

    My apology for asking, but can you help me how I must link the iForm with the follow PHP link?

    You may do it in English and I thank you in advange.

    Rob

  11. Rob Hubert says:

    I see the link isn’t to see, but it’s now the link with the text “You may do it in English…….”

  12. Rob Hubert says:

    Hi Andy,

    You can delete my question about de PHP setting. I have it running on my test site, but I have still a question about the screen.

    So as you can see ( http://www.genealogie-hubert-schuwer.nl/wordpress/ ==> Option PHP) you can see that’s it’s running, but how can I fix the width so that everything is in the left field. I have set it to 100%, but I miss some of the page.

    Can you give me a solution?

    Thanks,

    Rob

  13. Cornell says:

    I’m looking to display a default link/website in an iframe, and give visitors an option to change website viewed in the iframe.

    Any suggestions on how I can add an option for website visitor to type in a URL?

    (For an example, see http://tagtag.com/site/info/emulator)
    __

    Thanks in advance,

    Cornell

  14. Rob Hubert says:

    Hi Andy,

    With my apology for the questions. I have find out what I can do. I have now search for one column templates and have found some.

    I thank you.

    Rob

  15. Alex says:

    Hi Andy,

    The iframe src url has a variable height depending on links clicked within the iframe. This means I cannot give it a fixed height, since if I click a link within the iframe, it will not “autogrow” to accommodate the now open container in the iframe and it’s new height.

    Is this possible to have the iframe auto grow height wise to the size of the actual source? A solution that won’t work is setting height to 100%, but that conveys the message of what I am trying to get done.

    Kind Regards,
    Alex

  16. Stuart says:

    Hi Andy
    Thanks for the plugin.
    I’m looking to embed part of another webpage within a webpage and I read that an iframe enables you to do this verses the traditional html object and embed tags.

    Please can you advise how to embed only part of a webpage.

    For example if I just wanted to embed one of the posts on this page.

    Can this be done?

    Thank you in advance for your help

    Stuart

  17. Stuart says:

    Hi Andy

    As with 90% of problems. Most people who ask them manage to solve them within 30 minutes of asking the question.

    So……I’ve found a work around and no longer need the answer to the question above.

    Thanks anyway.

    Stuart

  18. Phil says:

    Hi Andy,

    I installed the plug. Trying to use it with an aStore but can’t seem to get the scroll bar at the bottom. I didn’t see your above post, so I originally made the height=”4000″ and the scrolling=”no” as suggested by Amazon. I changed the height to height=”1000″ but didn’t know how to change the scrolling . I am still not getting any scroll bar. Any advise would be highly appreciated!

    Phil

  19. Phil says:

    Disregard that post. I got it to work. On my first sale I WILL be back and make a donation. Thanks for a plugin that offers the ability to use an aStore! Highly appreciated!!

    Phil

  20. Greg says:

    Anyway to get the same results from within webpress.com? They won’t let me load a plugin and I wanted to display a page from another site with my theme. Any backdoors that someone has figured out?

    • andyk says:

      there is no site called webpress.com I am guessing you mean wordpress.com.

      As you cannot install your own plugins on wordpress.com you are forced to only edit in HTML mode and enter the codes for iframes. Or of course you could make the jump and purchase your own website

  21. Mike says:

    It’s probably me because this is the first time I’ve worked with iframes, but I followed the example exactly for placing an Amazon affiliate product link in the iframe and all I get when I display the page is the actual code. Here is basically what I have: [buy_amazon src="http://rcm.amazon.com/e/cm?t=i0xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"]

    I left out all the style info, etc. and just used the actual URL. What am I doing wrong? Thanks.

  22. Mike says:

    Also, I notice in the example on this site you use “amazon_buy …” but in the usage or FAQ instructions on the plugin it’s listed as “buy_amazon …”. I’ve tried it both ways and can’t get it to work. My actual string is: [buy_amazon src="http://rcm.amazon.com/e/cm?t=i0d682-20&o=1&p=8&l=as1&asins=1451594615&fc1=000000&IS2=1<1=_blank&m=amazon&lc1=0000FF&bc1=000000&bg1=FFFFFF&f=ifr"]
    If you want to see the actual page it’s: http://iaftp.org/other-resources/

    Thank you.

    • andyk says:

      My apologies it should be amazon_buy the FAQ is wrong. I will change it soon

      i.e.

      [amazon_buy src=”http://rcm.amazon.com/e/cm?t=i0d682-20&o=1&p=8&l=as1&asins=1451594615&fc1=000000&IS2=1<1=_blank&m=amazon&lc1=0000FF&bc1=000000&bg1=FFFFFF&f=ifr”]

  23. Mike says:

    OK, but it still doesn’t work. Now I just get a blank screen. The URL is valid.

  24. Mike says:

    My apologies, the problem seems to be with Chrome since it displays properly in IE and Safari. I researched iframes with Chrome and it appears to be a long-standing problem. Sorry to have troubled you with this.

  25. Ifan Payne says:

    Can Easy iFrame Loader be used to link to jAlbum? If so could you give an example if an album has been loaded to, e.g., http://www.yoursite.com/album/ ?

    Thanks in advance

    • andyk says:

      No idea, I do not support jAlbum, they do. But if it is already a html page you can have it as an iframe. although it’s much better just to add it in to your own code as an embedded item

  26. BlackM1lk says:

    Hey Andy,

    i just installed your plugin and it instantly worked. Goob job :)

    However i have a question concerning the iframe settings: I want to show product details of the manufacturer on my page. Therefore I need only the area with the productdetails on my page and not the whole manufacturer website. Is it possible to “cut” the iframe? For example dont show the first 200px of the target domain? I tried marginheight/-width=”200″ but that has no effect at all + i want only a margin above.
    Another way: I could shrink the iframe and move it with padding to the desired area. I tried “padding-top” but that didnt work out (guess because its CSS, im not good with coding).
    Or a third way: The scroll bars are on the desired area by default.

    Dont get me wrong I dont want to “steal” anything, i just want to present the product details in an appropriate way (first impression). Most average users will think “wtf!?!?” if they see a website in a website.

    Hope u can help me!

    Greets!

  27. BlackM1lk says:

    I forgot my code :S And im using WP 3.1

    [iframe_loader width="100%" height="400" frameborder = "0" longdesc="" marginheight="200" marginwidth="50" name="" click_words="Manufacturerpage" click_url="http://www.Manufacturerpage/..specifications" scrolling="yes" src="http://www.Manufacturerpage/..specifications"]

  28. Carley says:

    Hello,

    many thanks for a great plugin! Is there a way of adding a negative top margin?…a negative value for a bottom margin would also be good!

    ie I would like to eliminate a banner which is always at the top of the page I am pulling in (same with the bottom if possible)

    Many Thanks

  29. ben says:

    Hi andyk,

    Thanks for your work.

    It seems that the window.onload = document.write() raises a javascript error in IE 8. (don’t know for IE6/7)

    Using window.onload = new function(){document.write(...);}; seems to solve it.

    Here is a proposed fix (tested agains IE7/8, FF and Chrome):


    $html .= "window.onload = new function(){\n";
    $html .="document.write(\"";
    $html .=" \"); \n ";
    $html .="};";
    if (!empty($click_words) && !empty($click_url)){$html .="window.onload = new function(){document.write(\"".$click_words."\");}; \n";}

  30. ben says:

    Some text was cut off in previous post. I can email the full fix if you want.

  31. How do you use this plug in so you dont lose HTML code when you toggle back and forth from “visual” to “HTML” editor?

  32. Crystal says:

    Wow, this was sooo much easier than I thought. Thank you soooo much for this awesome plug-in!! Just tried it in my clients WordPress website and it came out perfectly, thank you so much! I’ll be using this for my own site next. Thank you again!

    http://haitikidsnow.org/?page_id=48

    Sincerely,
    Crystal Calhoun
    Made To Be Unique

  33. Matthew says:

    Is it possible to add a target=”_blank” feature so that the click_url opens in a new tab/window?

  34. Jeanie says:

    Great plugin! Everyone’s questions here helped me to get my iframes for Amazon products to load properly – and stay put!

    I will definitely be donating Andy, because you are right – your plugin will save me lots of work and trouble! Thanks again :)

  35. David says:

    Not working in IE 8. Error message saying “not implemented”. Same error is popping up when displaying this page as well. The not implemented error is referencing the document.write command

    window.onload = document.write(” “);

  36. Got the vimeo working, thanks. Had forgotten the player. bit.

  37. Got the youtube working as well using this:
    [iframe_loader src="http://www.youtube.com/embed/QBB_FSaDfA0?rel=0" ]

    Thanks

  38. Neil says:

    Andy, wondering if there’s an easy way to get text to appear to the right of the iframe, allowing the paragraph to wrap around the frame.

    I know it’s likely dead simple and I just need more coffee, but I had a feeling that asking you might prove fruitful.

  39. maro says:

    Hi Andy,
    I promise you by the end of today I will donate $25 if you can solve this issue. The whole point of using iframes for me is so my youtube videos will work on a mobile phone and ipad.

    They worked great but of course WordPress stripped them out of the visual editor and the people that are going to take over the site prefer the visual editor.

    Your site allowed me to go to bed early for the first time in a week… except this morning I noticed that ALL the videos loaded with [iframe_loder] do not play on the iphone! They just spin the loader an never play. My other TubePress plays but sends people to Youtube.

    I want to use your plugin for all the videos. Any Ideas? Or is it back to the drawing board…

    Maro

  40. P. says:

    How do i add a code to the iframe, so that when you open the page it opens a new window instead of opening it inside the template. The reason for this issue that i wanna do a iframe to a different site, but when people click links on that site – It opens up on the same page and it is difficult to see everything because of borders and so on.. So i want to be able to click that page with the iframe and it opens up a “blank” page with it.. How is that done? ?

    Hope you can help.

  41. Todd says:

    I’m trying to load a iframe into my WordPress site and I’m getting the following error:

    “Plugin cannot be rendered with the specified parameters.”

    Any ideas?

    Here is the shortcode I’m using:

    [iframe_loader width="100%” height="600″ src="https://donorhub.org/donate/2"]

    Thanks,
    Todd

  42. Deliq says:

    Hi Andy,

    I want to embed only part of the webpage. How is that possible? Stuart has asked this question before, but it never got answered, because he found a way around. Can any of you help, please? Thank you.

  43. [...] it in this WordPress blog post as an iFrame (WordPress doesn’t play nice with Flash) with the Easy iFrame Loader [...]

  44. Nina says:

    I’ve got you plugin and it is working fine, but was wondering if there is any way I can push down the content I am getting via the iframe?
    Meaning, on this link: http://spanserv.com/wordpress/iframe-test-euqestrian/

    I don’t want to load the first say 200px of the page as the logo will be repeated. Any ideas on how to do that?

    Thanks, Nina

  45. Frank says:

    Hi

    Your plugin works fine on a page and it showed the Amazon link perfectly, just like your example, but when I use the widget on the sidebar, I can’t get it to load.

    Your example for Amazon (src=”http://rcm-uk.amazon.co.uk/e/cm?lt1=_blank&bc1=3B5998&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=phatreaction-21&o=2&p=8&l=as1&m=amazon&f=ifr&md=0M5A6TN3AXP2JHJBWT02&asins=B00009QI1U”) – is this the iframe URL to add to the widget?

    I’ve tried various combinations, but nothing happens. Please advise what should go in the iframe URL field in the widget from the example above and are there any other necessary settings required.

    Thank you

  46. Logan says:

    How do I get google maps to work. I am using the following and all I get is a generic google map page?

    [iframe_loader src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=7826+shrader+road,+richmond,+va&aq=&ie=UTF8&hq=&hnear=7826+Shrader+Rd,+Henrico,+Virginia+23294&ll=37.624829,-77.525543&spn=0.011047,0.022638&z=14&output=embed" width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"]

    Thanks for your help!

  47. Easy iFrame Loader was perfect for my project. Worked flawlessly in Chrome, IE 8, FF, Safari. Thank you!

  48. Helen says:

    Trying to put the following quiz code on my worpress.org blog and it doesn’t work at all. Tried in the html code and in the visual code.

    What am I doing wrong?

  49. Dan says:

    I have an iframe with a php page, I can go through two steps until I get to a paypal button, at this point the paypal button will not work, it is part of a form. Is there any special code to get a form to work in this plugin?

    this is the code

    <input type="hidden" name="item_number" value="”>

  50. Terry says:

    I am building a new wordpress website and I am using iframe to embed another website into a page. The problem seems to be that the embedded website is wider than my website so it cuts off the right side. See http://www.strategicprofits.ca/sky-solar-larger-solar-energy-projects/

    I have played with widths in the iframe code to no avail. Is there a way to shrink the embedded website so it will fit? Or a way to allow the embedded website to spill out to the right so it will all appear?

    Thanks in advance for any advice!

  51. Jonathan says:

    Say, would I be able to create some buttons that would update the iframe to show a different vimeo video?

  52. Kenny says:

    [a_store src="http://astore.amazon.com/theangbirrev-20"]

    I put that code in my page and on the preview it shows up but then when I publish it , it does not show up.

  53. Kenny says:

    It works now I dont know what happened but its going now.

  54. Richard says:

    The WordPress 3.3 update appears to have broken this plugin. I can no longer get the height specification to work.

  55. banderaz says:

    Hi…
    Would you please help me,
    I have setup anamazon astore, it works well. but i found long hollow space between the store and my wp footer.
    Do you have atips to set the height adjusted to the store content?

    Thank you so much before

  56. Huss says:

    Hi there, thanks for making this plugin.
    Can you please integrate the suggestions on this page
    http://www.sitepoint.com/forums/showthread.php?593824-Can-I-make-an-iFrame-autoscroll
    into this plugin? This plugin will then be invincible.
    I hope you can do this soon. Really appreciate it.
    Thanks

  57. VJun says:

    I love this plugin – thanks so much!

    I was wondering if there was a way to make the website inside the iFrame smaller to prevent scrolling?

  58. Maurice says:

    Andy,

    Your plugin works good. Can I make a suggestion? Nowhere on the plugin admin page is there a link to your site, a link to a help page, any setup or embed command help, nothing hat would help a user get the iframe set up for the first time. The only way initially to find this information is to go look up the plugin in the install page again and try to find a link from there. This is such an easy problem to fix. Put your help info on your plugin page with examples, and maybe a link to your support page. So many plug developers forget that most people are installing this for the first time when they use it and need this info.

    Thanks…

    • andyk says:

      I did not forget. I have not so much interest in offering free support for something that people do not donate for.

      • Maurice says:

        Not even a single code example of how to use the plug shortcode in a post or a link to your site so people can find your site? That seems pretty basic… just the content at the top of this page would tell people how to use it without having to go find your site on their own.

Leave a Reply