How to make Tableau work with WordPress

When finishing my Digital Academy Project, I spent too much time figuring out how to make Tableau visualisations work with WordPress. It should have been be easy – Tableau gives you an Embed Code that should work smoothly. Well, it doesn’t. 

This is what you get. Looks kinda promising, ha? Lots of code, some class, some link, some other important-looking stuff. Well… It’s good for nothing. At least here.

<div class='tableauPlaceholder' id='viz1527869147951' style='position: relative'><noscript><a href='#'><img alt='Dashboard 1 ' src='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;se&#47;seniori-word_cloud_top100_kategorie&#47;Dashboard1&#47;1_rss.png' style='border: none' /></a></noscript><object class='tableauViz' style='display:none;'><param name='host_url' value='https%3A%2F%2Fpublic.tableau.com%2F' /> <param name='embed_code_version' value='3' /> <param name='site_root' value='' /><param name='name' value='seniori-word_cloud_top100_kategorie&#47;Dashboard1' /><param name='tabs' value='no' /><param name='toolbar' value='yes' /><param name='static_image' value='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;se&#47;seniori-word_cloud_top100_kategorie&#47;Dashboard1&#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' /></object></div> <script type='text/javascript'> var divElement = document.getElementById('viz1527869147951'); var vizElement = divElement.getElementsByTagName('object')[0]; vizElement.style.width='100%';vizElement.style.height=(divElement.offsetWidth*0.75)+'px'; var scriptElement = document.createElement('script'); scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js'; vizElement.parentNode.insertBefore(scriptElement, vizElement); </script>

I looked for some plugins to make my life easier, I tried even some .php plugin I found on GitHub but all it did was disabling the editing window.  Urgh, time well spent!

I knew it has to work. If Power BI can do that so can Tableau! Google helped eventually, as it always does. The most important thing is: don’t use the embed code, use the link! It needs just a tiny edit.

This is how your link looks like:

https://public.tableau.com/views/seniori-word_cloud_top100_kategorie/Dashboard1?:embed=y&:display_count=yes

… this is how you want it to look like:

https://public.tableau.com/views/seniori-word_cloud_top100_kategorie/Dashboard1?:showVizHome=no&amp;:embed=true

… that’s your link in the <iframe>:

<iframe src="https://public.tableau.com/views/seniori-word_cloud_top100_kategorie/Dashboard1?:showVizHome=no&amp;:embed=true" width="800" height="500" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

And that’s your Tableau Viz!

 

PS. When dealing with all this fun, don’t forget to switch from “visual” to “text” mode. 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *