4 Replies Latest reply on Dec 3, 2016 12:05 PM by John Barr

    Embed Code from Tableau Public 10.x to Wordpress

    John Barr

      I've had a heck of a time trying to embed code from my Tableau Public posts into Wordpress.org site. Previously it used to be as simple as copy the embed code from the Share option on Tableau Public, past into the text tab of a new wordpress post. Now when I post, the code is now rendering as text.  This is a preview of my blog post with the embedded code. Normally, this would show the viz.

       

      blog post.png

       

      As best as I can tell, the issues started to occur with the Tableau 10 updates. Several of my old posts are not rendering correctly.

       

      Anyone having similar experiences? I previously had no issues and hope it is just a plugin or code tweak but I haven't found anything posted. 

       

      For browsers I've tried IE, Edge and Firefox across 2 different machines. 

        • 1. Re: Embed Code from Tableau Public 10.x to Wordpress
          Tom W

          This sounds like a wordpress issue to me, not Tableau.

          It looks like wordpress is rendering the code as text rather than treating it as HTML. You could prove this by taking the embed code and pasting it into a JSFiddle or another webpage and seeing if it works there.

          • 2. Re: Embed Code from Tableau Public 10.x to Wordpress
            John Barr

            Thanks. I wouldn't doubt it but the copy and paste worked fine prior to tableau public going to 10.x. I saw this old post I need help embedding a tableau interactive image in my wordpress blog  and although old, I wonder if the issue is similar after the 10.x upgrade. I will keep looking. 

            • 3. Re: Embed Code from Tableau Public 10.x to Wordpress
              Tom W

              What's the link to your viz on Tableau public?

              I can't imagine your embed code will be different to any other viz, so I'll just pick one at random. Here's what I did;

              1. Opened this viz Tableau Public
              2. Clicked Shared, Copied the entire contents of the embed code textbox
              3. Opened jsfiddle.com, pasted the contents of the embed code into the HTML box.
              4. Clicked run, the viz shows fine. Proof - Edit fiddle - JSFiddle

              Looking at your screenshot above it does appear that the only part of the text showing on your blog is the <script> part. Note how the <div class='tableauPlaceholder' etc isn't showing? I feel like this gives further proof to the fact wordpress is blocking the script.

              2 of 2 people found this helpful
              • 4. Re: Embed Code from Tableau Public 10.x to Wordpress
                John Barr

                This was insanely simple and it took me a long time to get to it but this is how this was resolved in case anyone else has a similar challenges. Look for bold text to see the 2 steps.

                 

                When I copy and pasted the Embed Code, it pasted like this:

                <div class='tableauPlaceholder' id='viz1480793629721' style='position: relative'><noscript><a href='#'><img alt='Anaheim Ducks Attendance Report ' src='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;NH&#47;NHLAttendanceMain&#47;TeamAttendance&#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='site_root' value='' /><param name='name' value='NHLAttendanceMain&#47;TeamAttendance' /><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;NH&#47;NHLAttendanceMain&#47;TeamAttendance&#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('viz1480793629721');                    var vizElement = divElement.getElementsByTagName('object')[0];                    vizElement.style.width='804px';vizElement.style.height='1169px';                    var scriptElement = document.createElement('script');                    scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js';                    vizElement.parentNode.insertBefore(scriptElement, vizElement);                </script>

                 

                I then went in the editor and entered carriage returns at logic spots like this:

                <div class='tableauPlaceholder' id='viz1480793629721' style='position: relative'>

                <noscript>

                <a href='#'>

                <img alt='Anaheim Ducks Attendance Report ' src='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;NH&#47;NHLAttendanceMain&#47;TeamAttendance&#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='site_root' value='' />

                <param name='name' value='NHLAttendanceMain&#47;TeamAttendance' />

                <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;NH&#47;NHLAttendanceMain&#47;TeamAttendance&#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('viz1480793629721');                   

                var vizElement = divElement.getElementsByTagName('object')[0];                   

                vizElement.style.width='804px';vizElement.style.height='1169px';                   

                var scriptElement = document.createElement('script');                   

                scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js';                   

                vizElement.parentNode.insertBefore(scriptElement, vizElement);               

                </script>

                 

                Magically, this is what fixed my issue.

                1 of 1 people found this helpful