How to Embed the Walls.io Widget on Your Website

Having a stand-alone social wall displayed on a large screen at your event or at a venue is a major use case of Walls.io — and one we’re pretty good at, I might add. 🙂

But for those of you who use your wall as a social hub or for a hashtag campaign, embedding Walls.io in your website as a widget is at least as important. In this tutorial, I’d like to show you the different ways Walls.io lets you take your social wall to the web!

Before we start: please remember that you can contact support@walls.io anytime if you need help embedding your wall.

Notice: Walls.io supports embedding for all Pro and Premium subscriptions. If you’re currently using Walls.io Basic, this would be a great reason to consider upgrading!

Embedding the iframe

The probably easiest way to integrate your social wall with any website is by copy/pasting a little HTML snippet containing the Walls.io iframe code. An iframe is a popular HTML element that allows you to embed one web page within another.

To grab the HTML snippet for your social wall, just log into your Walls.io account and click “Embed & Display” in the main navigation. There, you’ll find the standard iframe code and a few settings to adjust the widget:

Embedding Walls.io on Your Website – iframe

Depending on the website on which you are planning to embed Walls.io, you have a few different options available to you.

Embedding the Widget with Pre-Defined Dimensions

You can use the sliders or enter values to manually set the width and height of the iframe. Any change here is automatically translated to the HTML code below (you’ll see the style attributes for width and height change).

But keep in mind that setting the width and height manually only makes sense if you know exactly how large the widget should be when it’s displayed on your website. Let’s have a quick look at an example. Check out the front page of our customer Museumsquartier Wien:

Museumsquartier Wien – Walls.io

Since the website follows a strict column layout with pre-defined dimensions, the area occupied by the Walls.io widget is exactly 440×585 pixels (I’ve marked the Walls.io widget in cyan blue for your convenience). To customise the embed code for that website, just enter width and height and you’re good to go:

Museumsquartier Wien – Walls.io Widget

We also switched off “Allow scrolling” in the example above (resulting in the scrolling=”no” attribute in the embed code). While Walls.io’s infinite stream of posts can be scrolled through vertically by default, this behaviour is sometimes not preferred — mainly to avoid the ugly scrollbars some browsers/OS use. Of course, it’s totally up to you whether you want to turn scrolling on or off.

Embedding the Widget in Responsive Layouts

Nowadays, many website layouts are built to be responsive, dynamically adapting to the dimensions of each particular device or screen that they are being viewed on. It makes sense to embed Walls.io with that in mind as well.

So, when you don’t have to adhere to strictly defined dimensions you don’t have to bother setting width and height. Instead, you simply check the “Responsive” checkbox next to the width/height settings. That switches the width attribute of the embed code from fixed pixels to 100% — this means the Walls.io iframe will automatically extend to the full width of the containing HTML element, for example, a sidebar.

Embedding with JavaScript

In some cases, static iframes just don’t cut it, for a variety of reasons. As mentioned before, some browsers and operating systems display ugly scrollbars. On mobile browsers, scrollable iframes are difficult to handle, since it’s not clear if a finger swipe shows an intention to scroll within the iframe or outside of it. Furthermore, iOS  is infamous for its problematic behaviour with iframes.

Fortunately, we can solve all of these problems or, at least, work around them with our JavaScript embed.

Switching from iframe to JavaScript Embed

Technically speaking, JavaScript embeds still use iframes to integrate Walls.io, but instead of using the <iframe> HTML tag, you’ll be copy/pasting a <script> tag which will then in turn load the iframe. Sounds complicated? Good thing it’s not complicated to implement.

Go to “Embed & Display”, switch from iframe to JavaScript and, voilà, the code snippet now contains the JavaScript embed code.

Embedding Walls.io on Your Website – JavaScript

An Alternative to Ugly Scrollbars

Now, switching from <iframe> to <script> alone will solve some but not all of the issues mentioned. If you want to get rid of ugly scrollbars as well, select “Autoheight” and watch the magic happen.

With “Autoheight” enabled, the Walls.io widget will automatically extend its height to fit all posts into the iframe. No more scrollbars! When new posts come in, the iframe will simply grow accordingly.

Now, there’s only one last missing piece: loading older posts. What’s normally achieved by scrolling through an iframe (with the downsides mentioned before), can be replaced with a simple “Load more” button, using a JavaScript function provided by our snippet.

Just execute the function Wallsio.loadMorePosts(Number), where Number is the number of posts you want to load, to your snippet. Here’s a complete example:

<script id="wallsio-widget-script" 
        src="https://walls.io/js/wallsio-widget.js" 
        data-wallurl="https://walls.io/world" 
        data-height="400" 
        data-width="700" 
        data-autoheight="1" 
        data-notscrollable="1"></script>

<button onclick="Wallsio.loadMorePosts(10);return false;">
   Load more</button>

Notice: By embedding our widget through JavaScript, all problems regarding iframes on mobile can be solved easily. Just make sure to select “Autoheight” and provide a “Load more” button so users will still be able to scroll infinitely through your wall’s content!

But Where to Put the Damn Snippet?

Generating the iframe or JavaScript embed code is one thing, but putting it into action is another. What you’ll have to do is copy the full code snippet and paste it into the HTML source template of your website, at the exact spot where you’d like the widget to be embedded.

If that doesn’t make much sense to you, don’t worry — just forward the snippet to your web developer or webmaster; she’ll know what to do with it. If your website is powered by a CMS like WordPress or Drupal, look for ways that allow you to embed iframes like this plugin, for example.

Using Our Walls.io API

While this post focuses on embedding our iframe and JavaScript widget in your website, I’d also like to mention that you can use our API (http://api.walls.io) to build more customised integrations.

Not satisfied with our themes? Want to build your own spectacular visualisation of Walls.io content? With our API (and some technical expertise) you can do all that and more! Read our blog post to learn what you can do and how to get started with the Walls.io API.

License to Embed!

Congratulations! You’ve just mastered “Embedding Walls.io”. We’ve examined the various ways of embedding our widget, starting with the easiest, iframe-based embed method, progressing to the more stable (especially on mobile) JavaScript embed and, finally, touching on our API, which allows developers to go crazy with our social data. Equipped with this knowledge, you’ll now have an easy time embedding Walls.io in your website.