How to add 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 link to your data as well as some share icons to your footer. You can learn more about headers and footers in general here.

1

Go to the Footer settings and add your footer text there. You can supply up to three links with  text and a link using the Source name and Source url settings available.

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>

Linking to the raw data in CSV format? You might want to export your file to the web using Google Sheets and use the link generated there. More on this here.

And here's an example of adding share icons and making them link to social pages. Note 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.