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 firstname.lastname@example.org 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 Free, 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:
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:
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:
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.
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.
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.
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>
But Where to Put the Damn Snippet?
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
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!