IFrame widget can display any external HTML page inside an HTML IFrame component.
The IFrame widget can display any external HTML page inside an HTML IFrame component. The need came from the Hindi Tagcloud JSP that I had once created for Chittha Vishwa and I always thought that there should be some way to display that page on my blog.
iframe-widget.php
to the /wp-content/plugins/
directoryAppearance > Widgets
and add the ‘IFrame Widget” to desired sidebar. Configure the parameters such as IFrame Title, Dimensions, URL etc and save your changes.Settings > IFrame Markup Generator
) and just copy-paste the generated markup to your Post/Page. More experienced users can just add the markup [dciframe]url,width,height,frameborder,scrolling,style[/dciframe]
, for instance [dciframe]http://www.google.com,50%,50%,1,auto,border:1px solid red;[/dciframe]
. Please ensure that your URL doesn’t contain any “comma” character.If the dimension of the webpage you are trying to display within the IFrame exceeds the configured dimension of the IFrame (by default) will automatically add scrollbars. This option can be changed, using the “Display Scroll bars?” configuration option, you may chose to either display the scroll-bar always, or not at all or select auto
to let IFrame decide whether to show the horizontal and/or vertical scroll-bar. If you are using the [dciframe]
Markup then you may similarly supply the value as the 5th parameters as [dciframe]http://www.google.com,400,250,1,no,border:1px solid red;[/dciframe]
, for example (note that the fifth parameter value for scrolling
has been set to “no”, thus disabling any scrolling).
To add a border to your IFrame Widget, select the option “Yes” as answer to “Display Frame border?”. Then add the required style information in the “CSS Style” field (example: you may add border:1px solid red;
). If you are using the [dciframe]
Markup then you may similarly supply the parameters as [dciframe]http://www.google.com,400,250,1,auto,border:1px solid red;[/dciframe]
, for example (note that the fourth parameter value for frameborder
has been set to “1”).
To add IFrames to any post or page just add the markup [dciframe]url,width,height,frameborder,scrolling,style[/dciframe]
, for instance [dciframe]http://www.google.com,400,250,1,yes,border:1px solid red;[/dciframe]
.
Note that supplying the URL is mandatory while other parameters are optional; which means that you may specify only the URL or only the URL & width. Therefore, [dciframe]http://www.google.com,400[/dciframe]
and [dciframe]http://www.google.com[/dciframe]
are valid tags. Also note that the order of the parameters is important and URL, Width, Height, Frameborder, Scrolling and Style must be separated with commas. Lastly, the closing tag [/dciframe]
is mandatory.
Yes you can. Just add multiple [dciframe]
tags where required when using the markup or drop the “IFrame Widget” on your sidebars, as needed [See the screen shot section for a screen-grab of multiple widgets in action]. All of these can be configured independently.
Fortunately there is now a Markup Generator available to help you, just use the Markup Generator under Settings > IFrame Markup Generator
, click the “Generate Markup” button and copy-paste the markup to your post or page, as simple as that.