How to add Social Media Feed to your WordPress Website?

How to add Social Media Feed to your WordPress Website?

You might already have the great social media icons displaying somewhere on your website, linking back to your feeds etc. WordPress and social media like Facebook or Twitter give you the option of displaying your feed on the website. Why not use the feature? This can help to build engagement on the website.

Moreover, you may gain more follows/likes on your social media from your readers/clients. Displaying feed like Facebook allows keeping the website visitors up to date. They will see current activities of the business, or Instagram feed for the creative industry.

There are few ways in which the Social Media Feeds can be embedded into your WordPress website. From additional plugins to websites that provide such services or the original Social Media themselves, they all equally give the options to add the feed onto the website.

Let’s see a few ways on how to add Social Media (examples based on Facebook, Twitter and Instagram).

First, heads over to your WordPress backend (the WordPress dashboard/editor). Then select the place where you want your feed to display. For this article, I will be using an example website I build for training.

I have selected the About us page as a page for the social media feed, to make the page more exciting and engaging.back end page block editor

You can add your page/profile as a link on your website but that as you can see underneath, it does not look eye-pleasing, and will take people away from your website.front page showing link to social media feed

Smash Ballon plugin

custom Facebook social media feed interface

Many companies and users recommend the use of SmashBallon plugin for the Social Media Feed. It is free to use, but if you want additional flexibility for layout or customisation you’ll therefore need to get the paid version. I gave this plugin a chance. It is easy to use and navigate as well as offers clear instructions on how to install the plugin an display the social feed.

As I wanted to try having three of my primary social media on the website, I tested the Facebook Feed, Instagram Feed and Twitter Feed. The results were good, but I was looking for something else. The free option of the plugin did not allow me to customise it this way.


Facebook for developers feed

Facebook for Developers website

Head over to Facebook for Developers then to Doc and Social Media Plugins. You will find the Facebook feed there, where you paste the Facebook page URL. The interface below shows how it works.Social Media Feed from Facebook for developers interface

After that, you will be able to make some small changes to your social media feed; Facebook for developers gives you a list of code which allows you to change the look of the feed. The feed is embedded into the website in the form of a media feed code from Facebook for Developers

I used the block builder on my website and divided the row into three columns, to place all feeds in one line. You paste the HTML that’s provided by Facebook developers. Then you paste it to your page, and your Facebook feed is on.

Block editor with html shown

Instagram Feed

As for Instagram, I had to use a different website which I found many people using. It is called elfsight and allows you to install a social feed of your choice to one website for free. If you want more social feeds or to use it on more than one website, then you will have to media feed from elfsight

The website allows you to customise the look fo your social media feed. This included things like dark mode or custom background colour/picture as well as the view of the load more button. It is flexible; the layout for this website that suited perfectly was two columns and eight images down. When you are done editing the design and layout of your feed, then you will be handled an HTML code again and will need to follow the steps as with the Facebook Feed.

Twitter Feed

Twitter Publish Interface

Additionally, Twitter has its website equally like Facebook to help you embed the feed on your website. Aside from that, you can select an option to embed a single post. You paste the link t whatever you want to embed, and Twitter Publish takes you to the display/layout options with some flexible customisation options too. Then you copy the code and paste it as a custom HTML on the page you want it to show.








Here is my final look,

Final view of social media feeds

I do think that as for a beginner, it was relatively easy and fun to explore and see how some things work. I like the look of my social media feed. If you need any help or support, feel free to contact us! Either on social media or send us an email!

You might also enjoy