How to Use the Walls.io JavaScript Embed

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

Walls.io JavaScript Main Widget Settings - Custom Width & Height

In the "Embed & Display", you’ll find the standard JavaScript 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 JavaScript embed. Any change here is automatically translated to the 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 customise the embed code for that website, just enter width and height and you’re good to go.

But keep in mind that setting the width and height manually 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 that your social wall embed will automatically extend to the full width of the containing HTML element, for example, a sidebar.

An Alternative to Ugly Scrollbars

If you want to get rid of ugly scrollbars as well, make sure you have the "Height" setting on "Auto".

With “Auto” height enabled, the Walls.io widget will automatically extend its height to fit all posts. No more scrollbars! 

Now, there’s only one last missing piece: loading older posts. What’s normally achieved by scrolling through an iframe, can be replaced with a simple “Load more” button, using a JavaScript function provided by our snippet.

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 to leave 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

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

Walls.io Iframe Main Widget Settings - Custom Width & Height

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 customise the embed code for that website, just enter width and height and you’re good to go.

But keep in mind that setting the width and height manually 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 Walls.io on WordPress or other website builders

To help you embed your social wall to WordPress faster we built a Walls.io WordPress plugin. Learn more about it and download it here.

If you’re using Squarespace, Wix or another website builder to create your website, check out our guide to embedding social media walls using a website builder.

Did this answer your question?