Embedding Tableau Workbooks into WordPress Blogs

Of my many responsibilities here at Alight, I’m tasked with administrating the company blog, managed through our WordPress CMS. It’s an enjoyable role, though—as with anything—it can occasionally come with its share of challenges.

The most recent conundrum came earlier this week when Jared Sloan wrote a blog post that included a mixture of copy and media — in this case, a fully functioning, interactive Tableau workbook embedded directly into the page. It’s an awesome feature, and the first time we’ve attempted it. To most people, it probably looks like a pretty straightforward implementation process, but I can conclusively tell you that Jared and I had a hellish time trying to figure out how to get it working properly. Consequently, I wanted to share a few techniques we learned along the way.

When Jared sent over his post as a Word doc, it came with a massive string of JavaScript, which originated from his tableau public account. Here’s what that code actually looked like:
<script type='text/javascript' src='https://public.tableausoftware.com/javascripts/api/viz_v1.js'></script><div class='tableauPlaceholder' style='width: 1104px; height: 919px;'><noscript><a href='http:&#47;&#47;www.channelmix.com&#47;alight-insights&#47;tableau-filters-using-custom-shapes'><img alt=' ' src='https:&#47;&#47;public.tableausoftware.com&#47;static&#47;images&#47;NF&#47;NFL-AFCWestQuarterbacks&#47;FilterusingCustomShapes&#47;1_rss.png' style='border: none' /></a></noscript><object class='tableauViz' width='1104' height='919' style='display:none;'><param name='host_url' value='https%3A%2F%2Fpublic.tableausoftware.com%2F' /> <param name='site_root' value='' /><param name='name' value='NFL-AFCWestQuarterbacks&#47;FilterusingCustomShapes' /><param name='tabs' value='no' /><param name='toolbar' value='yes' /><param name='static_image' value='https:&#47;&#47;public.tableausoftware.com&#47;static&#47;images&#47;NF&#47;NFL-AFCWestQuarterbacks&#47;FilterusingCustomShapes&#47;1.png' /> <param name='animate_transition' value='yes' /><param name='display_static_image' value='yes' /><param name='display_spinner' value='yes' /><param name='display_overlay' value='yes' /><param name='display_count' value='yes' /><param name='showVizHome' value='no' /></object></div><div style='width:1104px;height:22px;padding:0px 10px 0px 0px;color:black;font:normal 8pt verdana,helvetica,arial,sans-serif;'><div style='float:right; padding-right:8px;'><a href='http://www.tableausoftware.com/public/about-tableau-products?ref=https://public.tableausoftware.com/views/NFL-AFCWestQuarterbacks/FilterusingCustomShapes' target='_blank'>Learn About Tableau</a></div></div>

As we run our website and blog using a WordPress CMS, our first (and ultimately incorrect) assumption was to simply switch the main body content field from the “Visual” to the “HTML/Text” view and paste the JavaScript as if it were standard HTML. However, instead of displaying properly in preview mode, it appeared as a static image with an unusable play button. Frustrating to say the least— It took quite a bit of digging through a couple of obscure WordPress forums but, as it turns out, there are two fairly simple yet effective workarounds:

1.) Deleting the <div class> Tag

As you probably saw in the JavaScript, the string included a <div class> tag. In this case, that tag acts as a way of grouping content and establishing its unique features. For the purposes of this tableau workbook, it was designed to set the height and width of the overall file. That, however, created a conflict within WordPress’ HTML editor, distorting how it’s display. The solution we used, luckily, was rather easy: isolating and deleting
<div class='tableauPlaceholder' style='width: 1104px; height: 919px;'>
from the larger string. Once that was out of the way, all we had to do was paste the code back into the HTML/Text view where it worked as intended.

2.) Using iFrame Tags

The other way to solve our problem, which I discovered after the fact, was to completely scrap the JavaScript in favor of iFrame tags. All that’s need is the URL from the tableau workbook and this HTML string:

<iframe src="URL of your Tableau Workbook" width="1200" height="1000"></iframe>Here is what Jared’s tableau workbook looks like with iFrame tags:

<iframe src="https://public.tableausoftware.com/views/NFL-AFCWestQuarterbacks/FilterusingCustomShapes" width="1200" height="1000"></iframe>

After adjusting the height and width for the site’s size, then just paste it into the HTML/Text view.

With these solutions, I should note a caveat: They may not work with wordpress.com blogs, which are free sites hosted by WordPress. Those sites in particular are far more restrictive and less customizable than self-hosted wordpress.org sites.

There you have it, two simple ways to embed your tableau workbooks into your WordPress blog. Hopefully, these few tips will spare you from hours of scouring obscure support forums written years ago on dark and dusty websites.

Leave a Reply