Embedding Google Visualizations in WordPress and Tumblr

The Google Code Playground is a good place to play around and experiment with many of Google’s Visualization widgets; you can even sign in with your Google account at the top right and save your work as you go (once logged in click the small dropdown arrow just to the right of the “Edit HTML” button in order to save).

Once your visualization is complete, however, you’ll want to be able to publish it. Both WordPress and Tumblr can display these visualizations – all that’s required is updating a few plugins and settings first.

[expand title=”To embed a visualization in WordPress” trigclass=”contentLink”]
By default, WordPress will essentially erase any complex code that is simply pasted into a regular post; if it didn’t, a little bit of bad code would easily break a whole blog. Instead, WordPress requires that any custom code be put into a “Custom Field” container, which separates and protects the rest of the page from whatever code it contains. In most basic WordPress installs, Custom Fields aren’t activated by default – first, you must choose “Screen Options” at the top right of the dashboard page, and check off the “Custom Fields” option. You’ll then see a Custom Fields area appear below your post on the edit page. To add your visualization, click “Enter new” and type a name (no spaces or special characters) for your visualization in the Name input box; in the Value area paste the code that the playground generates once you’ve hit the “Edit HTML” button. To save it, click the “Add Custom Field” button.

Now that your field is created, you need to actually insert it into your post. Though Custom Fields were originally intended for widgets that would appear on every post, their usefulness for adding arbitrary code has made them popular for embedding unique content in a single post as well – content like Google Visualizations and other multimedia. The easiest way to do this is by using a so-called “shortcode” – an HTML-like tag that works specifically in WordPress. To activate these, you’ll need first to install and activate the Custom Fields Shortcode plugin. Then, to insert your visualization in a post, simply switch to HTML editing mode (as opposed to “Visual”) and use the code:



[expand title=”To embed a visualization in Tumblr” trigclass=”contentLink”]
Embedding a Google Visualization in Tumblr is even easier than adding it in WordPress, though overall it can be less flexible. The first step is to switch your editing mode to HTML.

On your dashboard, click on the gear-shaped “Preferences” icon at top right. On the third option – “Edit posts using” – select the “plain text/HTML” option. To add your visualization to a post, simply paste the code that the Google Visualization Playground generates once you’ve hit the “Edit HTML” button wherever you want the visualization to appear.