How to add adventures to your website 🎉

One of the best things about exploring the outdoors is all the stories those experiences leave behind.

Whether that's unforeseen challenges or welcome surprises, you always return with something to share.

So, how do you tell that story today? 

We can upload our recorded tracks to social media, we can write up our experiences on a blog or we can take footage from the trip and make an edit.

These are all great ways of helping people understand your adventure, but what if someone wanted to learn more about it or even start planning to go on the exact same one?

 

From inspiration to information

We're always working to help people have better, safer adventures and a huge part of that is enabling the FATMAP community to meaningfully share their adventures with the world. 

That means not only sharing images, videos and routes but for the resulting story to help people find their own adventure, to inspire them to get outdoors. 

So we're super happy to introduce an embeddable version of FATMAP!

 

How to embed adventures

Here's an example of what an embedded adventure will look like on your blog or website:

 

As you can see, it's fully interactive and your adventure will be front and centre and will be the only adventure visible.

This means you can add this to your article, story or website and really focus attention on this one particular adventure - a very important piece of feedback we received when discussing this with the FATMAP community. 

Embedding FATMAP is exactly like any Youtube or Vimeo embed. Create or grab the snippet, drop it into your website and hit save. Simple.

For example, the snippet for embedded adventure above looks like this:

<iframe src="https://fatmap.com/31113/Tirol/hiking/routeid/31394/Eagle_Walk_Stage_01:_St._Johann_in_Tirol_-_Gaudeamush%C3%BCtte/" frameborder="" allowfullscreen="" width="100%" height="680"></iframe>

 

The best part? Embedding an adventure will be free forever!

 

 How to embed a map

Here's an example of what an embedded map will look like on your blog or website:

This time, we’ve grabbed a URL from FATMAP and created a embed of a particular area.

Now you can display your favourite mountain areas with FATMAP anywhere in the world!

Again, embedding FATMAP is exactly like any Youtube or Vimeo embed. Create or grab the snippet, drop it into your website and hit save.

For example, the snippet for embedded map above looks like this:

<iframe src="https://fatmap.com/activity/freeride/@46.0768888,7.2824969,24320.4784125,-35.9049826,92.6848191,2388.9221056,normal" frameborder="" allowfullscreen="" width="100%" height="680"></iframe>

All we have done here is point FATMAP at the area we want to embed, select the activity we wanted to display and grabbed the URL. Drop that into a simple iFrame and add it to your site.

For an example of the how we grabbed the URL, check out the screenshot below.

 
Map-Embed-FATMAP-URL.jpg
 

 

The best part? Embedding a map will also be free forever!


OK, how do I get one?

We'll be allowing anyone to grab a snippet soon, but if you're interested in embedding FATMAP adventures on your website today then it's really simple.

Embed an adventure 

  1. Head to FATMAP.com and grab the URL of the adventure you want to embed.

  2. Then copy the snippet below (ensure you copy the entire snippet) and drop your adventure URL in there, removing [INSERT YOUR FATMAP ADVENTURE URL HERE].

    <iframe src=" [INSERT YOUR FATMAP ADVENTURE URL HERE]" frameborder="" allowfullscreen="" width="100%" height="680"></iframe>
  3. Ensure the URL includes an activity and coordinates. For example:
    https://fatmap.com/activity/freeride/@46.0768888,7.2824969,24320.4784125,-35.9049826,92.6848191,2388.9221056,normal

  4. Edit the height and width variables (optional)

  5. Drop the finished snippet into your blog or website

 

Embed a map

  1. Head to FATMAP.com and grab the URL of the area and activity you want to embed.

  2. Then copy the snippet below (ensure you copy the entire snippet) and drop your adventure URL in there, removing [INSERT YOUR FATMAP ADVENTURE URL HERE].

    <iframe src=" [INSERT YOUR FATMAP ADVENTURE URL HERE]" frameborder="" allowfullscreen="" width="100%" height="680"></iframe>
  3. Ensure the URL ends with the name of your adventure. For example:
    https://fatmap.com/31113/Tirol/hiking/routeid/31394/Eagle_Walk_Stage_01:_St._Johann_in_Tirol_-_Gaudeamush%C3%BCtte/

  4. Edit the height and width variables (optional)

  5. Drop the finished snippet into your blog or website

You may want to adjust the size of the embed depending on the design of your website. To do this, you can edit the 'width' and 'height' variables by either using percentages or pixels.

If you use percentages, then that refers to a size that will be the percentage of the container your dropping the snippet into. If you use pixels, then it'll be the size according to the amount of pixels you define.

If you have any questions about adding adventures to your website or blog, just get in touch.

We've been using embeds in our own blogs and really love how they add context to the amazing adventures our ambassadors go on every day. 

 

See you out there,

Adam and Team FATMAP

 


FAQs

But I want to showcase lots of adventures?

If you're a National Park or Ski resort, for example, you get check out this page for more information.

 

How do i get more FATMAP Updates?

Look out for more updates on new features by checking your inbox for our weekly (sometimes bi-weekly) FATMAP newsletter. If you've unsubscribed and want to receive the updates then just get in touch.