Embedding your social wall on your website is an easy way to connect all your social media activity to your website, to create an ever-current social brand hub or to market your latest hashtag campaign to your website visitors.
Read on and learn how to embed a social media wall to your website if you’re using:
Walls.io is for everyone
The advent of drag-and-drop website builders has made setting up websites extremely accessible. With these Software-as-a-Service (SaaS) website builders, a website can be set up within hours and with only minimal technical knowledge. It’s easy, fast and looks good.
We believe that displaying your social wall on your website should be just as easy. So we’re going to show you how you can embed your social hub on your website in a few simple steps. We’ll first walk you through how to get your code snippet and then explain how to inject it into your website.
While there are countless website builders out there, we’re going to focus on four widely used ones: Squarespace, Wix, Weebly and Jimdo.
How to get your embed code from Walls.io
Before we can embed your social wall on any page of your website, we need to first get the embed code from your Walls.io settings.
First, go to your wall’s settings. To demonstrate, I’m using the Pokémen Go wall we’ve set up a while back.
Go to “Embed & Display”, where you’ll find your code snippet and various ways of changing how your embedded wall will look.
You can change width and height of your widget — of course, your widget can also be responsive. The Walls.io header is pre-set to hidden, but feel free to change that if you prefer. The same goes for the wall background. It’s pre-set to transparent to make your widget blend in with your website but you can always change this setting, for example if your wall background specifically matches the background of your website anyway.
The advanced settings give you access to a few more tweaks. For example, if you’re using the auto-height feature you can simply add a “load more” button. By clicking on that, users can see more posts than initially displayed on the embedded wall. When adding the load more button you’ll also get a chance to customise the text displayed on the button and to set how many posts are loaded with each click.
You can also override some of you wall’s defaults, in case you want your wall to look or behave differently for the embed without changing anything on your main Walls.io wall. You can override your wall’s theme, colour scheme, language and column layout.
As you change these settings, the preview underneath them will reflect that — and so will the code in the window to the right. You can learn more about these options in our help article on embedding a social wall on your website.
You can easily navigate to your wall’s settings by attaching “/settings” to your unique wall URL like this: https://walls.io/YOURURL/settings.
Squarespace works based on so-called blocks that you add to your pages. When editing the page you want your wall embedded on, hover over the horizontal line or click “Add Block” on the right-hand side of the screen. Scroll down in the window that has opened up until you find the button that says “</> Code”.
Select HTML in the drop-down on the right, paste your iFrame code in the text field and apply the changes to save. Your embed will show up right away.
Wix works based on so-called elements. In the menu on the left-hand side click the plus button to add an element. At the very bottom of the window, pick “more” and select “HTML code”.
Click on the newly created element and either click on the settings wheel or on the “enter code” field. Select “Code” and enter your snippet in the text field, then click “update”.
Wix also lets you do something else: You can embed your wall using your standard Walls.io URL or one of the modified URLs from your “Embed & Display” settings.
Instead of selecting “Code”, select “Website Address” and paste your wall’s URL. This won’t take into account the height/width and other modifications you can set when using the code snippet, but it definitely works just as well to embed your wall.
Weebly lets you drag and drop elements onto your pages. In the menu on the left-hand side of your screen, find the “Embed Code” field and drag and drop it onto your page.
Into the box that now appears on your page, paste your code snippet. There’s no save button — just click outside of the box to make your embed show up.
Jimdo’s blocks work similarly to Squarespace’s. Navigate to where you want to embed your wall, hover until the “Add Element” button shows up and click on it. Click on “More Elements and Add-ons” at the bottom and and find “Widget/HTML”.
Paste your code snippet into the code field and save your changes.
The Walls.io: Social Media Feed WordPress plugin helps you add a social media feed to your website with the click of a button. It’s that easy. No coding skills needed.
Make your website look relevant and up-to-date!
Download the Walls.io Social Media Feed plugin and add a live social wall on your website in minutes.
As you can see, embedding your social wall on your website is a fast and simple affair with most website builders. Of course, convenience and usability vary between each tool.
I, personally, found the process easiest and most practical using Wix. By letting me embed the Pokémon Go wall using just the wall’s URL, Wix made it even more user-friendly. A good option for those who’d rather not touch any code snippets at all. Even though you can’t mess anything up using code snippets this way, I understand that some people would rather not deal with them anyway.
Embedding a widget using website builders is the most basic level of embedding you can do with Walls.io. Of course, you can also embed your social hub on websites built with other means, whether you’re using WordPress or a hard-coded website.
We want to offer options for everyone. This is why, next to our easy-to-use widget, we also have an API, which opens up a whole world of options for developers. Walls.io really is the social wall for everyone — no matter their tech level.