How to Embed Tagxedo in Your Blog

A few people are confused about how to embed Tagxedo into their blogs.  So let me clarify a bit.  Hopefully this is easy enough to follow:

(1) If you want animation and is okay with showing Silverlight

The easiest approach would be to use Iframe embedding.  Following these steps:

(a) "Save to Web"

(b) Copy the "Iframe Code Snippet".

(c) Paste that to your blog post in HTML mode

(d) Edit the width/height to your liking.

The following is an example using this method (pardon the "Powered by Tagxedo" button; will be fixed soon).

(2) If you just want the picture (and don't care about links)

To me the easiest is to use "Save to Imgur".  You'll get a shortened URL in a few seconds.

(3) If your Tagxedo must be viewable by everyone (i.e. no Flash, no Silverlight, no Javascript)

You can save it as an image map.  Image map is clickable and only uses raw Html.

(a) Choose "Save to Html Cloud (Experimental)".

(b) Choose width / height.  Use the (default) max option.  For example, 450 max x 450 max.

(c) Save the Jpg (tagxedo.jpg)

(d) Upload the Jpg to Imgur.com, and note the "Direct Link" URL.

(e) Save the Html (tagxedo.html)

(f) Edit the Html so that the src tag points to the "Direct Link" URL in (d).  Take out the first two and last two lines (so that it starts with <div> and ends with </div>).

(g) Insert the modified Html to your blog in Html mode.

The following is an example using this method.

The first two methods are pretty straight-forward, but the third is not as elegant.  In the future, I may combine (1) and (3) so that the animated Tagxedo will be shown if the user has Silverlight installed, and if not, the image map will be shown.  Hopefully the steps can be simplified too.

-- Hardy

[Repost 5/5/2010] - Embedding Tagxedo Apps (II)

Previously I talked about the "Save as App" feature. Today, I'm going to talk about "Save to Web", a brand-new feature that I just added. With this feature, it is now easy to share the Tagxedo cloud with friends (just provide the URL), and easy to embed the Tagxedo into your webpage (using iframe, code snippet provided).

A caveat. You can only save your Tagxedo to web if your cloud does not use more than three fonts (e.g. the "<all font>" option is out), and no local fonts are used. Of course, you always have the option of "Saving as App" and hosting the app on your web server.

Depending on the number of Tagxedo clouds generated and the amount of traffic, this "Save to Web" feature could be a disk-space and bandwidth killer. I reserve the right to either stop this feature in the future, or to make it a premium feature. I wonder if I should put in some bandwidth constraints (such as at most two "saves" every five minutes)?

This feature is pretty easy to use. You hit "Save...", and choose the "Web" option. Fill in your desired username (default is "Anonymous"), title of the Tagxedo (default is "Untitled"), and some comments (if any). Then hit "submit", and wait for the server to finish the transaction. Once done, Tagxedo will show you the thumbnail URL, the URL to replay the Tagxedo, and a one-line iframe code snippet to embed the cloud into your blog. I checked, and found that embedding to Blogger is trivial! I would assume the same for Wordpress.

To show you how it works visually, I created and embedded the "Peace" Tagxedo (using the iframe code snippet provided). You can move over it to see how it behaves. Also, you can click this link to see a bigger version of the player.

 

So far, the player does nothing but to play the Tagxedo. There will be more changes down the road (e.g. show the user name, title, and comments).

[Repost 4/25/2010] - Numbers, Punctuations, and Apps

A few more changes to Tagxedo:


Embeddable App
This is the feature that many are waiting for: saving the Tagxedo cloud as a Silverlight app! All you need to do is to (1) download the "Xap", and (2) add a simple code snippet to your Html. The "Xap" file is the Silverlight equivalent of .swf or .fla.

You'll be able to see the Tagxedo cloud on your webpage, with the full animation and outgoing links. The outgoing links are currently still defaulted to Google search, but this will be changed shortly.

Currently users will be able to create only one kind of app -- called an "Embedded Tagxedo". The XAP file of an embedded Tagxedo contains (almost) all the information required to display the tag cloud with full animation, including the fonts used. Typically, the size of the XAP file is around 35KB including the font. However, if the Tagxedo cloud uses a lot of fonts (i.e. when the "all fonts" option is chosen), the resulting app will be very big (e.g. 1MB).

For completeness I'll also mention that there is another kind of app -- called a "Dynamic Tagxedo" -- that does not embed the fonts into XAP, but references them symbolically. When a dynamic Tagxedo app is started, it will dynamically download the fonts if they are not already present in the browser cache. In fact, all playable Tagxedo clouds in the gallery are dynamic apps. The main advantage of a dynamic app is that a font that is referenced by multiple dynamic Tagxedoes only need to be downloaded once (and subsequently cached by the browser). That said, this method is currently not publicly released because if a user uploads a dynamic Tagxedo to a widely popular website, it may cause unsustainable bandwidth pressure on Tagxedo. If this is a must, I would like to hear from you.

Another issue is that certain blog platforms such as Google Blogger or Wordpress may not allow this kind of embedding. I believe there is a way around it, possibly using some iframe-based gadget. However, I'm not familiar enough with these platforms to make any recommendation.

Options on Numbers and Punctuations
You can now control how Tagxedo should treat numbers and punctuations. The default is to ignore them, but you can override that. For punctuations, you even have fine-grain control over individual punctuations marks (such as skipping all '#', but not '!').

Options on Stop Words and Stemming
By default, Tagxedo removes all common English words (such as 'we', 'they', 'are', and 'how'), and performs "stemming" which is to count related words (such as 'tuxedo' and 'tuxedoes') as the same word. You can now override both behaviors.

[Repost 5/2/2010] - Embedding Tagxedo Apps

About a week ago I released the "Save as App" functionality, and in fact I have seen embedded Tagxedo players on some blogs. However, most of these "in the wild" Tagxedo players are hosted by the bloggers themselves rather some web publishing platforms such as Wordpress or Google Blogger. These platforms seem to place certain restrictions on user-added Html code with "object" tag.

I also got complaints about embedding trouble with Wikispaces.com (I guess a site popular among educators?), which at first glance is in the same boat as Wordpress and Blogger. However, it turns out that users can indeed embed HTML code. I was able to successfully embed a playable Tagxedo app. The following are the exact steps:

  1. I opened the FIFA Tagxedo at http://www.tagxedo.com/app.html?player=http://www.tagxedo.com/gallery/worldcup.xap, and saved it as an embedded XAP (I named it fifa.xap).
  2. I clicked the "Save..." button again and copied the code snippet for later use.
  3. I logged on to my Wikispaces account ("Test4695151"), and created a page.
  4. I uploaded the file "fifa.xap" to Wikispaces, and clicked the "fifa.xap" button so that a widget button is created.
  5. I previewed the page, which shows a single button. When I hovered the mouse over the button, Firefox showed me the URL of the xap (http://test4695151.wikispaces.com/file/view/fifa.xap). Remember this URL (or in Firefox you can right click and hit "Copy Link Location").
  6. I continued editing, and add a new widget of type "Other HTML", and pasted the code snippet mentioned above to it. Replace the word "Tagxedo.xap" with whatever URL found in the previous step.
  7. I saved the page.

That's it! To see what it looks like, go to http://test4695151.wikispaces.com.