How to embed iframe widgets in a wordpress.com blog © Netty Gritty

Some widgets are embeddable in a website/blog only via iframe code. Since iframe codes are restricted in wordpress.com, we will embed iframe codes of our iframe widgets not directly, but by using a different workaround.

HTML Tags

WordPress.com allows the following HTML code in your posts, pages, and widgets:

address, a, abbr, acronym, area, b, big, blockquote, br, caption, cite, class, code, col, del, dd, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, img, ins, kbd, li, map, ol, p, pre, q, s, span, strike, strong, sub, sup, table, tbody, td, tfoot, tr, tt, ul, var

Check out W3 Schools for more information about what each of these HTML codes are used for.

If you are familiar with HTML, you’ll notice that codes such as embed, frame, iframe, form, input, object, textarea and others are missing from the above list. Those codes are not allowed on WordPress.com for security reasons.

- from wordpress.com Support

Why Iframe widgets don’t work in wordpress.com
Iframe widgets are codes enclosed between iframe tags in your wordpress.com blog. As soon as you paste the iframe html tags and save the post, wordpress.com strips the iframe tags. And of course, the widget doesn’t show up as a result of broken code.

Question
Looks like iframe widget can’t be embedded in wordpress.com because iframe tags get stripped here. So is there a way to add the widget without using the iframe tags?

Answer
Iframes are special tags that enable embedding contents  as a frame (that has defined height and width) in your webpage.

So I have been researching for a free online Flash widget generator that can make iframe embeds possible in your blog.

Crazy idea!
And it worked!!!

I have figured out a way to embed the contents right in your blog using Flash. That means, you don’t even have to put iframe codes in your blog in the first place!

Question
But doesn’t Support docs say that iframes and Flash codes can’t be had?

Answer
Well, official information isn’t always trustworthy.  Although Flash codes don’t work in wordpress.com directly, it can be turned into gigya or vodpod shortcodes that DO work in a free wordpress.com blog!
See here:
How to have Flash embeds in a wordpress.com blog
*That post won’t really help you learn how to create a Flash code for your Tagul widget. I was able to figure out the code structure purely by chance. You see, the present code structure that Tagul demands is not intuitive for me. PreviouslyTagul used to give a code that was easily convertible to a gigya shortode. Now it has changed that. I have figured out the code structure from the tag clouds I have created at Tagul, before Tagul changed and that’s how I can still offer it to you!

Huh? What on Earth is Tagul?
Read on! I am getting there!!

How bloggers add iframe widgets  in a wordpress.com blog at present
Since there is no way to embed iframes in wordpress.com, bloggers either take a screenshot of the widget, paste the image and link the image to the required site. See a screenshot of a Facebook Likebox here:
How to add Facebook Likebox in a wordpress.com blog – part 1

Or they subscribe to the RSS feed of the site that offers the widget and display the RSS feed via an RSS widget.

For example, Google Calendar.

Problems with the present methods
While a screenshot is more presentable, it does not update automatically. So recent changes are not visible.
RSS feeds get and show updated content automatically, but they are not much to look at!

A better method
Turning iframe widgets into Flash widgets is better. It allows you to load the original iframe widget right in your own blog. That means it shows updated info automatically and it looks good.

Extracting the frame url from your iframe widget code

When you need to embed an iframe widget in a website, you just paste the iframe code.
But since wordpress.com doesn’t support this sort of code, you will have to extract the frame url that makes the iframe widget show up in your blog.

You can get the url of your frame in two ways.

Method #1
If you see your iframe widget anywhere (usually after creating the widget in a site), the iframe widget loads somewhere you can see so that you can change the looks if you want. Click somewhere in the iframe widget you see, right-click and choose Open frame in new tab. You will see that only the frame has loaded in that tab.

For example, if you create a Facebook Like Box, Facebook gives you an iframe code. And it shows you how the Likebox looks.
If you right-click inside the Likebox, you will see an option that says “Open frame in new tab”. If you open the frame in a new tab, that’s what you see. The frame in a new page.
:idea: See the frame of a Facebook Likebox here.
You can see the actual Like box and do your right-clicking experiments here:
How to add a Facebook Likebox in a wordpress.com blog – part 2

Method#2
Sometimes you can’t see the iframe widget as you build it. You have to extract and modify the frame url from looking inside the code.

:idea: See an example iframe code of this Google Book

You can see the Google Book embed in a free wordpress.com blog here:
How to embed Google Books in a wordpress.com blog

How to turn iframe codes into Flash codes

We will use Tagul to turn iframe codes into Flash codes.

Why Tagul?

