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.
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 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.
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.
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 layout, 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.
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.
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.
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.
Hit the Save button on the top right and watch as your social wall populates the page.
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.
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.
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.
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.
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.
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.
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.
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.
Paste your code snippet into the code field, save your changes, and your social wall will appear in the block.
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.
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.
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.
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.
Once you’ve added your social wall you can change some parameters in the block settings on the right.
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.
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
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