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
| item | Options | description | Default | compulsory |
|---|---|---|---|---|
| width | px 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. 300 | 100% | yes |
| height | px | Can be set as a px value only, the px is not needed at the end of the number i.e. 250 | 150 | yes |
| frameborder | 0 = no 1 = yes | Puts a border around the iframe, mostly unwanted | 0 | no |
| longdesc | URL | A link to the a URL where there is more information about the iFrame, mostly used for blind people | no set | no |
| marginheight | number value | adds a margin above and below the iframe | 0 | no |
| marginwidth | number value | adds a margin to the left and right of the iframe | 0 | no |
| scrolling | yes no auto | Controls the scrolling when the iframe content is larger than the iframe area | auto | no |
| name | a name | Sets a name for the iFrame so that it can be controled by Javascript later | no | |
| src | URL | The URL of the iFrame | yes | |
| click_words | Sentence | The 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 show | no | |
| click_url | url | The 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 show | no |
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
Doesn’t seem to work with Amazon affiliate link code.
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
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?
My url that I am trying to use has [ and ] inside it, is it possible to still use this?
I am not sure to be honest with you chris, it is possible that wordpress will pick this up as a shortcode. you can always use the URL encoded here http://meyerweb.com/eric/tools/dencoder/ to encode before using it.
regard
Andy
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/
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.
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?
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_loadalways had the option to add a class.regards
Andy
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
example of you first version and 2nd version of the iframe.
http://phat-reaction.com/wordpress-plugins/easy-iframe-loader/kshotz-tests/
The only thing I did was use a standard “double quote” mark. Not the weird `single quote for SQL` or ‘single quote’…. I dunno if it was the post in the comment that made them 66′s and 99′s for your code or that was how you did it. but if you can go back to the basics….
ps. could not see you page as it was in preview
Thank you so much for your quick and accurate help…it was those quotes.
K
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.
Hey Rob,
I’ve checked it out and found that the problem was with the forward leaning quotes. Please see this page for a dutch explanation (schoolboy dutch)
http://phat-reaction.com/wordpress-plugins/easy-iframe-loader/rob-huberts-test-page-for-iframe-loader/
I’m changing the documentation a little to make it more obvious to others.
kind regards
Andy
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
I see the link isn’t to see, but it’s now the link with the text “You may do it in English…….”
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
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
Hey Cornell,
The way to do that would be to use the template tag for creating your own iframe and in the URL that the user goes to, to have a GET variable. i.e.
user goes to http://tagtag.com/site/info/emulator?site=http://phat-reaction.com
and in the code you put
<?php $args = array (‘src’=>$_GET['site'])
add_iframe_late_load($args) ?>
regards
Andy
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
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
Alex
You will need to use extra javascript to manage that task for you. There is a bit of jQuery available that will do the job…..
http://plugins.jquery.com/project/jquery-iframe-resizer
regards
Andy
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
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
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
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
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?
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
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.
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.
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”]
OK, but it still doesn’t work. Now I just get a blank screen. The URL is valid.
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.
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
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
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!
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"]
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
not sure what a negative margin is. but I think you want to position: relative and top:-20px in the css for the containing class that you add.
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";}
Many thanks ben I will implement that.
Some text was cut off in previous post. I can email the full fix if you want.
How do you use this plug in so you dont lose HTML code when you toggle back and forth from “visual” to “HTML” editor?
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
Is it possible to add a target=”_blank” feature so that the click_url opens in a new tab/window?
no that is a link not an iframe. you do not own the content in the iframe and cannot adapt it
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
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(” “);
did it work on this site when you visited using IE?
Got the vimeo working, thanks. Had forgotten the player. bit.
Got the youtube working as well using this:
[iframe_loader src="http://www.youtube.com/embed/QBB_FSaDfA0?rel=0" ]
Thanks
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.
sorry, iframes can’t do that
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
the youtube iframe loader is in Beta and is not suggested as a production system. If you don’t auto play it will work
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.
don’t use an iframe, use a A with target=”_blank”.. might be wise for you to get some HTML training.
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
the error does not come from my plugin, I can’t help, sorry
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.
No you can’t do this iframes are all or nothing
[...] it in this WordPress blog post as an iFrame (WordPress doesn’t play nice with Flash) with the Easy iFrame Loader [...]
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
yes put it inside a DIV with a class and then ask that class to have padding or a margin. simple CSS and HTML
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
I would not advice an iframe shop in the sidebar it will not be tall and wide enough
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!
just change the URL to match the Iframe url that you have got from google maps
Easy iFrame Loader was perfect for my project. Worked flawlessly in Chrome, IE 8, FF, Safari. Thank you!
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?
I have no idea what a quiz code is
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="”>
I don’t support paypal, they do.
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!
No, it is the possible. the owner of the website sets the side
Say, would I be able to create some buttons that would update the iframe to show a different vimeo video?
yes use Jquery or some other javascript to do it yourself.
[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.
It works now I dont know what happened but its going now.
The WordPress 3.3 update appears to have broken this plugin. I can no longer get the height specification to work.
I see no problems myself. check your other plugins and theme first
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
You can set the height youself but it might cut off other pages that are longer.
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
It already does offer this option if you use the functions.
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?
No, the size of a website is depicted by the owner of that website, nothing that can be done
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…
I did not forget. I have not so much interest in offering free support for something that people do not donate for.
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.
Maurice,
there is FULL instructions in the readme.txt which is also mirrored on the Wordpres Plugin page for easy iframe loader.