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. Excellent plugin!
    When I first read about it at WordPress Plugin DB, I thought to myself, how is this better than EZStatic? I didn’t know it wasn’t about putting static HTML inside template but inside posts – a truly unique solution. I love it.

    By the way, can you modify the plugin to accept also height and weight for the inline frame? The default are pretty small.

    Reply

  2. Oh, also please add the example to the plugin description as shown in the admin panel so poeple don’t forget the format required.

    Reply

  3. I’ve updated the plugin to include usage instructions in the plugin page. You can modify the dimensions of the frame by changing the CSS style. I’ve added a couple of details about this here on the page.

    Reply

  6. Thanks Mathias. Yep, I spotted the object tag a few hours back and thought I was safe at least until tomorrow!

    The pre tag is fine for small bursts of code, but I created the plugin so as not to clutter up a post with a lot of code. I will investigate the Code Tag Transformation plugin further though – it certainly looks very pretty.

    Reply
  10. Pingback: rishel.org » So Far, So Good

  12. Hi… Yes indeed, this is a very useful plugin… thanks a lot. Pardon my ignorance, but i just have to make this question if i want this plugin to work on my website:
    Where do i paste the css code?? at the end of the style.css file? or at the beggining? (if it helps, i’m using the pool theme)

    Thanks for any infor regarding that!!!

    Reply

  14. Great Plug-in, this will make my site look more professional! I found a small bug, if you’re using John’s giraffe theme editor plug-in and one changes anything within it the pageview window is reduced in size and looks really bad. I found that if you input the required CSS code into the style.css in the giraffe plugin folder not in the theme’s folder the problem is fixed. It would be great if john includes this in his next version of giraffe’s plug-in.
    Thanks

    Reply

  15. I’ve updated the Giraffe theme (1.17) so that you can now add CSS styles into ‘extra.css’ (in the giraffe theme directory). This means you can put the PageView styles, as well as any others you want, and they will be included as additional styles and will not be deleted by the Giraffe theme editor.

    Reply

  16. I have been looking for a code like this. I have done everything instructed however nothing shows up when I add the code to a post. I am not sure I am writing it right?? I cut and paste, changed the url.. but nothing is showing up.

    I have added the codes to the CSS.. the plugin is activated.. what am I missing??

    Reply

  17. Can you post it here (or in the ‘contact me‘ page) so I can have a look if you’ve typed anything wrong? Also, double-check that the plugin is activated in the WordPress admin section. If you move files about a plugin can get automatically disabled.

    Reply

  19. i used the code and everything works fine, except for the fact that i can’t get the title to show. the description is ok however. perhaps you could show me what you used for your example above?

    eh?

    Reply

  24. 1) Specify the width as a percentage to fit into your column
    2) Don’t give any value for the height. This will cause the iframe to be as tall as it needs to be.

    Reply

  25. hmm. i have scott reilly’s “auto-link URLs” plugin and it keeps translating my pageview url, thus breaking it 🙁 i’d like to keep the auto-linking though… could someone briefly explain the “object data” method of page inclusion?

    Reply

  26. i mean, i read up on object data embedding, but if anyone could provide hints how use it to include a page in wordpress, that would be great. thanks 🙂

    Reply

  29. Thanks job for putting this plugin together. It will be quite useful once I get it going. I am by no means a programmer, but I’d like to think I can be resourceful when I have to be, to figure something out. So I looked at your plugin code to maybe get a better idea or what I am doing wrong or a better idea of what this plugin expects from me when I use the for example, how does the plugin differentiate URL, from the title, from the description in order to separate them into the proper strings? Are there separators I am missing? I was thinking maybe the strings are separated by spaces, but then your description has multiple spaces. And then what if you wanted your title to be multi-word with one or more spaces? Are the strings comma separated? I must be missing something. Thanks again John. 🙂

    Reply

  30. Sorry I forgot to mention… I recently upgraded to wordpress 2.0. Do you know if that might be an issue with this plugin? How about with the UrbanGiraffe theme, which by the way is very slick and quite robust. Thank you for that too.

    Reply

  31. Hi Walt,

    A URL cannot contain spaces so that is treated as 1 word. Currently the title cannot contain spaces, so that is also 1 word. The description is everything else after the title and so can contain spaces and many words.

    I don’t think there will be any issue with the plugin and 2.0 – the plugin is very simple and doesn’t use any advanced functions.

    Reply

  33. When I use your CSS in this page, the display is not the same with your example in this page. Can you give my your example CSS? Many thanks.

    Reply

  38. Manuel, I can’t see any iframe on your page! You must use some CSS styles to change the dimensions of the iframe (see above).

    Reply

  39. Dear John,

    At first when i installed your plugin, there was no problem at all, it all works like a magic to me 🙂

    And then i tried to implemented it in my wordpress’ page, and it works like a magic too 😀

    And then, here comes the real trouble, after i press the “home” link, everything suddenly turns white. Just white, including the page with your plugin embedded too. The only page that works pretty well is only the admin page. I tried to deactivate, delete and reinstall your plugin, but it totally not works. I also clear every cache and cookies and it failed too.

    I really dunno what happened, ‘coz, before i click the “home” link, everything was fine.

    And one buddy of mine check it and said, it was all becoz of your plugin , he said your plugin broke the wordpress installation and i have to re-install the wordpress once again.

    I didnt mean to say that your plugin is buggy, i just curious, is it true, that sometimes in a very rare condition, this thing might happened? ‘coz i have seen one site that use your plugin works like a charm.

    For your information, i tried to embed pafiledb into my wordpress’ page. Is it happened only when someone tried to use your plugin with pafiledb?

    Best Regard

    Reply

  40. No, it’s not possible for the plugin to break a WordPress installation. All it does is replace text when WordPress displays a page. No changes are made to files or the database

    Reply

  41. I cannot figure out how to change the width on my i-frame

    I am using the Kubrick theme and add

    .stretch {
    width: 100%;
    }

    to the styles.css page through the theme editor.

    Then I use

    It opens the page at the default size. Please could someone spot what I am doing wrong.

    Thanks

    Reply

  43. gregg: Look at the styles in pageview.css that’s in the plugin’s zip (added recently, so you may have an older version)

    golffee: Do you have the latest version from this page? Your icon is referring to /wp-content/pageview/pageview.gif, but the latest plugin is pointing at /wp-content/plugins/pageview/pageview.gif

    Reply

  44. Hi, I’ve just dowloaded you plugin here today, but I can’t see any pageview.css in the plugin’s zip. As my icon’s referring to /wp-content/pageview/pageview.gif too, I think the version available for download may not be the latest. Am I wrong ?
    Thanks.

    Reply
  46. Pingback: Sideways - 这伟大而恶心的时代 » [wordpress插件] 几个插件介绍
  52. Pingback: 牛建国的发言 » WordPress插件

  61. Yes, the HTML code is stored in wp-content/plugins/pageview/view/default/pageview.php. You can either edit it there, or create a directory ‘view/pageview‘ in your theme, copy the above file there, and modify it on a theme-by-theme basis (you’ll need version 1.3 for that)

    Reply
  63. Pingback: WP Plugins DB » Plugin Details » Page View

  67. Hello John,
    great plugin. thanks for that.
    the only thing i can’t get working is how and where to define the width and higth of the iframes.

    Reply

  69. Sorry for not answering sooner. Still having problems with this. ANY url I use comes back to [[[1]]] and with the 1.4 version of your plugin, the tag doesn’t even get converted to an iframe, it just stays as a comment tag.

    becomes

    Any ideas? (I put the extra spaces next to the to stop them being converted here)

    Reply

  72. Graeme, are you using the WordPress visual editor? If you are, it’s likely that it may be mangling the code. I’ve updated the plugin to use a different tag which won’t be affected by visual editors.

    Reply

  78. Hi

    Love your work….

    I’m sure if there is a good reason, but why don’t you use the Exec-PHP plugin and enter the following into the post/page

    require ‘page.php’;
    ?>

    It works for me 🙂

    Steve

    Reply

  82. For me it acts really weird…I am using TinyMCE so maybe it has something to do with it…
    but when I use

    [pageview http://west1.vallema.com "Standings" This is where our team RUNNERS currently stands in the Dutch Leage (probably 5th level down from the top)]

    the result is that the word com becomes the title and the rest won’t work anymore since it can’t find west1.vallema -address (missing the .com)

    any help would be appreciated…

    cheers,
    Kimmo

    Reply

  83. Kimmo, are you sure you are using the latest version? I tried the exact same tag and it worked fine (actually I noticed some spurious quote marks, which have now been removed).

    Same for you too Graeme, I have your tag in my test site and the plugin displays the page. I’ve tried this with both TinyMCE and without and the same thing.

    Reply

  84. Hi

    I used the plugin from . This allowed me to use php script within the posts or pages….. as it says on their website ‘ The Exec-PHP plugin executes <?php ?> code in your posts, pages and text widgets.

    Then I simply used the php REQUIRE or INCLUDE command … example:-


    <?php
    require 'http://www.yourwebpage.com/page.php';
    ?>

    Cheers

    Steve

    Reply

  85. Steve, that’s a very different method and puts a lot of load on your website – everytime the page is displayed your webserver has to go and downloaded the external page. This is very inefficient and on a busy page could soon kill your site.

    Also, I have a competing plugin called Sniplets, which works around this problem.

    Reply

  86. Dammit! I’ve found the problem…

    I have been using the latest plugin all the way through this, but it turns out another plugin has been rewriting your URL, along with a couple of other things (just updated that plugin recently :()

    The offender is http://zechs.dyndns.org/wordpress/?page_id=126 "MediaWiki Markup for WordPress" v0.0.6-r3. I never saw this behaviour with v0.0.6-r2 so I may go back to that.

    Sorry for giving you the runaround. Should be beating up that other author 😉

    Reply

  90. I tried to use this plugin with WordPress 2.3.1 and it doesn’t work at all !
    Here is my code I insert in the page post (code textfield) :
    [pageview http://dreamgratuit.canalblog.com "Dreamgratuit" Extensions et tutoriaux pour Dreamweaver]

    Did I do something wrong ?

    Reply

  91. I tried to disable some other plugin and now it’s OK but sometimes I have trouble with my Apache Server (WordPress is at this time running on my dev server, "localhost" with EasyPHP. Maybe the reason why ?).

    I also tried to hide the pageviewhead using the CSS property visibility:hidden instead of the 5 lines in the original code but there is still the table in the code and a white space on the page. Is there a way to delete this white space ?

    Reply

  94. You need to modify pageview.css in the plugin directory and add a specific height:

    div.pageview
    {
    height: 200px;
    }

    Alternatively you can add this to style.css in your theme.

    Reply

  95. Hi John,
    As you stated, the code below changes the length of the iframe. is there a way for the iframe to dynamically adjust to the length of iframed webpage as the pages of the iframed webpage change length? I’m trying to achieve the seamless look.

    div.pageview
    {
    height: 200px;
    }

    Thanks!
    Steve

    Reply

  96. Steve, it’s not something you can do through CSS and instead you’ll have to resort to some JavaScript code. Take a look here for some more details.

    Reply

Leave a comment

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