How to link social media with a website in Webnode?

Social Feed widget – free VS premium

The Social Feed widget that we describe in this tutorial is for free. The external service Elfsight offers in its free version (LITE) the possibility to create 1 widget for free.

If you need another widget, it is necessary to purchase one of the Premium tariffs offered by this service.

The price starts at 10 USD / month.

Social Feed widget – templates

The Elfsight external service allows you to choose a template for the Social Feed widget, thereby speeding up the whole process. You can currently choose from up to 20 templates, for example:

• • • Social Feed – Carousel
    • Social Feed – Masonry
    • Social Feed – Masonry Dark
    • Social Feed – Timeline
    • Social Feed – Grid
    • Social Feed – Masonry Colored
    • Social Feed – YouTube Feed
    • Social Feed – Vimeo Feed
    • Social Feed – Slider
    • …

How to link social media with a website?

1. Go to Elfsight official website https://elfsight.com/, open Widgets and choose Social Feed.

2. Choose one of the 20 available templates (you can see a preview on the right side) and click the Continue with this template button.

*For the purposes of this guide, we have selected the “Carousel” template

3. Click the Add Source button and choose the type of social network you want to add.

4. Log in to the social network and click the “Connect to XXX” button, in our case Connect to Facebook.

5. Customize the widget that will display the content of your social networks on the web according to your own ideas. Under the Layout section, you can change the layout of the posts/whole widget. Under the Post section, you can choose the layout/display of a single post.

After the user clicks on the widget, Elfsight offers you a choice of three options. You can find them in the Post – Action on Post Click section.

• None – nothing happens when user clicks on the widget
• Open in Popup – the widget opens directly on the page and the user can view it
• Open in Social Media – the widget will open directly in the given social network

The Appearance section allows you to change the colors, background or font.

You can easily change the language of the entire widget (see the image below) under the Settings – Language section.

6.We currently have 1 widget that shows us content from Facebook. To add content from another social network to the same widget, open the Sources section and click Add Source.

Choose the type of social network you want to add and connect to the social network via Connect to XXX, in our case Connect to Instagram.

The resulting effect can also look like this.

7. If you are done with the customization and setup, click on Add to website for free.

The service will ask you to log in. You can use your existing Google or Facebook account or log in with your email.

8. Click the Publish button in the upper right corner and copy the necessary HTML code using Copy Code.

9. Log into the Webnode editor and enter the code according to the services you have purchased in Webnode:

10. Done – after inserting the code, just publish the changes with the Publish button in the top bar. You will see the Social Feed widget in the published version of your website.

Social Feed widget – preview

A few words at the end

In today`s digital era is linking social media with websites big positive for entrepreneurs and users.

The Social Feed widget from Elfsight offers an efficient and simple solution for sharing content from various social networks. The option to choose a template, customization and integration are very useful.

The free version of the widget will be enough for many users, but for those who need more, there are also premium tarrifs with extended options.

With our guide, the process of connecting social networks to the web in Webnode is quick and easy. Don’t hesitate and try it now.

Social Feed widget – FAQ

How do I remove a social network from a widget?

If your Social Feed widget displays content from several social networks and you wish to delete one of them, open the Sources section, click on the three dots and select Delete.

How do I change the widget text, such as “Read more” or “Published date”?

If you want to change the text such as “Read more” or “Published date”, you can do so in the Settings – Language section.

Keep in mind that not every language allows changing all texts.

Do I need technical knowledge to add an Elfsight widget to my website?

No, you don’t need technical knowledge at all. Read this tutorial and you’ll definitely be able to do it! Fingers crossed!

Do I have to enter a payment card number?

No – the Elfsight service does not require a payment card to be filled in when using the Free (LITE) version.

How can I add a widget title?

You can easily add the widget title in the Layout – Header section.

More awesome tutorials