No Coding Skills Needed — How to Embed Your Social Media Wall on Your Website Using Website Builders

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.

With Walls.io, embedding your social hub is super easy, no matter your tech skills. For example, you may want to embed your social media wall on your website built with Squarespace or Wix. We’ll show you how it’s done using four of the main website builders currently available.

Screenshot of HUAWEI Germany’s social media wall for the #ShowWhatYouLove campaign, embedded on the website.
Walls.io customer HUAWEI Germany shows off the social wall for the brand’s #ShowWhatYouLove hashtag campaign.
Screenshot of easyGym’s social media wall embedded on the easyGym website.
Walls.io customer easyGym collects social media posts on a social wall embedded on the website.

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.

Change the parameters of your Walls.io widget in the embed and display section of your Walls.io account settings.

Go to “Embed & Display”, where you’ll find your code snippet and various ways of changing how your embedded wall will look.

Change the way your widget looks and behaves and immediately see the changes reflected in the preview.

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.

Override certain features of your social wall with the advanced settings for your embed code

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 blog post on embedding a social wall on your website.

When you’re happy with the way your widget looks, grab the code by copying the snippet from the window to the right. You can chose between iFrame and JavaScript snippets. JavaScript behaves a bit differently and we don’t need it right now, so copy the iFrame code.

Walls.io Tip
You can easily navigate to your wall’s settings by attaching “/settings” to your unique wall URL like this: https://walls.io/YOURURL/settings.

How to embed your social wall using Squarespace

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”.

Add a code blog to your Squarespace page

Select HTML in the dropdown on the right, paste your iFrame code in the text field and apply the changes to save. Your embed will show up right away.

Copy your code snippet from Walls.io into your Squarespace code block.

How to embed your social wall using Wix

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”.

Add an HTML code element to your Wix page.

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.

You can also embed your Walls.io social wall on your Wix website by selecting “Website Address” instead of “Code” and pasting your Walls.io URL (or modified Walls.io URL) in the text field.

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.

How to embed your social wall using Weebly

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.

To embed your social wall on your Weebly-run website, simply drag the code element 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.

Paste your Walls.io embed snippet into the Weebly text field

How to embed your social wall using Jimdo

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”.

In Jimdo, add a Widget/HTML element to your page.

Paste your code snippet into the code field and save your changes.

Copy and paste your iFrame code snippet from Walls.io into the code field in Jimdo and save your changes.

Embedding your social hub on your website is easy

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.

Walls.io Tip
The embed feature is included in our Pro and Premium plans. But even with a free Walls.io account, you’ll get a week to try our pro and premium features and see how you like your social wall embedded on your website. Sign up now!