How to Embed a Social Wall on a Website

You can easily embed your Walls.io social wall on a website in only a few minutes. It's very easy, you just need to copy the code that we auto-generate for you. Depending on your website, you can use either the Iframe or JavaScript.

Use the auto-generated JavaScript embed code
Use the auto-generated Iframe embed code
How to embed a social wall using website builders
How to embed a social wall on the most popular event platforms

🔶How to Use the Walls.io JavaScript Embed

To embed your social wall using the auto-generated JavaScript code, follow the steps below:

Login to your walls.io account
Click on “Embed & Display” in the main navigation
Select JavaScript
Customize your widget and copy the code
Embed the code on your website

In the "Embed & Display", you’ll find the standard JavaScript code and a few settings to adjust the widget.

The default Width is set to "Responsive" and the height to "Auto". This means that your social wall embed will automatically extend to the full width of the containing HTML element, for example, a sidebar.

If your website follows a strict column layout with pre-defined dimensions, you can customize the area occupied by the social wall embed by selecting "Fixed" width and height. Any change here is automatically translated to the code on the right.

But keep in mind that manually setting the width and height only makes sense if you know exactly how large the widget should be when it’s displayed on your website.

If you want to get rid of the scrollbars as well, make sure you have the "Height" setting on "Auto". That will automatically extend its height to fit all posts. No more scrollbars.

If you would like to load older posts, select "Yes" for the “Load more” button before you copy the embed code.

Lazy loading for better page speed results

To minimize the impact of images, iframes, or scripts on the network traffic and loading time of the website our Walls.io JavaScript embeds have a lazy load feature that's turned on by default. We strongly recommend leaving this setting on, but if for some reason you want to switch it off, you can just switch the "lazy load wall" to "No" from Embed & Display > JavaScript > Advanced settings > Lazy load wall.

In case you're technically inclined, feel free to customize the "Lazy loading threshold" setting.

🔷 How to Use the Walls.io Iframe Embed

In order to use Walls.io as an <iframe> embed follow the steps below:

Login to your walls.io account
Click on “Embed & Display” in the main navigation
Select Iframe
Customize your widget and copy the code
Embed the code on your website

In the "Embed & Display", you’ll find the standard iframe code and a few settings to adjust the widget.

Fixed Width: Embedding the Widget with Pre-Defined Dimensions

By selecting "Fixed" width, you can manually set the width and height of your iframe embed. Any change here is automatically translated to the HTML code on the right.

If your website follows a strict column layout with pre-defined dimensions, you can customize the area occupied by the Walls.io widget. To customize the embed code for that website, just enter width and height and you’re good to go.

But keep in mind that manually setting the width and height only makes sense if you know exactly how large the widget should be when it’s displayed on your website.

Responsive Width: Embedding the Widget in Responsive Layouts

When you don’t have to adhere to strictly defined dimensions, you don’t have to bother setting a specific width and height for your social wall embed. 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.

📃 How to embed social walls using website builders

We created separate guides for how to embed a social wall on your website if you're using some of the most popular website builders.

If you don't see your website builder in this list, don't worry. You can embed your social wall anywhere by using either JavaScript or the Iframe option described above.

We also published a video tutorial covering even more website builders

🎈 How to embed social walls on event platforms

Your social wall will work great on all event platforms. To help you integrate your social wall easier, we created a few guides for the most popular ones that we also partner with. If you're missing a guide, just drop us a line in the chat.

In case you have further questions, don't hesitate to contact the support team via chat or support@walls.io!