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

HTML cloud without Silverlight

In the last post, I briefly described the new HTML cloud functionality.  In the latest version of Tagxedo (just uploaded), I decided to remove the remaining jQuery magic and make it a pure, embeddable image map using HTML only.

The significance?

  • You should be able to embed it in your blog even if scripts / plugins are disallowed or disabled.
  • Your entire audience, regardless of browser and OS, whether they have Silverlight or not, should be able to view your cloud.

Here's an example.  All words are clickable and lead to the corresponding Google searches (or to the Tagxedo page if you click "www.tagxedo.com").

 
Wanna try it yourself on your blog? Here's the step-by-step:
  1. Make a Tagxedo (of course)!
  2. Click "Save" and use the "Html Cloud (Experimental)" option.
  3. Choose the dimensions (e.g. width of 600px or less, height of 400px or less).
  4. Save both the image (e.g. tagxedo.jpg) and the Html (e.g. tagxedo.html).
  5. Upload the image to your site and copy the actual URL.  You can also use any 3rd party site, such as the wonderful free image hosting site Imgur.
  6. Edit tagxedo.html to refer to this URL
  7. Cut and paste the portion of HTML code in tagxedo.html to your index.html between the <div> tags, inclusive

That's it!  And since there is no Javascript involved, this method should be accepted by all blogging platforms.

Two caveats:

  • The links are always Google queries.  This will be improved later, and for now, you can customize your links by editing tagxedo.html directly (global search-and-replace).
  • The words don't animate.

Last but not least, HTML purist may wonder...  why not just use pure image-free HTML (CSS + @fontface)?  That's a good question.  Actually I have tried that and the short answer is that it doesn't work (well).  At least not in any compatible or consistent way.  I guess I'll explain that in a separate blog post.

Posterous + Latest Updates

Welcome to "All Things Tagxedo", the official Tagxedo blog now hosted by Posterous!  Now you get all the goodies that comes with a "real" blogging platform -- Search, comments, tags, RSS, and more.

I have written about 10 posts in the temporary "blog", which have now all been reposted.

The following is a list of recent updates since I last posted:

(1) Make a Tagxedo, Quick! -- If you haven't been to the homepage lately, I encourage you to do so.  Now you can quickly create a Tagxedo in mere seconds!  Enter a URL, Twitter ID, delicious ID, news keywords, search terms, or an RSS-ready URL (e.g. a typical blog), hit enter, and voila!

More specifics about what data is used by Tagxedo to create the cloud:

URL -- the webpage
Twitter ID -- latest 100 posts.
Delicious ID -- top 100 delicious tags (including frequencies).
News keywords -- Google News RSS feed
Search keywords -- Bing search RSS fee
RSS -- the corresponding RSS feed of the URL

(2) [Experimental] HTML cloud -- while Silverlight is required to build Tagxedo, you can now create a clickable tag cloud that is solely based on HTML and Javascript.  Go to "Save", figure out the desired dimensions of the tag cloud, and save both an image (must be named "tagxedo.jpg") and the corresponding HTML ("tagxedo.html").  Now just open the HTML and you have a fully working clickable Tagxedo that everyone can see!

I am not sure what to do with this yet, hence this is just an experiment.  Though this sounds nice in theory (no plugin required), the image is at least 2X larger in size than the corresponding Silverlight player, and the words don't animate.  Is this acceptable?  Useful?

There are more ways to create HTML clouds.  For example, (a) use only plain text and CSS magic (only works with standard web fonts and "horizontal" orientation), and (2) use Html5 Canvas + SVG font.  The killer problem (even for (a)) is that font rendering is inconsistent across browsers -- and HTML5 and better web standard won't solve this problem -- and when the words are off, they may either create holes or overlaps in the word cloud, potentially turning a visually stunning cloud into an eyesore.

I don't know, I'm still looking into this.  I'd like to get some feedback on this.

(3) Custom Shape -- you can continue to edit a shape after you have "accepted" it and used it.  Yeah, sometimes the shape looks good until you put it in action.

(4) Hard Boundary -- now you can specify whether the boundary of the shape is soft (the default) or hard.  Hard boundaries cannot be violated, which at times helps making the shape stands out more.  The disadvantage is that only words that exactly fit will be accepted, hence potentially leaving some regions completely unfilled.

That's it for now.