Get FREE social media tips sent to your inbox monthly
+ Nicole's guide to Facebook marketing success!

FREE social media tips sent monthly
+ Guide to Facebook marketing success!

How to Insert an iFrame into a WordPress Post

Share on Facebook7Tweet about this on Twitter10Share on Google+0Share on LinkedIn0Buffer this page

Yesterday’s guest post by Jamie Millard discussed one option for creating a transcript to archive on your website. Jamie’s method involved creating an iFrame and inserting the iFrame code onto your website. Today I will walk you through the quick and easy process of adding that iFrame into your WordPress blog post. It is quite simple.

1.  Download and install iFrame Widget from the WordPress.Org Website

2.  Activate the iFrame Widget on your WordPress Site

3.  Switch from Visual to HTML view on the post editor. This is in the upper right hand corner of the main body of the post. See screenshot below:

4.  Place the HTML code that you created using yesterday’s post for the iFrame into the post.

Voila, your iFrame is now part of the post. One important note, do not change back from HTML view to Visual view on the editor. If you do this it will disable the iFrame. This is an identified problem with WordPress that has yet to be solved.

Share on Facebook7Tweet about this on Twitter10Share on Google+0Share on LinkedIn0Buffer this page
 
  • Pingback: Twitter Chat: 7 Steps for creating a transcript

  • Anonymous

    To avoid breaking your embedded code when switching between Visual and HTML modes is to use Custom Fields: http://codex.wordpress.org/Custom_Fields
    You basically setup some code in your page template, then call it from a custom field by placing the embed code into a custom field. That way when you switch back and forth between visual and html views it doesn’t mess up your html.

    If that gets too technical, I found this plugin which uses Custom Fields, but doesn’t require editing any code: http://www.matteoionescu.com/wordpress/embed-html/

  • http://profiles.google.com/vitaly.mylo Vitaly S

    WordPress removes iframe when you switch from “HTML” to “Visual” tab in your editor because of the security reasons.
    You can try this plugin to insert iframe into post content using such shortcode: [iframe width="640" height="480" src="http://player.vimeo.com/video/3261363"]. This method is easy and flexible.

  • Linda

    Even in the HTML view with this plugin activated, WordPress keeps stripping my iframe content out. :-(

  • http://www.newsuperhuman.com/ newsuperhuman

    Is this only for embedding a whole page, or can we take certain individual elements like Google+ posts? Is there any way to curate Google+ posts into a WordPress blog? Thanks!

  • http://oneway.co.il/djs חן פוני

    thanks very help to me :)

  • taha

    // make TinyMCE allow iFrames
    add_filter(‘tiny_mce_before_init’, create_function( ‘$a’,
    ‘$a["extended_valid_elements"] = “iframe[id|class|title|style|align|frameborder|height|longdesc|marginheight|marginwidth|name|scrolling|src|width]“; return $a;’) );

  • আমিই আসল আবীর

    Can I add amazon iframe this way? Sorry if my question sounds dumbr. I am a newbie to this world.