Tagul is basically a tag cloud creation tool that can create beautiful tag clouds for your blog.
* You may want to check out the Tag Cloud I created with Tagul.

But, right now, we will use it as a different tool – an iframe to Flash converter.

Although Tagul is a tag cloud creation tool, it can be used to link to a web page and not just a tag page. If I choose to link to the url of a “frame” that I found in an iframe code, then Tagul will link to it, too. It will produce a “text link” within a box and when the text is clicked it is replaced by the frame in the confined box. Right in your free wordpress.com blog!

And that’s how anyone can have iframe widgets like Google Books, Google Calendar etc in a free wordpress.com blog. :D

Things to do

First of all, open a free accunt at Tagul. It’s a member-only service.

Create a new cloud.

You will see a “Tags source” interface like in the image below.

tagul cloud creation interface at Tagul
Click on the image to view larger version

How should you fill in the details?
As you see in the screenshot, you have the option to fill in some details in the left panel.

- Please leave the “url” link empty. We don’t need it to embed iframe widgets in wordpress.com via Tagul.
- Write the word you want your text box to say.
(My “Tag cloud” in the screenshot says “Calendar” because I used it to embed a Google Calendar!)

- Shorten the url of your frame using bit.ly or similar url shortening service. Then put the shortened url in the field that says “Tags’ links pattern”.
(I put the shortened url of the frame of my Google Calendar in the screenshot.)

Now choose the tab “Appearance”.
tagul cloud creation Appearance interface
Click on image to view larger version.

The “Appearance” tab helps you configure how your Tag Cloud will look.

“Customize cloud shape” is of no use here, since we have only one word in our “Tag Cloud” and you need many words to make that work. So choosing any shape will produce the same result.

You can choose “Tags Rotation Angles” arbitrarily.
(I prefer it as it is.)

Now expand the “Fonts” tab and choose a font.
tagul cloud creation Fonts interface
Click on image to view large version.

Now expand the “Colors and Animations” tab and fiddle with the settngs. You can click “Visualize” to see what happens with each setting.
tagul cloud creation colors and animation interface
Click on image to view large version.

When you like the look of your Tag Cloud, don’t forget to click “Save Changes” on the right!

Now expand the tab “Grab and Share!”
tagul cloud creation grab and share interface

Now choose the tab “Send link to a friend” and copy the link by clicking the button “Copy to clipboard”.
tagul cloud creation send link to a friend interface

Your job at Tagul is practically over!

Adding the “Tag Cloud” in your wordpress.com blog
Choose where you want your “Tag Cloud” to appear and paste the link there.
(The Tag Cloud will appear anywhere that gigya shortcodes are allowed, that is, in a post/page/side bar/footer/header-widget.)

My link is this one:

http://tagul.com/preview?id=19054@12

It goes to my Google Calendar when clicked.

Now observe the link you got carefully.
Delete everything from the beginning of the link upto the = sign. That will leave you with a number@number combination.
After I deleted the unnecessary portion, my number@number is this:
19054@12

Here is the basic code structure that you need to use:

