Embedding a Tableau Viz

To embed one of your tableau visualizations in a WordPress post, go into your Tableau profile and view the visualization you’d like to embed.  Find the “Share” button at the bottom of the visualization and click it to bring up the embed code.  Copy the text in the “Embed Code” box, not the “Link” box.

Screen Shot 2015-12-31 at 4.23.36 PM

In your WP post, go into the text editor and paste the embed code where you would like it to appear.  (Embedding is easier if you already have your text written.)

Still in the text editor, look for two places where the embed code says “width=”.  The number following “width=” is a number in pixels–the width that your visualization will appear in the published post.  Delete the number and “px” in both the width measures, and replace these with “100%”.  This will ensure that your visualization does not over run the sides of the post.

Note: If you switch back into the visual editor, you will not see your visualization!  This is ok and normal, it will still appear and be interactive when published or previewed.

Adding footnotes to web pages

To insert a footnote in web text, we need to insert internal links, which work just like regular links, but link within one page rather than out to other pages.

In both WordPress and Omeka, type your body text, and then go into the text editor (in WordPress, “Text” in the upper right corner of the editor bar, in Omeka, click “Use HTML” and then click the “HTML” box in the upper right.

To link the footnote and the citation, we need to tell the link where to point, and then identify another place in the page with that name.  In the example below, name tells the website what the designation of that place in the page is called, and href tells the website where to take the reader when they click on that link.  The href must include a hashtag (#) at the beginning to tell the website that this is an internal and not external link.

Notice that each name has a corresponding href in the matching footnote or citation–this is to link your footnote in the text to the citation below.  The numbers (bolded in the example) should all correspond for a footnote/citation combo, and will need to be changed for each new footnote.  (For example, body1/fn1; body2/fn2, etc).

<a name="body1" href="#fn1">[1]</a>
<a name="fn1" href="#body1">1</a> citation text

You’ll need to manually move the citation block to the end of the body text.

This is an example of what a functional web footnote should look like:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam facilisis augue nec tristique molestie. Maecenas ac lectus risus. Aenean vel dapibus est. In ut ullamcorper nisl. Aenean ut dignissim magna, sed suscipit elit. Ut arcu lacus, consectetur a dolor eu, pellentesque varius sapien. Sed mattis urna sit amet ex dictum venenatis.[1]


1 Citation Text, “Lorem ipsum.”  Dolor Sit Amet.  (Albany: SUNY Press, 2015): 215-230.

Do not just paste the footnote code snippet into the visual editor!  It will not work as a link and it will appear as messy code in the page like this:
<a name=”body1” href=”#fn1“>[1]</a>
<a name=”fn1” href=”#body1“>1</a> citation text

You will always be graded on whether your citations are correct, if your footnotes work as links, and if you have clean links in your text.