Using Iframe to load URL in WordPress sidebar tutorial

Iframe is great way to load an external URL.There might be multiple occasions where this functionality can be quite helpful.For example you want to load Facebook Fan box code or other social networking badges or any advertising network ads then loading them using Iframe can help you.

Iframe is useful in some cases but overuse of them should be avoided (You can read about Iframe impact on webpage performance at Yahoo web performance rules.

The problem is if you directly want to load a URL in WordPress sidebar using <iframe /> tag then instead of external URL internal URL get loaded(URL of your website or blog).I have seen this issue while loading facebook fan box URL directly using the <Iframe /> HTML tag.The problem triggered me to write this article.

Now if you are convinced to use Iframe for one of above purpose in WordPress sidebar then read the step below

  • Install the custom Iframe widget from WordPress.org.The installation procedure is same as that of any other WordPress plugins.
  • After installation go to Widget option under Appearance from your WordPress Dashboard.
  • You will see a Custom Iframe named widget there.
  • Drag the custom Iframe widget in sidebar where you want to display content from external URL.
  • The widget is self explanatory.Enter the external URL in src option of widget and set the width and height parameter of the widget.You can also give title to the widget.
  • The width and height parameter of the Iframe should not be less than width and height of content to be displayed using external URL.for example if you are displaying facebook fab box of dimension 200 200 then you need to set Iframe dimensions greater than that for proper display.
  • Save the options and enjoy.

There are other plugins available for placing Iframe but I have not used them or tried them.So if you feel any other plugin can be used for this purpose share the name below.

Leave a Comment