Walls.io-Logo
Walls.io-Logo
Walls.io-Logo

How to Embed a Social Media Wall on Your Website

Learn How to Embed a Social Media Wall on Any Website in a Few Easy Steps

Loading Logo
Laptop opened to a website that has an embedded social wall

Embed a social media wall on your website to always keep it updated with new content. Set it up as a brand hub showing all your social media updates. Fill it with user-generated content from happy customers, which will convince website visitors to buy. Or embed a social media wall to incorporate your latest hashtag campaign into your website.

Embed a social wall with a JavaScript or iframe code

With Walls.io, embedding your social media wall on your website is super easy, no matter your tech skills. You simply copy and paste the JavaScript or iFrame code generated on your Walls.io dashboard to embed your social wall anywhere on your website.

But first, create your free Walls.io account and set up your first social media wall. If you want some step-by-step help for that, we have a great quick start guide that walks you through setting up your first Walls.io account and social wall.

Once you’re all set up, it’s time to embed your wall. Simply navigate to the Embed & Display section of your Walls.io dashboard and change your parameters as needed.

Screenshot of the Embed & Display section of the Walls.io dashboard with the parameter changing options highlighted.

You can change the width and height of your widget and set it to responsive. The wall header is pre-set to be 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 you’ve taken steps to make sure your wall background specifically matches the background of your website.

The advanced settings give you access to a few more tweaks. Hit the Show advanced settings toggle to make your changes.

Screenshot of the Embed & Display section of the Walls.io dashboard with the advanced settings highlighted.

For example, if you’ve decided earlier to use the auto-height feature, you can now add a Load more button into your social wall. 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 your wall’s default settings in case you want the embedded wall to look or behave differently without changing anything on your main Walls.io wall. You can override your wall’s theme, colour scheme, language and column layout.

If you‘ve already added content to your wall, you will see your wall change in a preview underneath the settings. And the code in the window to the right will change as well. When you’re happy with all your settings, simply copy the JavaScript or iframe code, which you then paste wherever you need it on your website.

Screenshot of the Embed & Display section of the Walls.io dashboard with the JavaScript code highlighted.

JavaScript is generally the preferred method as it gives you more features. But iframe is a great option, especially as not all website builders or apps will let you use JavaScript.

You can learn more about all your embedding options in our help article on embedding a social wall on your website.

Get your free social wall

Embed a social media wall using various website builders

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.

No matter which website builder you are using, you start out the same way by grabbing your embed code from the Walls.io settings, just like we did above.

How to embed your social media wall using Shopify

Navigate to your home page and scroll down to Custom content. Click on Add block and select Custom HTML. Open the block, grab the JavaScript code from your Walls.io dashboard and paste it into the block.

Screenshot showing how to add a custom content block to a website created with Shopify.

Hit the Save button on the top right and watch as your social wall populates the page.

Screenshot showing the same page created with Shopify with the iframe code added in an HTML section on the left and the social wall full of dog pics embedded in the page preview.

How to embed your social media 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 and click on the plus sign. In the Basic section, click the Embed button.

Screenshot showing how to find the Embed block.

In the box that pops up, you can enter an URL, but instead, you’re going to click on the little </> sign right next to the URL field. This will open a bigger field where you can paste your iframe code, and your wall will get embedded. Now all you have to do is hit the save button.

Screenshot showing a social wall full of dog pics embedded on a page in the Squarespace page builder. On the right, we see the box where the embed code is injected.

How to embed your social media 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. Scroll down to Embed, select Custom Embeds in the submenu and click the plus button next to Embed a Widget to add it to your page. 

Screenshot of the Wix backend that shows how to find the Embed a Widget element to add to the page.

Click on the newly created element, which is really just a small grey box right now, and click on the Enter Code field. Select Code. Then grab your iframe code (Wix doesn’t allow javascript embeds) from the Walls.io dashboard and paste it into the text field in Wix. Click Update. Your social wall will populate in the box, which you can make bigger by clicking and dragging.

