How to add data download links and share icons to your header or footer

You can add links and share icons in your header and footer. This example walks you through adding a download link to your data as well as some share icons to your footer. You can learn more about headers and footers here.

1

To add a link for a user to download the data of a visualization, go to the Note options of the Footer settings and add {{download_data "Download data"}}, with the text to be shown in quotes. It works both in Note and Note (secondary) settings.

2

You can also add links using HTML – you might want to do this if you've already added three links using the built-in settings or if you're looking to add share icons. We recommend doing this in the Note and Note (secondary) settings.

Here's an example of an additional link added with HTML:

<a href="https://docs.google.com/spreadsheets/d/e/2PACX-1vSlOM8DQ96whooJLK8HC5nmx31ts6wwIeSCRh6C5ZxuwBCltkl0Rz1KN7ONF-y8oKXgDNw8s6GzFDE4/pub?output=csv">Get the data</a>

3

In the Footer settings you can add your footer text. Moreover, you can supply up to three links with text and a link using the Source name and Source url settings.

4

Here's an example of adding share icons, and making them link to social pages. it's important to include target=_blank in your link so that the link doesn't attempt to open within your visualization frame.

If you're adding more than one share icon, you can wrap them in a div with style="overflow:hidden" and display:inline-blockso they display next to each other. Note this example links to our example visualization – you will need to generate your own share links and replace ours.

<div style="overflow: hidden; display: inline-block;">
<a href="https://twitter.com/intent/tweet?text=Check%20out%20my%20visualization!%20https%3A//public.flourish.studio/visualisation/3939860/" target="_blank">
<img src="https://public.flourish.studio/uploads/64df254b-27d8-45b4-955d-25de79f18eca.png" height="20px;" width="20px;"/></a>
<a href="https://www.facebook.com/sharer/sharer.php?u=https://public.flourish.studio/visualisation/3939860/" target="_blank"><img src="https://facebookbrand.com/wp-content/uploads/2019/04/f_logo_RGB-Hex-Blue_512.png?w=200&h=200"height="20px;" width="20px;"/></a>
</div><br>

If you don't have a link to your share icons but have them on your computer, you can also upload them to the data tab in Flourish to generate a link.  More on this here.