Wordpress Plugin – Iframe Embedder

This plugin is really no big deal, but I couldn’t find a working plugin for this.

Thanks to it you can write in your post something like this (remove space before iframe):


[ iframe http://de77.com 100% 200]

and it will be converted into iframe with width = 100% and height = 200px.

Starting from version 1.2 you can add 2 more parameters to specify X and Y position to scroll the frame contents to:

[ iframe http://http:de77.com 100% 200 40 60]

Address can be relative like ‘/homepage/’ if you want to insert something from your own website in an iframe.

Width and height might use % or px units. If you omit the unit- px will be used.

To install just unzip in your wp-content/plugins directory and activate in your admin panel.

Update 11.02.2010:
Now comes with setting page where you can configure the plugin

Update 04.03.2010:
Now you can hide scrollbars and border or the scroll content to predefined point.

Update 24.08.2010:
Better quality of generated HTML code + support for excerpts

This entry was posted on Tuesday, January 19th, 2010 at 7:47 pm and is filed under Other, PHP. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

101 Responses to “Wordpress Plugin – Iframe Embedder”

  1. winner Says:

    Hi, nice plugin… but I have a question, how do I remove the frame border?

  2. admin Says:

    With CSS. For example you can add this to your template’s style:
    iframe
    {
    border: 0;
    }
    If I find some free time I will add settings page where such things could be done.

  3. Debo Says:

    Very useful plugin, How can I auto size the height? (remove the scroller)…Thanks.

  4. admin Says:

    You can’t set iframe height to auto. You can remove the scrolling using CSS:

    iframe
    {
    overflow: hidden;
    }

  5. Greg Says:

    Came here for the same issues mentioned above, glad to find such an easy solution. Thanks for the great plugin.

  6. Stylistik Says:

    hi, your plugin seems easy to use but it’s not working for me. I have 3 pages on my site that I want to redirect with an iframe of my site framing it, but it’s not working. In addition to your code in the source, I’m using the “Quick page/Post redirect” plugin. Any advice?

  7. admin Says:

    Try this example:
    [iframe http://google.com 200 200]
    If this works, it means the problem might be with the page you are trying to embed. Some websites are able to “jump out” of an iframe, so you can’t really embed them.
    If the plugin doesn’t work then perhaps something is blocking it (some other plugin maybe) and the best way to find what is blocking it by disabling other plugins.
    Some CSS styles might also hide iframe’s, so check if you have <iframe in your websites source (View->Source in your browser).

  8. Joy Says:

    Thank you so much for this plug in. I am developing several real estate sites that need to pull in MLS feeds and that has to be done through an iframe. Your plugin seems to work perfectly.

    One question, can you give a clue as to where in the stylesheet to put the style to do away with the border. I’ve tried in several places but nothing works.

    Thanks again.

  9. admin Says:

    You can place it in any CSS file assigned to your template.
    You can also write this on the same page you have the iframe:

    But this is not the best practice.

  10. Костя Says:

    Что-то так не получается

  11. David Says:

    Thanks for the plugin it works great and it is very easy to us. Is there a way to set the on load page to scroll to a position of the iframe. I want to load the page below the header in the Iframe.

  12. admin Says:

    With jQuery you can it this way:

    var ifr = $(‘iframe’).get(0);
    ifr.onload = function () {
    ifr.contentWindow.scrollTo(40,100);
    }

    I will soon post a new version of this plugin which will make this easier.

  13. KZeni Says:

    Hi, thanks for this very useful plugin. Better than any of the alternatives I’ve come across.

    Sadly, I’ve run into a problem. Internet Explorer doesn’t abide by the CSS border property like the other browsers so the frameborder is left behind when using border:0; and there’s no way to apply a frameborder property without hacking your plugin. It might be nice to have all iframes use frameborder=”0″ by default, so one can tap into CSS borders if they so choose to.

    Thanks.

  14. Controlled Labs White Flood Says:

    Hi, I appreciate the help! This is my first time using Wordpress but I’m a bit overwhelmed – I can’t keep all these options, plugins, and themes straight! But I’m slowly getting the hang of it, thankfully. I’m guessing that installation and setup won’t take forever next time. Anyway… slick blog… I’m subscribed to your feed now so thanks again!

  15. LajosG Says:

    Thanks for the plugin. I had two issues that I finally figured out. After the the url automatically turns into a hyperlink when typing into the wysiwyg editor, the hyperlink had to be removed. The other issue was that I had to put two spaces between the url and the width, otherwise the width value was moved to the end of the url, the width picked up the height value and the height picked up the default value 300px. I hope sharing this will help.
    Thanks.

  16. admin Says:

    I never had any problems with this plugin and I use it on this blog, but thanks for sharing, maybe it will help someone :)

  17. Jorge M Says:

    Hey it looks that your plugin is generating wrong code
    example:
    [iframe http://www.dd-wrt.com/site/support/router-database 100% 200 40 60]

    I think this should setup an iframe with this features:
    width=100% (check this! its empty in the css and its changed to px instead of %)
    height=200px
    scroll to x=40, y=60

    — this is the code generated:

    function scro11me(f){f.contentWindow.scrollTo(200,40); }

  18. admin Says:

    Please use 1 space instead of 2 after the address.

  19. StratosJL Says:

    At last, this plugin was just what I was looking for. Thank you very much for your time and for sharing!

    Question: is there a way to have a visual frame around the iframe?

    Thanks again and best regards,

    SJL

  20. StratosJL Says:

    got it, found where the settings page was…. ;)

  21. Kristyn Wien Says:

    Just landed on this place via Google lookup. I love it. This post change my perceptual experience and I am getting the RSS feeds. Cheers.

  22. Jamesy Says:

    Sir, thanks for the great job. How can I set the background colour of the iframe so as not to inherit the blog’s background colour? My colours are messed up :(
    Kind regards,
    J

  23. admin Says:

    Iframe’s background color is the background color of page loaded inside of it. You need to change background color of loaded page.

  24. Jimmie Lainson Says:

    This is a great blog you got here. The theme looks nice, awesome color combination.

  25. Ruth Says:

    OK, really, really new to Wordpress. I just loaded this so that I can put IFrames on my website. I want to load a link to Red Plum and Smart Source on my website and have been approved by both to do so, but don’t know how to do it. I have the promotional banners and URL to put into my site via an iframe but can’t figure out how to do this. Can you help me?

  26. Scott Says:

    Hi,

    Thanks for this plugin. I have a question to see if it would be possible to add something like this either into the plugin or if you wouldn’t mind sharing a php “hack” to help me accomplish this as I’m not a programmer.

    Would it be possible to have the plugin automatically add those tags, at least [iframe (some php variable that grabs hyperlinks?)] so that I wouldn’t have to go into each post?

    I ask because I have a blog that has a section of it that is an autoblog and if your plugin could automatically add the iframe shortcode that would save me a ton of time.

    Thanks and I hope my questions are clear :)

  27. Angela Says:

    Can you show an example of the code being used with the scroll to x=# y=#

    Here is my webpage and the iframe isn’t showing up centered.
    http://shopwithshopper.com/houses-for-sale

    I could have used iframe without this plugin but I thought this plugin could let me set what part of the embeded website I could show.

    Wouldn’t it be great if you could drag the crosshairs over the part you want to show and it would capture that? :)

    Thanks

  28. admin Says:

    The code generated by the plugin on your site looks weird. Can you paste here the exact code you used for the iframe, I mean the code you put in the post ([ iframe...] ).

  29. admin Says:

    You can just put an iframe somewhere in your template. You can also modify the dabatase with an sql query to add iframes to every post, but I really think you should just put an iframe in a template, not in a post.

  30. admin Says:

    You write in a post: [ iframe URL_HERE] and it should work.

  31. silver rings Says:

    Great writing style, reading this blog via RSS as well. thanks.

  32. Sbobet Says:

    Hi, Thanks for the plugins! Perfect! This is exactly what I have been looking for.

  33. genealogy Says:

    I really enjoy your plugin … I have created a Post that includes mention of it at:

    http://many-roads.com/2010/04/18/gramps-wordpress-integration/

    You can see it at work here:

    http://many-roads.com/tng_genealogy/deyo-family-branch/
    http://many-roads.com/tng_genealogy/senger-family-branch/

    …mark

  34. How To Embed A 3D DWF Into A Blog Post « Deelip.com Says:

    [...] to embed the Autodesk Freewheel web-based viewer into your web page using an iframe. I use the same Iframe Embedder WordPress plug-in as I did in the 3D VIA post. You should see my rose in a 400×400 window [...]

  35. Andrew Bonar Says:

    Thanks for a usefull little tool.

    I wanted to have vertical (up and down) scrollbars but have left to right (horizontal) scrollbars disabled. In case anyone else is in a similar position, the CSS code to achieve this is here:

    iframe {
    overflow-x: hidden;
    overflow-y: scroll;
    }

  36. Eric Says:

    Hi -

    Thanks for your plugin!

    I have a question… when I put an URL with a string like :

    e.g. [ iframe http://http:de77.com?rvn=1 100% 200 40 60]

    the plugin does not read after the “?”… I do not if you have a solution?

    Thank you, Eric

  37. admin Says:

    This should work fine. Here’s an example I just tried:

    [iframe#http://de77.com/?=2#100%#200#40#60]

    Just replace all # to space.

  38. Tom Mills Says:

    Hi,

    Great plugin thanks :) I would like to put the iframe code in a custom field, but when I do the code is displayed, instead of the iframe, I would be really grateful if you could explain how I could use in a custom field ?

    thanks :)

    tom

  39. admin Says:

    You would need to hack the plugin to work this way. Perhaps adding something like this anywhere in embedder.php will solve the problem (but I haven’t tried):

    add_filter(‘posts_fields’, ‘embedder_parse_iframe2′);

    function embedder_parse_iframe2($arr)
    {
    foreach ($arr AS $a)
    {
    embedder_parse_iframe($a);
    }
    }

  40. Tom Mills Says:

    Hi,

    Thank you so much for your reply and help, I cant get it to work unfortunately, another option is to put iframe in the excerpt, I have been trying add_filter( ‘the_excerpt’, ‘do_shortcode’); but that does not work either. Do you have any suggestions for parsing the excerpt, is this an easier solution ?

    many thanks and best wishes,

    tom

  41. Tom Mills Says:

    Hi,

    Its this that causes the error

    foreach ($arr AS $a)

    hope this helps,

    many thanks,

    tom

  42. admin Says:

    You can add this line:
    add_filter(‘the_excerpt’, ‘embedder_parse_iframe’);
    in the plugin’s PHP file and it will put iframes in excerpts.

    The trick with custom fields will rather not work.

  43. Tom Mills Says:

    That works !!! Thank you sooo much, I really appreciate your help. Its a wonderful plugin and fantastic support !!

    Best wishes and thanks,

    tom

  44. ian Says:

    how to put this iframe on wp themes? any shortcode to put on themes? thank before..

  45. admin Says:

    I don’t really see why would anyone want to use this plugin in a theme files. If you can edit your theme files then just put there HTML code for an iframe.

  46. Tracey de Morsella Says:

    Hi:

    I was wondering how to use the plugin. I am not really a programmer. I was trying to embed the coveritlive.com Live Blogging IFrame into my hosted wordpress web site. Could you tell me how I should be embedding it?

    Thank you

    <a href=”http://www.coveritlive.com/mobile.php/option=com_mobile/task=viewaltcast/altcast_code=d25cc28c21″ rel=”nofollow”>Sustainable Brands 10 Live Blog</a>

  47. admin Says:

    Please try this:
    [iframe ###.coveritlive.com/mobile.php/option=com_mobile/task=viewaltcast/altcast_code=d25cc28c21 200 300]

    Replace in the above example ### with http://www

  48. Yolanda Says:

    Great plugin! I see that the new version can hide sidebars. How can I do this?

  49. admin Says:

    You can hide scrollbars not sidebars using CSS style:
    overflow: hidden
    You can set CSS styles on plugin’s settings page.

  50. Tiffany Wright Says:

    Exactly what I needed! Mwah!

  51. Hannah Byrne Says:

    Hi – great plug in, does exactly what I need although my drop down menus are hidden behind it, is there any code I can use to send it behind them?

    Example here:

    http://www.clarksonevans.co.uk/wordpress/?page_id=417

    Thanks

  52. admin Says:

    It works just fine in my Firefox, but not in IE. I don’t think there is other way than simply moving iframe lower so the menus have enough space to expand or making your menu shorter.

  53. Russell Says:

    Hey folks –

    After embedding this sucker in page ala [iframe http://de77.com 100% 200], the rendered page shows my OWN site inside the Iframe, along with a 404…any ideas what might be going on?

  54. Lina Says:

    I’m having a problem with your plugin

    when I try to use categories, I have the next code
    iframe function scro11me(f){f.contentWindow.scrollTo(0,0); }

    but, it’s only when I see the post by the category, otherwise it works fine

    Thanks

  55. Simo Says:

    Hi There,

    Is there anyway to add a name/id property so that I can target the frame in links?

    Absolutely great plugin, I can imagine the moment when you had a “but someone MUST have done that” moment!

    Thanks

  56. admin Says:

    Lina:
    Maybe any other plugin you have installed is not compatible with mine? Please try disabling other plugins and see if it helps. Let me know of the results.

  57. admin Says:

    Russell:
    Seems like a problem with the address. Please try to use absolute, not relative paths. If it doesn’t help- please post me the exact code you use to embed the iframe on your site.

  58. admin Says:

    Simo:
    Please edit embedder.php file and on file 53 add this:
    global $frmNum;
    and on line 55 change this:
    ‘<iframe class
    to:
    ‘<iframe name=”frm’ . $frmNum++ .’” class
    It should do the trick.

  59. Lina Says:

    Hello

    this is the only plugin that I have, because it’s a new site

  60. Lina Says:

    here is the code

    [iframe http://concours.louloumagazine.com/thebay/labaie.asp 500px 1600px]

  61. Felix Says:

    I’m afraid this plugin does not validate as HTML5. “frameborder” and “scrolling” properties are obsolete.

    (Doesn’t validate properly as HTML 4 either.)

  62. admin Says:

    I think the problem is because the plugin is not working in excerpts- only in full posts. I changed the plugin, so will work now. Please update the plugin to version 1.3.

  63. admin Says:

    Thanks. I updated the plugin. Now (in version 1.3) the only thing that does not validate is “onscroll” attribute but I don’t think I can do anything about it.

  64. Tim Says:

    I’m having the same problem as Russell, it doesn’t matter what url I put in it pulls my sight into it.

    Any ideas?

  65. Gerardo Says:

    Hi
    Im trying to use your plugin but I get that the file does not exists like if it is trying to display it from inside wordpress using a relative path instead of an absolute.

    i try to use your example code
    [iframe http://de77.com 100% 200]

    but I get a frame with a 404 error
    http://omnimediastudio.com/wp/portada/

    any ideas… is it because Im using permalinks?

    thanks

  66. Stacy Says:

    Seems to be the only iframes plugin for wordpress which allows auto scroll easily.Thanks, but I can’t get the width to change on a page with pixels nor percent. (wp 3.0.1 mu)

  67. Stacy Says:

    Adding the x and y ( 60 40 ) worked. Can I add an autofit code anywhere?

  68. Paul Wallin Says:

    How can I make the background white

  69. JJ Spelman Says:

    Just installed your plug in on the DEV site. Works like a charm!! Client is very pleased. Thanks for a great solution!!!

  70. admin Says:

    Paul Wallin, please use this code:

    XXX

    instead of XXX put the code to show the iframe

  71. admin Says:

    Stacy: Sorry, but I don’t know what do you mean by “autofit”. You want the plugin to scroll the iframe to some position? Then check check the settings page and try adding x and y after the url.

  72. admin Says:

    Can you post your actual code- what you put in your post and how it rendered in HTML (use View Source in your webbrowser to see the HTML)?

  73. Adam Kaye Says:

    I’m having trouble getting the auto-scrolling to work.

    Can you tell what I’m doing wrong?

    http://sunwest-re.com/iframe-test.html

    Thank you for any help you can offer.

    Adam

  74. Jack @ Jack3d Says:

    I confess i was also trying to figure out how to alter the the background to white, i feel so stupid now , css duuu. All in all super killer code so far. thx

  75. admin Says:

    Jack @ Jack3d:
    I don’t think you can change the background color with CSS.
    The background is either the background of your website or the background of the website you are embedding.
    You can try to create a div with a background you want and place the iframe in it.

  76. admin Says:

    Adan Kaye: please try the other method of scrolling. Check plugin’s settings page.

  77. Dave P Says:

    Thanks for your work.

    The generated code contains a couple of small validation errors, but generally works great.

    Errors include:
    “there is no attribute “onload”"
    “end tag for “p” omitted, but OMITTAG NO was specified”

    I can edit these manually, but thought you may like to include them next time you make edits to your plugin.

    Thanks, Dave

  78. MIke Says:

    I am using this plugin on a page of luresecure.com to embed our eBay page. All is fine, until you click on one of the auctions – then the browser heads to the auction, and the browser (Chrome) goes into a loop.

    Is there any way to make all links within the iframe open a new window if they are clicked?

  79. admin Says:

    MIke: no, sorry.

  80. theSEOguy Says:

    I wonder if anyone could help…

    I’m using an I-frame for a application from a service provider. Of course I don’t want my competitors to see who we are using for the service and was hoping there was a way to ‘hide’ the source in the code.

    Do you have any ideas?

    PS: The I-frame is in embedded in a WordPress page with your plugin…

  81. d~l Says:

    installed iframe embedder

    but in the dashboard > plugins this update message popped up

    “There is a new version of Iframe Embedder available. View version 1.3.2 Details or upgrade automatically”.

    but this was referring to a quite different “embedder” plugin from here ..

    http://moztools.com/wordpress/embedder-plugin/

    I changed plugin name to de77-iframe-embedder and the plugin name conflict went away.

  82. Eduardo Says:

    Nice plugin! Just a note, can I disable right click on iframe? I think this feature would be nice to add. Why do I have a white border around the iframe?

  83. admin Says:

    Thanks for the information, I’ll something with it!

  84. admin Says:

    I don’t see a perfect solution for this using an iframe. What you perhaps should do would be loading the service provider’s website with PHP:
    $data = file_get_contents(‘http://domain.com’);
    then removing the elements you don’t like, for example using str_replace() or strtr()
    and then serving the result to your visitors:
    echo $data;
    However if the website does include some CSS styles, JS scripts, images or subpages that you want to work then you would need to somehow preserve the links to those and this is quite tricky. You can also use HTML’s tag base but then your visitors can see where are you getting the files from…

  85. jurij Says:

    hello and thank you!

    There is frameborder displayed in Internet Explorer, but not in the other browsers. I would like no border in IE as well.

    I display my wordpress site in a iframe on FB page.
    My WP site is on multisite wp installation. (when on single wp also in IE there is no border)

    Can you please check if there is an problem with multisite wp and your plugin?

    Kind regards, Jurij

  86. Juan Says:

    Hi, congrats for your plugin
    is there any way to use % in the height value?
    Or… how can we change the default 300px height to a 100% ?
    Thanks in advance!

    J

  87. admin Says:

    You want the height to be 100% of the embedded website? Then you can’t do it. If you want to make it 100% of the website on which you are embedding then you should enter 100% and make sure the parent element in this this iframe is, has height = 100% too.

  88. JUNEINK Says:

    Great plugin – 1 issue..
    on safari you can see a flash of white while the iframe is loading. I tried a million ways to remove until I custom added this code to a template page in wordpress to get the same effect as your plugin.
    //

    My question is can you add this code snippet into your plugin somewhere – or is this impossible? can you guide me in the right direction for adjusting your plugin?

    Cheers
    JUNEINK

  89. JUNEINK Says:

    the code got removed – try this:

    - iframe style=”visibility:hidden;” onload=”this.style.visibility = ‘visible’;” src=”../examples/inlineframes1.html” – /iframe -

  90. Matija Says:

    Hello! Please how to remove redirection to my website in iframe when you click on “Audi” I want the same window, not iframe when click on link “Audi”

  91. admin Says:

    Your link looks like this:
    <a href=”http://autoiq.videospace.us/galerija/automobili/audi/”>
    But it has to look like this:
    <a href=”http://autoiq.videospace.us/galerija/automobili/audi/” target=”_blank”>

  92. Matija Says:

    Tnx for the answer! Yes, but I don’t want new window, I want to be open in same window, but also
    <a href=”//autoiq.videospace.us/galerija/automobili/audi/”” rel=”nofollow”> doesn’t work

  93. admin Says:

    Attribute rel=”nofollow” is for something completely different. You need target=”_top” or target=”_parent”.

  94. Matija Says:

    Tnx it’s work now with target=”_parent”.

  95. Chris Says:

    Thanks for that, really appreciate it.

    Working wonders on my site.

  96. BERTO Says:

    What a great plug in amazing !!! but just a quick question. is there anyway to block ads in the website that is placed in iframe. cos there is a video and other ads placed in the website and it is annoying. thanx alot.

  97. admin Says:

    Nope, sorry. You can’t access the iframe’s content if it comes from another server so you can’t modify it.
    What you can do is loading the site with PHP, parsing and displaying the result.

  98. Corey Says:

    Hi there to every one, it’s in fact a pleasant for me to pay a quick visit this site, it contains valuable Information.

  99. Mike Macey Says:

    I’m trying to embed paper.li on a page so the reader does not have to leave my site. I am not a coder. I made this string: iframe http://paper.li/f-1329795618?utm 100% 200 and it does not work. I inserted it in HTML and Visual??

    I also tried your suggestion iframe http://google.com 200 200 to no avail. Both addresses show up in my new page as the iframe address itself. Suggestions?

  100. admin Says:

    Did you enclose th iframe code in [ ] characters? If the plugin is active and you have [ ] then it has to work.

  101. Chuck Tharp Says:

    I was using post to pdf, pluging It gave this error. (the 11 instead of LL or ll was used, )

    PDF
    Report in an Iframe.
    Date : January 21, 2014
    ——————– function scro11me(f){f.contentWindow.scrollTo(0,0); }

Leave a Reply

 
TopOfBlogs Web Development & Design Blogs