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.
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.
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. 
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.
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”.
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.
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.
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!”
Now choose the tab “Send link to a friend” and copy the link by clicking the button “Copy to clipboard”.
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.
Find more posts on: widget, flash, code, wordpress.com
Like this:
36 bloggers like this post.
