PageView Plugin – Embed an IFRAME in WordPress

download

Download: PageView
Version: 1.5.1
Supports: WordPress 2.5 – 3.1.1
Other: WordPress.org | SVN
Support: Forum

PageView is a plugin that will display another web page inside the current post. This is achieved with the use of an iframe – an HTML tag that allows a webpage to be displayed inline with the current page. Although an iframe can lead to a complicated website, it can be very effective when used appropriately.

Installation

  1. Download PageView
  2. Unzip
  3. Copy to your /wp-content/plugins directory
  4. Activate plugin

You can find full details of installing a plugin on the plugin installation page.

Usage

Insert iframes using WordPress shortcode syntax.

[[pageview url="http://some.place"]]

URL is a required parameter. The following are optional parameters:

  • title – A short title for the iframe
  • desc – A description for the iframe
  • width – The width of the iframe. Defaults to 100%, and can be specified in percent or pixel format (100px or 100%)
  • height – As above, but for height
  • border – ‘yes’ or ‘no’, defaults to ‘no’
  • scrolling – Whether to display scroll bars, ‘yes’, ‘no’, ‘auto. Defaults to ‘no’

For example:

[[pageview url="http://apple.com" height="400px" border="yes']]

[pageview url=”http://apple.com” height=”400px” border=”yes”]

Note: The plugin still supports the older pre-1.5 syntax:

[[pageview http://some.place "title" description]]

282 comments

  1. I’ve left two comments now and both mysteriously disappeared. Go to jeremysarber.com/personal and click the "Current Chess Game" link at the top. You’ll see what it does.

  2. Hey again. It turns out that the page I was trying to present in the frame was causing the problem. I don’t fully understand why but certain pages of GameKnot.com could not be displayed. It automatically redirected users from my page (with Pageview being used on it) to GameKnot. Thanks anyway.

  3. This works great. However i’d like to keep the actual url to the page in the iframe hidden. If a user clicks on the title, the url is then displayed. Is their a way to keep that from being displayed?

  4. Hi John,
    I am new to all of this and have been learning by trial and (mostly) error, so I would appreciate any help you can give me. I am using WordPress 2.5, the Autumn Concept 1.1 theme. I am trying to insert an Amazon.com astore into a webpage I have titled “Store” I have successfully downloaded your plug-in and activated it.
    In the HTML editor for this page, I’ve typed: what I believe your instructions said, and immediately followed it with the astore code, as follows:

    [pageview http://retireforlessincostarica.com/store/ “Retire for Less in Costa Rica” Store]

    However, when I publish and preview the page, all I see is a 404 Error. What am I doing wrong? Do I need to use the tags? Do I need to copy something from the pageview style sheet into my html editor?

    Thanks in advance,
    MightyA

  5. I have modified this a bit. I was unhappy with the way it handled the template file and how restrictive it was on the formatting. So I rewrote the replace routine in the class to find all key value pairs and pass them on to the template processing function. So now instead of being stuck with just url, description, and title you can use whatever you want (and as many as you want) Here is the change in usage.

    All parameters are optional. However it would be useful to have at least something that passes the url.
    [pageview parameter=’value’…]

    To work with the existing template just pass these parameters
    ex.
    [pageview url=’url’ description=’this is the description’ title=’this is the title’]

    I like to throw on a style parameter so I can control the height of the iframe. That means that I must use that variable in the template file.

    <iframe src="" frameborder="0" style="" >Get a better browser!

    here is the change in the function in pageview.php

    function replace ($matches)
    {
    //Separate all the parameters
    preg_match_all("/\w*='[^']*'/", $matches[0],$allParameters);

    //split each parameter into a key=>value pair
    foreach ($allParameters[0] as $parameter) {
    $pair=split("='", $parameter); //do the split
    $pair[1] = trim($pair[1],"'"); //Trim off the trailing single quote

    //store the key value pair
    $pairs[$pair[0]] = $pair[1];
    }

    return $this->capture('pageview', $pairs);
    }

  6. Hi,
    Installed this plugin and have activated it – however I cannot get the webpage I want to display to show in the post. All that shows up is the code I typed in.

    1. Gavin,
      Sounds like you placed the code in the wrong text field……wish I could add a screen shot here but…..check the upper right corner of the text area you are placing the code in….it should say TEXT and NOT Visual. Hope that makes sense.

  7. Pingback: 5mZen » Zen
  8. Again, check the code you typed – if it is showing up then either the plugin is not activated correctly, or you’ve mis-typed something.

  9. It’s a great plugin. I try it in my blog. And it works. Well, i had to add some minor layout change tough, to match my blog theme. Anyway. Big thanks for this great plugin.

  10. It’s a very great plugin, i was very worried to handle iframe tag in WordPress, finally i got your plugin in google search. It was so helpfull for me.

    Actually I want to display paragraph (text) as inline frame on my pages, but i tried with your plugin but not get it. I do not want to link url in pageview. Could you/anyone help me in this regard.

    Appreciate and thanks 🙂

  11. Do you type this “tag” into the text area of the post? I have typed the following:

    [pageview http://wwwa.sheetmusicplus.com/a/f_searchresults3.html?
    id=12345&sc2=Guitar%20tablature%20Bluegrass&searchDisplayStr=Guitar%20Tablatu
    re%20Bluegrass%20Bestsellers “title” description]

    All I get is this text showing up in my post. The plugin is installed and activated. I am running WP 2.7.

  12. Hi John,
    I have the same problem, just type all correct and get no page within iframe, I just see the code, can you type an example from a working code instead saying to verify the code?

    Thanks

  13. Can somebody who ‘gets’ how this works please help me get set up? I have read and re-read and tried everything I can to get it working, and I just need some one on one help. Please let me know ….

  14. Nicole – Download and install the plug-in to your wordpress blog. Activate plug-in and create a post/page for displaying the external webpage. In the post/page you just created, put this code (and only this code): [pageview url “some title” description].

    Replace “URL” in the code with the source of your external website: [pageview http://somesite.com “some title” description]. Save the post in HTML view, do not look at the post in visual view as it reportedly disappears.

    Preview your post and you should see the “window” appear with your external website displayed. It will be 100% wide to fit you post column and has a set height. You can change that height in the .css page that come with the plug-in.

    After I got my window the size I wanted, I didn’t like the extra Header that was created at the top of the window so eliminated that stuff also in the .css page.

    Hope this helps.

    Michael

    1. Michael,
      I’ve tinkered with the .css and cannot figure out how to get that header to disappear. I want the URL to be displayed but I don’t want that funky header. What did you change to remove yours? Thanks!

  15. Michael,

    Thank you so much. I tried it and it worked … I thought I had been doing this from the beginning, but apparently not. MANY many thanks again for your thoughtfulness!

    -Nicole

  16. Ok one last question … I wanted to remove the image, so I did … but there is text there that says “Some Code.” Can you tell me which file I would find that in and/or how to remove it? And can I line the Title and Description up flush against the edge of the box?

    Okay, so it was 2 more questions 🙂
    Thanks!

  17. Nicole – My question to you is how did you remove the image? Like I said, I didn’t like any of the stuff in the header so I went in to the .css file that came with the plugin and removed everything except the outside border around where the IFrame window appears. Since the website that displays from inside the IFrame window is database driven and refreshes without refreshing the blog page or post, I wanted that area to look seperate from the rest of the post or page.

    The original files in pageview.css are:

    div.pageview
    {
    border: 1px solid #999999;
    margin: 5px 0px 15px 0px;
    width: 100%;
    font-size: 0.8em;
    }

    div.pageview div.pageviewhead
    {
    background-color: #EEEEEE;
    margin: 0;
    padding: 0;
    line-height: 1em;
    height: 50px;
    }

    div.pageview iframe
    {
    border-top: 1px solid #999999;
    border-right: 1px solid #999999;
    width: 100%;
    height: 200px;
    }

    This is how the .css looks after I removed the header info:

    div.pageview {
    border: 1px solid #999999;
    margin: 5px 0px 15px 0px;
    width: 100%;
    font-size: 0.8em;
    }

    div.pageview iframe {
    width: 100%;
    height: 525px;
    }

    Hope this helps,

    Michael

  18. Do you offer a plug-in that will do the OPPOSITE? Allow someone to use WordPress as a TinyCMS on a section of a website that is hosted on a separate URL?

  19. Is there a way to resize the page shown? I edited the CSS file to show a longer portion of the page but can’t seem to get the width to stay inside the wordpress widgets. Thanks for your time and consideration

  20. Another great plugin from Urban Giraffe. Thanks.

    I am, however, trying to remove the pageview.gif, title and description bar altogether. I’m trying to embed a mibbit widget on the page, and the title bar is simply unnecessary. Michael’s suggestion merely removes the styling. I’ve been systematically editing the PHP file trying to find the “trigger” for the bar, but no luck so far. If anyone has a suggestion, let me know. If I find one, I’ll come back and post.

    thanks,
    lisa

  21. Doh, well, I sorted it after pulling string after string apart.

    You edit the pageview.php file contained in the VIEW folder, not the root of the plugin.

    Simply remove the table containing the HTML for the title/description bar.

    Remember, this will remove the title/URL linking to the original web page you’re embedding into your WordPress blog. This may not be kosher if you’re grabbing content from someone else’s site. I am placing a widget on the page, which doesn’t require credit and/or push back to the original site.

    1. It’s worth noting that rather than modifying the plugin, if you copy the view directory to your theme’s directory, you can edit the files there and they will be used in preference to the ones in the plugin.

  22. What would be nice is if the pageview.php that’s buried inside the “view” directory could be put in the theme root, for editing directly from WordPress. Unless I’m mistaken, the current way to do it would require editing the file and re-upping, or if you have an FTP client with built-in editor, connecting up with the client and editing the file directly.

    Editing from “Edit Themes” would be ideal.

  23. Hello,

    Great plugin John! I really like how simple it is to use!
    I came across your plugin because I was trying to get a link to a website in my wordpress post to open in a full iframe, with my header.php info on top.

    A great example of what I am trying to accomplish is this:
    Urban Giraffe on Google Images

    How can I reach my goal John?

    Thanks!

  24. I’ve just installed and got the plugin working – but the window in the website appears is too small. Can you configure the size?

    Thanks

  25. This was extremely helpful in designing a wordpress site for a client that would not be happy with anything other than an iframe horizontal image gallery in the page (I tried to get them to use an ajax image gallery or a jquery plugin but they were stuck on using an iframe – their inspiration was a page made in 2005).

    Thank you for having an easy solution that is easy for clients to use!

  26. @Tom –

    Just edit the CSS file for the plugin to resize the window – go to Plugins > Editor then select this plugin. Look for the PageView.css file and edit the following code:

    div.pageview iframe
    {
    border-top: 0px solid #999999; < My style tweaks, pay no mind to this
    border-right: 0px solid #999999; < My style tweaks, pay no mind to this
    width: 100%; <– Make what you want in % or pixels.
    height: 500px; <– Make what you want in pixels (500px was my personal solution, I forgot what was there before).
    }

  27. hi, is there any way, to commit the “hight” parameter, which is stored in in pageview.css, as an paranmeter of the shortcode?
    I want to use some iframes, each in another hight. now, the hight is fixed in pageview.css for all iframes.

    Look at: http://www.runningsocks.de/wordpress/2009/11/29/wacken-2010-some-procedure-as-every-year/
    the iframe hight from “Wacken Wetter” is 400px.

    but on http://www.runningsocks.de/wordpress/wettervorschau/ i need another hight….
    and on http://www.runningsocks.de/wordpress/downloads/dl-explorer-public/ also… and so on

    Is there any help or idea for me.
    Thanks.

  28. Hi John, Hi to all!
    Thanks so much for this wonderful plugin that works greatly!
    I followed instructions available here to remove the header eliminating fro pageview.css the header info. It doesn’t work, did I forget anything? I would simply remove the header, the gif image in it and the title and the website description, (which I have intention to cite properly in other ways). Please, is there anyone who can help me in this? Thanks in advance for the attention.

  29. Hi..Dude..It’s a great plugin..

    But can u please tell me how can I show up a page from the other website?

  30. Is there a way to run a couple of these side by side.
    I am capturing small timetables and currently have 6 all going down the page – wondering if there is a way
    i can do this by have 3×2? I am guessing no but then again i figured i should ask.

    Simon

  31. I’m trying to edit the CSS along the lines several posters have mentioned but I noticed the pageview.css is listed as “inactive” in the editing mode. Can you tell me what I’m doing wrong or whether I need to go to another file to edit at this point? Thanks!

  32. I was wondering I am a noob at php but I have managed to edit the css to get the page the size I want. I was just wondering how to set scroll bars on the bottom as there is a scrolling for the vertical but not horizontal. any help I would appreciate. thanks ahead of time.

  33. Simon :

    Jan 14, 2010 1:11 pm | Reply

    Is there a way to run a couple of these side by side.
    I am capturing small timetables and currently have 6 all going down the page – wondering if there is a way
    i can do this by have 3×2? I am guessing no but then again i figured i should ask.

    Simon

    *
    #110281
    John( author ) :

    Jan 27, 2010 3:57 am | Reply

    Sure, it can all be styled with CSS so you can make them do what you want

    John, I like this plugin, can you specify how to put the iFrame side by side?
    I want to put 2 of them side by side on my Contact page for different language contents display, could you explain it in some sorta step-by-step ways? Newbie here, thx ahead!

  34. Is this plugin working with wordpress 3.0? I tried it and it didn’t work, I am not sure what I did wrong. I put the code in the html editor of my page with the link and title and that is exactly what shows up when I preview the page.

  35. Thanks John, you’re probably right but I can’t find the code to edit for the second one so if anyone can tell me where the code is that would be great.

    1. The plugin itself is very small so you should be able to compare the two files and see what has changed. If you have a file diff tool that will show you immediately what has changed

  36. John,

    Is there a way to remove the htm graphic and title: description: area on the very top of the page view. I would just like a page to display with out the pageview header…

  37. Is there a way to code the file so that you can crop the top of the page? I would like to crop like 50 pixels from the iframe I am loading. Is this possible?

    Also, you stated in your last post that in version 1.5 you can rid the htm graphic and title at the top. How do you do this?

    Thanks!

    1. No, it’s not technically possible to crop the page inside the iframe.

      The graphic is no longer included in version 1.5. To remove the title just don’t include one in the shortcode.

  38. My iframe displays correctly the url but the webpage is not scaled.

    Only the top left corner is displayed exactly like in the Apple example from above. I want to visualize the whole page width without having to scroll horizontally. An advice? Thanx!

  39. Hi and thanks for the awesome plugin! It works for us great for us, but only shows up as code if we try to use it on the same Page another plugin called “Composite Post”—the shortcode is [composite tag_name=”fonts” ]. Are we doing something wrong? Or perhaps there is some conflict with the two plugins?

    …and if so is there a possible fix? Thanks again! ~MItra

  40. Is there a way to align the pageview to left? I intend to use this inline frame like a mini menu on the left So in the page, the content is split into 2 areas, the left column is the mini menu, the right is my page contents.

    1. Not sure what you mean – align the iframe itself to the left? You can position the iframe using CSS on your site. Align the contents of the iframe to the left? If the contents are on your website then you can also restyle it as necessary

  41. Works just like you say! I can put this to good use showing all my sites crossed linked with this product. BTW works with “Pages” as well, not just a post!!! niiccee ! Mr.B

  42. 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…

  43. Hi, in first time sorry for my english, i’m from France. I’ve installed the plugin version 1.5.1. I want to insert in a static page a flash galery generated by lightroom but it doesn’t works…

    I’ve tried the url and it works good. The only way that i found to display the iframe in my static page is to insert in my model page the following code:

    <?php the_content();?>

    With this code the iframe is displayed but i have the css of my blog with sidebar etc… Could you explain to me the good way to fix this problem? Thank you. Alex.

  44. I downloaded the plugin twice, got it to work, but never got a .css style sheet…any reason that would be? Thanks!

  45. Love the plugin. Is there anyway to hardcode the plugin instead of using the shortcode? Have many pages that will only be used as an iframe. Want to be able to add the address without entering the shortcode. Just want to make things easier for the client. thanks!

      1. Meaning. My client will be using this plugin for most of their site. I want to add the code directly to the inner-page.php so that the client does not have to type in [pageview ] Trying to bypass using the shortcode since there will be 50+ pages that are the same setup. Just want them to have to add in the address and thats it. That may not be possible. If so, thats fine.

  46. is there any way to set a topmargin or leftmargin/ rightmargin, so that the image that appears in the iframe comes from a specific portion of the pageview URL?

    is there shortcode for top margin, left, or right margin?

  47. The iframe works well with most sites, I have tested it with various sites. The only issues I have is with our schools google gmail site, it does not stay embedded but leaves my wordpress site and goes to the gmail site (I want it to stay within my site. ). Is there a short code to prevent google from leaving my site and overriding the embed?

  48. hi john,
    great frame plugin – managed to install and activate fine but am having a problem when I try and add a youtube URL – is this not possible?
    Any help would be appreciated.
    cheers

      1. Firstly, would really like to thank you for developing this plugin.

        I’m still working on the same auto height adjusting issue. If anyone get the answer, please share.
        Basically, I’m embedding a javascript into my iframe which I don’t have much control over. When I click on the iframe from the main window, I’ll be taken to another content with different height. I really am stuck – been trying to find solution for the past 10 hours.

        My work around would be getting the smaller portion of content to be displayed at the top of the iframe (but currently it is displayed in the middle of the iframe).

        Any idea / suggestion would be greately appreciated.

        Thanks

  49. Just what I needed thanks. There were some newer Iframe plugins but they don’t have the options that you have offered!
    Thanks again.

  50. Amazing plug-in! I am trying to use this to display my storenvy.com store within my website. As Marc said above, I am also having the problem with the page re-directing to storenvy site. It’s odd because storenvy.com works, but when I try cursedculture.storenvy.com it will redirect over. If you have any idea how to solve this that would be awesome, thank you!

  51. Is there any way to reduce the size of the embedded website so it will fit without using scrolls? I have the iframe as wide as I can go before overlapping my sidebar widgets.

  52. I have been playing with this plugin for hours. I cannot get the iframe page to display. The iframe shows up with a copy of my website embedded into itself with a 404 error and no scrolling. Here is what my code looks like:
    [pageview url=”http://themoxiemomblog.com” scrolling=”yes” height=”1000px”]
    Any suggestions?

  53. Works GREAT Thank you for such a nice plug in. (If any users have trouble with the code make sure your working on the HTML page and not visual side.)

    1. Thank you! I ALWAYS get burned by failing to remember to work on the HTML view. This has happended to me for several other plugins. I wish the WordPress editor would leave my code alone and stop trying to alter it.

  54. Hi John,

    Great plugin! Worked for me on the first pass very easily.

    My question: I am importing a web app but don’t need the whole page. Can I or how do I control the positioning of the imported content in the iframe? I read through the readme.txt and saw:
    “= 1.4.0 =
    * Include CSS by default”
    Include which css? The imported page’s css? I’m just looking for the way to control the X and Y positioning of the imported content within the iFrame. I realize it may not be possible but just want to check.

    Thank you for your good work. The plugin works easily as advertised. -c-

    1. It is not possible to change the position of the page inside the iframe. The comment refers to an older version of the plugin.

  55. Thanks for this plugin. Can you tell me how i would position the iframe to pull from a portion of the site that you use for the URL?

    said differently, is there any way to pull into this iframe from somewhere OTHER than the top left corner?

    can i tell it to pull from a point on another site?

    i have a table 1/2 way down the page of another site, and i want just the table, and not that site’s header and nav info…. so i want to start my iframe some distance down the page and some distance in from the left edge, then display a fixed width and height….

    any assistance greatly appreciated

  56. John,
    My original concept is to have the Visitor click on a grafik link that will open a page (located on my server) in an external window for some additional info. I want those external windows to be smaller than the active window and float in front, to be dismissed when they’ve “got it.”

    So, my question: Can I do this with Pageview or should I be looking to another solution? (caveat, this is my first WP site, although I’ve done other site development projects)

    Thank you for your time and attention.

    dan

  57. Is there anyway to make it auto expand with my page? I have a lot of content that will be displayed and I need the height to expand accordingly. I tried height=”100%” but didn’t do anything

      1. So there is no way to have the Iframe automatically adjust the height if the page length changes for the page that you want to bring inside another website page? That means you would have to manually adjust it anytime the other website adjusts its website height, right?

        Thanks!

  58. Is there a way to something like: [pageview url="http://en.wikipedia.org/wiki
    var title = document.title;
    var indexOfSpace = title.indexOf(" ");
    var productName = title.substring(0,indexOfSpace);
    document.write(productName);
    "]

    I would like to dynamically look up an entry in wikipedia based on the pages title.

    Great plugin! and works well with wordpress 3.2!

  59. Hi

    Great plugin. So is there any way to tweak the CSS of a page being displayed via PageView, or is that something that can only be done at the source file?

    Thx

  60. Page view is a Great plugin for making a wordpress page open up an external link with out leaving wordpress. I wish it was higher on the google search so I didn’t spend an hour testing other solutions. When you have a moment, can you please tell me which plugin is this comment and subscription plugin?? Thanks, appreciate your time.

  61. hi john, this is awesome plugin, it works fine with this one.
    [pageview url=”http://google.com” height=”800px” border=”yes’]
    but while i tried
    [pageview url=”http://youtube.com” height=”800px” border=”yes’]

    it’s not worked.why youtube page doesn’t embed? please give me the solution ASAP.

      1. I am using this plugin a lot on my website. Thanks for developing this clever code.
        Following on from this comment, if a site did not allow iframe embed, what would you see? Nothing or a 404, or something else?
        I have one instance where I cannot see anything at all.

        Thanks,

        Dave

    1. Hi Ram, you can try shadowbox for youtube display. It’s a lot more complicated than John’s pageview plugin.

      Hi John, do you have a paypal donate button somewhere?? This is a really useful plugin. Also, I’m the guy that can’t figure out how to get ‘Notify me of follow-up comments by email’ and ‘Notify me of new posts by email’ in the post comment form. You probably don’t see it because your logged in. Is your site hosted on wordpress.com or is this a plugin for wordpress.org??

      One last thing, folks are probably putting the short code in the visual editor rather than the html editor window when they can’t get the plugin working. I’ve done it.

      Thanks, Luke.

  62. Thank you very much for this! I was having a heck of a time getting an html page embedded into a wordpress blog. Your plugin solved the problem instantly, so I thank you for that!

    I have one request, if you take requests (given how much I’ve paid and all…) :

    Would it be possible to modify the plugin so that it centers the embedded page inside the wordpress page? I’ve tried modifying the plugin in the ways that were obvious to me (centering iframe and using align tag) but I was unsuccessful.

    Right now the embedded page sits on the left of my wordpress page, and I’d love for it to be centered.

    Either way, thank you for a great little plugin that solved my day’s dilemma!

    Sincerely,

    Christopher di Armani

  63. I’ve used this frame and think it works well. I’m also trying to set links on other pages to open using the “target” attribute. For some reason it will not work. Does this plugin support the “target” attribute? Thanks for reading.

Leave a Reply to Bob Cancel reply

Your email address will not be published. Required fields are marked *