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.
1.) Deleting the <div class> Tag
<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
<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.