[gigya src=”http://cdn.tagul.com/cloud.swf” type=”application/x-shockwave-flash” allowscriptaccess=”always” width=”number” height=”number” flashvars=”id=number@number”]

Caution
Please don’t copy the code from above. Copy the code from here
Paste this code where you want your “Tag Cloud” to appear.

:!: Remember to delete the part number@number in the code and paste your own number@number in its place. Also, don’t forget to delete the word numbet both in width=”number” height=”number” in the code and put the actual numbers. The numbers will determine the size of your iframe widget.

Bonus tip
If you want the link to open in a new window to allow full-screen viewing, this is the code you will need:

[gigya src=”http://cdn.tagul.com/cloud.swf” type=”application/x-shockwave-flash” allowscriptaccess=”always” width=”number” height=”number” flashvars=”id=number@number&openLinksInNewWindow=true”]

Copy the code not from above, but from here
Change the parts in the code in the same way you would the first code.


Why not to copy codes directly from this blog post
Sorry friends. It is not a copyright issue, if that’s you have been guessing! Thing is, if you copy the codes from this blog post, all the plain quotes will be automatically transformed into curly quotes when you paste the code in your blog and then the code won’t work! It’s a wordpress.com issue and I haven’t been able to figure out how to get rid of it.
If you have any solution, please help me!


Important Notice
This tutorial is not the same as it appeared on the publication date. I had to rewrite the tutorial in some parts (date: 31, March, 2011) since Tagul changed its interface.
If you want, you can still read the previous version.


Search this site Find more posts on: , , ,


http://relatedlinks.googlelabs.com/config/demo?url=http%3A//shongjog.wordpress.com/2011/01/25/how-to-embed-iframe-widgets-in-a-wordpress-com-blog-%25c2%25a9-netty-gritty/&title=How%20to%20embed%20iframe%20widgets%20in%20a%20wordpress.com%20blog%20%A9%20Netty%20Gritty%20%AB%20Netty%20Gritty&domain=http://shongjog.wordpress.com/&language=en

72 thoughts on “How to embed iframe widgets in a wordpress.com blog © Netty Gritty

  1. I have an error when put the url into the Tag’s link pattern and then clicking Build cloud:

    Validation error!
    Error 1839: Element ‘tag’, attribute ‘url’: [facet 'pattern'] The value ‘https://spreadsheets.google.com/ccc?hl=hu&key=t9KplkK593GFM5XP-SUYOJQ&authkey=COfGv6IP&hl=hu#gid=0′ is not accepted by the pattern ‘http://.*’. On line 38
    Error 1824: Element ‘tag’, attribute ‘url’: ‘https://spreadsheets.google.com/ccc?hl=hu&key=t9KplkK593GFM5XP-SUYOJQ&authkey=COfGv6IP&hl=hu#gid=0′ is not a valid value of the atomic type ‘url’. On line 38

  2. Thanks so much for this tip! I have used it in the blog I am currently creating. However, I am running into a related problem, and I thought you might have an idea for how to resolve it–perhaps you might have experienced something similar: When I add an event to the Google calendar (I add it just through my Google ID), the event shows at the date and time I specified. But then, when I view the Google calendar through my blog, the date and time are different–one day later. I thought this might have something to do with my time zone settings in the calendar vs. the blog. I had been using the UTC offset in my blog settings, rather than the actual time zone. so I changed that setting in the blog to be the actual time zone. But the problem persists. Here is my blog’s name: alpinehouse.wordpress.com

    I have also posted a comment in the WordPress forums. If you have any insight, I’d love it!

    • @alpinehouse ,
      Thanks so much for your comment.

      But unfortunately, I don’t know what’s causing the problem. I used my Google Cal only to demonstrate an example, I don’t know yet which settings cause what problems. Sorry!

  3. On my side I get back the error message:
    embed_shortcode: ”http://cdn.tagul.com/cloud.swf” is not a valid URL

    Any idea? I shorten the google calendar link, and follow all your topic

  4. Hi,

    I am using this procedure to embed an actual tag cloud that I created using Tagul. This is the code I used:
    [ gigya src=”http://cdn.tagul.com/cloud.swf” type=”application/x-shockwave-flash” allowscriptaccess=”always” width=”800” height=”698” flashvars=”id=23432@1”]

    But, I get the following error:

    embed_shortcode: ”http://cdn.tagul.com/cloud.swf” is not a valid URL

    I have a wordpress.com blog, could you help me?

    Thanks so much!

    • Your code has curly quotes in it, they should have been plain quotes.
      Please paste the code here in your HTML editor and try again.

      But before you do that, go back to your Tagul and create your Tag Cloud again. It says N/A even when I paste the code correctly, because you didn’t save your tag cloud (or you have deleted it).

  5. I followed your instructions to a T, but the box shows a search page for cloud tags and not the Facebook Likebox it’s supposed to show.

    Any idea what’s wrong?

  6. Thanks for the instructions! I too ran into the problem of my Gigya link using curly quotes rather than straight quotes, but once I fixed that it worked like a charm. Your instructions were easy to understand and follow.

  7. had problem -__- pls help, do i need recreate my facebook like box? tq
    [gigya src=”http://cdn.tagul.com/cloud.swf” type=”application/x-shockwave-flash” allowscriptaccess=”always” width=”292” height=”800” flashvars=”id=24548@1”]

    • ok after recreating it, same problem still occur. embed_shortcode: ”http://cdn.tagul.com/cloud.swf” is not a valid URL

      • Sorry for my late reply. been bz!
        Copy the code from here and your likebox will show up:
        http://textsnip.com/01e792

        You were doing everything right, but somehow wordpress.com changes plain quotes to curly quotes when you paste the code in my post I don’t know why rendering the code unusable.

        Well, all’s well that ends well. Best of luck! :D

  8. Well, I attempted to use your technique for adding a Google calendar at the bottom of the right widget area on my WordPress.com blog:
    http://aidparma.wordpress.com/
    The code employed, inside a text widget, was:
    [gigya src="http://cdn.tagul.com/cloud.swf" type=”application/x-shockwave-flash" allowscriptaccess="always" width="200" height="200" flashvars="id=25293@1"]

    However, I have two problems:
    1) Initially no calendar is shown, just the word “Calendar”, with the font/color chosen on Tagul. But I would like that the calendar appears directly, without having to click over the word “Calendar”…
    2) On the calendar, the dates when some event is scheduled appear empty (for example 5th May)… Perhaps this is a Google Calendar issue, and has nothing to do with this “Tagul” trick for displaying an iframe on WordPress.com… But, as I see that you too did embed a Google calendar, perhaps you can help also on this issue!

    Thanks in advance!

    • Hi…

      1) That’s the way it’s supposed to be. This is the only way of having a Google Calandar embed that will show up i wordpress.com.

      2) Congrats!

  9. Well, I was too anxious to post questions.
    I quickly solved problem n.2, the calendar was just too small for displaying its contents properly…
    I inserted it again in the footer area, with larger size, and now the events are shown properly. Still problem n. 1 is bugging me, the calendar appears only after clicking on the word “Calendar”…

  10. Having problems embedding my google calendar. Thought I followed the instructions but no luck — my site: http://celinahoops.wordpress.com/

    Code:
    [gigya src="http://cdn.tagul.com/cloud.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="number" height="number" flashvars="id=25310@1"]

    Is it the theme? Any suggestions would be great, thanks.

  11. Pingback: With the Internet, the Nineteenth Century Never Gets Old! « The History Channel This Is Not…

  12. Hi , I tried to add facebook like for my blog …its not working :( please help. [gigya src="http://cdn.tagul.com/cloud.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="number" height="number" flashvars="id=28362@1"]

  13. Hi,
    Thx for sharing, but I faced some kinda problem that I have no idea what’s going on :(
    I copied the shorten link “http://bit.ly/kTEd5g” into Tagul, and followed every steps you mentioned. somehow when I press the “Visualize”, pops out bunches of error code …… plz help

  14. Hi thank you for the post. You are great and the post too lol. I have a iframe link which is a tv live link and i want to post on my blog. Can you help me to transform it ?

  15. I don’t know what I’m doing wrong. Here’s my code [gigya src="http://cdn.tagul.com/cloud.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="600" height="600" flashvars="id=30293@1"] When I look at my page, I see the word Calendar, but when I click on it to see the actual calendar, all I get is a blank box.

  16. I’ve placed a chatroll widget in the wp.com but it need to be clicked to show the original widget. I need it direct so that my visitors when open my blog, they shoud see directly the chatroll widget. I don’t want them to see after clicking on chat text in the tag. how can i do so. is there any other method rather then tagul?

  17. Hey there!

    Thanks for the tutorial, it was awesome. You may see a ping from a post I made about using this tutorial to specifically embed a webdoc (webdoc.com) but that might soon move to the official blog.

    Very helpful anyway. Thanks a bundle.

  18. Hi, the link works fine in a separate window but unfortunately NOT in WordPress. I see the tag cloud, but nothing happens when I click on the cloud… also no error warning????

    Tx. for helping out!

  19. Pingback: Poor mans hack – iframe in free wordpress blog « cannotcode

  20. Thank you so much for all the great and thoughtful posts on this blog. I have finally managed to work it out that inorder to stop a new window from opening- all you have to do is unclick the tickbox- “open link in a new window” in Tagul.

    Tagul is so cool!!! I am so amazed. Check out my brand new blogroll via Tagul.

    http://seabedhabitats.org/2011/11/13/blogrol/

    Thank you so much NG

  21. Thanks to a combination of Tagul, JotForm and the inspiration provided by this blog post, my WordPress.com blog readers can now upload up to 300MB directly to my Dropbox, without ever having to register for Dropbox! It is quite secure as you can choose the option to keep it password protected

    http://www.jotform.com/dropbox/

  22. Pingback: CoverItLive in a WordPress.com Blog « raincoaster media

  23. Pingback: Bruk Lommekjent.no når du skriver turblogg | På den andre siden

  24. Hello Netty, I dont know if you are still responding to inquiries about this. I think its great! and the cloud link from Tagul works perfectly when pasted into browser url. However, the code imbedded in wordpress page (html tab) shows Calendar text, but when it clicks the result is blank space (same dimensions as entered in code). Been trying all day, any ideas?

    [gigya src="http://cdn.tagul.com/cloud.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="800" height="600" flashvars="id=63818@1"]

  25. I know this is a very old post, but I have tried everything and in every way possible to make this work and I’m still not there. I do get it to load on my page, but it shows up with the big NA and then when you click it, it takes you to the Tagul website front page, but not to my linked embedded code. any idea what has happened to the sequence.

Comments are closed.