Screenshot showing how to add the embed code to a Wix page. The social wall with dog pics is already populated on the page.

Here’s a really neat thing, though. Wix also lets you embed your social wall using your standard Walls.io URL or a modified URL. The method for getting your embed field is the same, only instead of Code you select Website Address and enter your Walls.io URL.

Another screenshot showing how to embed a social wall on a Wix page, this time using the Walls.io URL instead of the embed code. The social wall with dog pics is already populated on the page.

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

Click into the box that now appears on your page, then click on Edit Custom HTML and paste your JavaScript code snippet. There’s no save button — just click outside of the box to make your embed show up.

Screenshot showing how to embed a social wall with cute dog pics using Weebly.

How to embed your social media wall using Jimdo

Jimdo’s blocks work similarly to Squarespace’s. If you use the “editor for coding experts” (don’t worry, I don’t find you have to be an expert to use it), navigate to where you want to embed your wall on your page. Hover over the horizontal line and click the Add Element button that shows up. Click on More Elements and Add-ons at the bottom and find Widget/HTML.

Screenshow showing how to find the Widget/HTML element and add it to a page.

Paste your code snippet into the code field, save your changes, and your social wall will appear in the block.

Screenshot of a Jimdo page with the social wall of cute dogs embedded.

How to embed your social media wall using Webflow

To embed a social wall on your Webflow site, find the place you want to put it, then hit the plus button and scroll down until you get to Components. Pick the Embed component and drag it to the right spot on your page.

Screenshot showing how to find the embed element in the Webflow page builder.

When Webflow asks for the code, simply paste your JavaScript snippet and save your changes. Just keep in mind that Webflow doesn’t render JavaScript in the editor, so you’ll have to publish your page first to see the embed. If you use the iframe code, it’ll show up in the editor immediately.

Screenshot showing a page on Webflow with an embedded social wall of cute dog pics. On the right hand side, you can see the embed code added to the HTML Embed Code Editor.

How to embed a social media wall using WordPress

Since we have a lot of WordPress users, we published the Walls.io: Social Media Feed Plugin, which allows you to add a social hub to your WordPress website with the click of a button.

First, you have to download our plugin and install it for your WordPress site. Then, head to wherever you want to embed the social media wall (a post or a page). In your page editor, click on the Add Block button (there’s a small plus sign) on the right, start typing Walls.io into the search bar and select the item.

Screenshot of a page in the WordPress backend that shows how to add a Walls.io social wall to a content block.

Add your wall name (my.walls.io/yourwallname in your browser’s address bar), click Embed, and voilá, your social media wall is embedded in your post or page.

Screenshot of a page in the WordPress backend that shows where to add the social wall name to the plugin to embed the wall on the page.

Once you’ve added your social wall you can change some parameters in the block settings on the right.

Screenshot of a page in the WordPress backend, which already has had a social wall full of dog pics added to it. On the right, a panel allows for changes to some of the parameters of the social wall.

While the Walls.io WordPress plugin works great with any WordPress page builder, you can also embed your social wall using the iframe code just like you would on any website. This works well in some of the most popular WordPress page builders, such as Elementor or BeaverBuilder.

Make your website look relevant and up-to-date!

Download the Walls.io Social Media Feed plugin and add a live social wall to your WordPress website in minutes.

DOWNLOAD THE PLUGIN

Next-level embedding: use our social wall API

Embedding a widget using website builders and simply copying and pasting our code snippets is the most basic level of embedding you can do with Walls.io.

But we want to offer options for everyone. This is why, next to our easy-to-use widget, we also have a social wall 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.

Keep your website fresh with a social media wall

Create a social media wall

Related blog posts:

Social Media Feed on Website Examples
5 Reasons to Embed a Social Media Feed on Your Website
How to Embed a Social Media Wall on Virtual Event Platforms