How to Add Social Media Feeds to Your WordPress Site (Easy Guide)
Home Blog How to Add Social Media Feeds to Your WordPress Site (Easy Guide)

How to Add Social Media Feeds to Your WordPress Site (Easy Guide)

How to Add Social Media Feeds to Your WordPress Site

Do you want to add social media feeds to your WordPress?

Displaying social media content on your website helps you grow your social media followers and update your website with relevant and engaging content.

In this article, we show you how to add social media feeds to your WordPress site.

Since this article is packed full of guides for adding more than one type of social media feed to WordPress, here is a table of contents to help you navigate:

Before we dive into how to add your feeds to WordPress, let’s look at why it can help your business.

Or, you can click here to skip ahead to the tutorial on how to add combined social media feeds to your website.

Why Add Social Feeds to WordPress?

With millions of people using them daily, social media platforms are perfect for connecting with your target audience.

But why limit that to your social channels?

Social media feeds allow you to show your social content to all your site visitors. So, they get a broader understanding of your business and how you can help them.

adding instagram feed on divi website

By integrating social media platforms into WordPress, you can delight website visitors with your social media content, boost your followers, and secure more potential customers.

But that’s not all.

Here are a few more benefits of displaying social media feeds on your website:

  • Instead of adding easy-to-miss social icons, you’re boosting your brand awareness with social feeds that contain your real-time updates and social media posts.
  • You can display all your feeds in a single place, so visitors can see which social media posts you publish on each platform — right on your website.
  • With social media feeds on your website, it’s easier to display user-generated content (UGC) to improve your reputation and grow your sales.
  • It also encourages users to submit their own UGC using relevant hashtags and gets you more interactions on social media.
recreated my fabletics feed
  • Social media feeds are the ideal way to display social proof for your brand, like reviews and testimonials. This creates social trust, making your customers loyal to your business.
  • Embed social media posts to your WordPress website and boosts your SEO — with the help of the right plugin to improve your search rankings for you.

Now you know why adding social media feeds to your small business site is important, let’s move on to how to do it.

How Can I Add a Social Media Feed to My Website?

The best way to add a social media feed to your website is to use a WordPress plugin.

The best social media plugins in WordPress lets you add more features and functionality to your website, even if you’re not comfortable with codes like HTML or CSS.

All you have to do is install the plugin, activate it, and let it do the hard work for you.

Now, you might be wondering, “What is the best social media plugin for WordPress?”.

Since there are so many to choose from, it can be pretty scary finding one with all the features you need for your site.

To add social media feeds to your site, you can just use the best WordPress social feed plugin collection, Smash Balloon.

smash balloon home page

Smash Balloon is also a safe plugin to use on your site, so you’re guaranteed that your website security is still protected with this social media feed tool.

Trusted by over 1.6 million active users, and with an average rating of 4.9 stars out of 5, they’re the best social media feed plugins for WordPress.

brands trusted by smash balloon

And the best part? All of the plugins are designed to be ultra-fast so they won’t slow down your website at all. And that means your site can get better SEO and rank higher in search engine results.

The 2 key goals of Smash Balloon are to:

  1. Create and maintain the most user-friendly, beautiful, and impressive social media plugins your website has ever seen.
  2. Provide the quickest, friendliest, and most mind-blowingly amazing product support you have ever experienced.

So today, we’re using each of Smash Balloons plugins to add WordPress social media feeds of popular social networks like Facebook, Instagram, Twitter, and YouTube — step-by-step.

Let’s kick things off by looking at how to add a Facebook feed to WordPress below.

Adding Facebook Feeds to Your WordPress Site

To add a Facebook feed to your WordPress website, first, get your copy of the Custom Facebook Feed Pro plugin here.

Then, upload and activate the plugin in WordPress. You can learn how to install a WordPress plugin in this step-by-step tutorial.

Once the Custom Facebook Feed Pro plugin is installed and activated on your website, head to Facebook Feed » All Feeds from your dashboard.

On that new page, click on the Add New button at the top.

add new feed with custom facebook feed pro

After that, you can choose from 9 different feed types for your new feed. You can pick from a timeline feed, photos feed, events feed, and much more.

types of facebook feed

Once you’ve picked the Facebook feed type that you want, click on Next. 

In this tutorial, we’ll go ahead and pick the timeline feed.

select facebook feed type

And you’ve just created your new feed. The next step from here is to connect the feed to the social media network.

Connecting Your Facebook Account

Now, we’ll show you how to link social media to WordPress websites using this plugin.

First, you can add a source for your new Facebook feed. To do that, click on the Add New button.

add new source for facebook feed

The plugin will now show you a popup where you can pick whether to add a Facebook page or a group.

After you pick your preferred option, click on Connect to proceed.

pick between group or page for facebook feed

Doing that will send you to Facebook. You can then give read-only access to the plugin so that it can show your Facebook feeds.

Since the access is read-only, the plugin can only read the data and can’t actually change anything.

To proceed, you can select the pages or groups that you want to show on your feeds. Once you’ve selected them, click on Next.

select the facebook pages

Finally, click on Done to give the read-only access.

allow read only access to facebook

After that, you’ll be back on your WordPress site. Now select the page or group you want for your feed and then click on Add.

add new source confirmation

After that, just click on Next to finish things here.

pick your source for custom facebook feed pro

With that, you’ve connected the new feed to Facebook. You can now move on and start customizing the feed.

Customizing Your Facebook Feed

After you’ve connected your feed to Facebook, you can now see it open in the live feed editor.

custom facebook feed pro live editor

Here, you can see all the customization options on the left side of the screen. And on the right, you can see a live preview of your feed.

To get started with the customization, go ahead and pick the Feed Layout option.

select the facebook feed layout

With this plugin, you have 4 different layout options: List, Grid, Masonry, and Carousel.

different layout options for custom facebook feed pro

You can use the list layout if you simply want to show one Facebook post after another. Plus, it also makes sure that the posts are large and clearly visible.

list layout for facebook feed

Next, you have the grid option, which shows your Facebook posts in rows and columns. You can show lots of posts at once this way.

grid layout for your facebook feed

With the masonry layout, you can show your Facebook posts in different columns. And it also keeps their original proportions.

masonry feed layout for facebook

If you want to show your posts in a slider instead, you can pick the Facebook carousel layout.

carousel feed layout for facebook group feed

After you’ve picked your layout from these options, click on the Save button on the top right.

You can then go back to customizing your Facebook feed by clicking on the Customize button.

go back to facebook customization options

Here, you can select the Color Scheme option and pick the colors for your new Facebook feed.

select color scheme for facebook feed

You have 4 different color schemes to pick from:

  • Inherit From Theme: Copy the colors of your website.
  • Light: Use a light scheme with white background and dark fonts.
  • Dark: Show a dark background with lighter fonts.
  • Custom: Manually pick the colors for your feed.

After you pick your color scheme, just click on the Save button.

custom facebook feed pro color schemes

And then, you can start customizing the other parts of your feed with the live feed editor. You can change the header style, margins, post elements, and much more here.

After you’re finished with the customization, click on the Save button.

Embedding Your Facebook Feed

Now that you’ve finished customizing your Facebook feed, you can go ahead and post it on your site.

For that, first click on the Embed button on the top right of the live feed editor.

click on embed button custom facebook feed pro

Once you do that, you’ll see a new popup where you can pick the location for your Facebook feed. You can either embed the feed on a page or show it on the sidebar as a Facebook widget.

To proceed, you can click on the Add to a Page button. But if you want to show the feed as a widget, click on the Add to a Widget button.

We’re going to embed it on a page for this tutorial.

add facebook feed to page

After that, you can see a list of your pages on the popup. All you have to do is select the page where you want your Facebook feed and then click on Add.

select page for facebook feed

Doing this will open that page so that you can embed your feed.

To do that, click on the small plus icon (+) at the top and select the Custom Facebook Feed widget.

add facebook custom feed block

Now, you can just click on the Publish button to finish adding your feed.

And there you go! You’ve now embedded your Facebook social media feed on your WordPress website.

Now open your website and see how your feed looks to your visitors.

how to add social media feed to wordpress facebook

Now that you know how to add a Facebook feed to WordPress, it’s time to learn how to do the same for Instagram.

Adding an Instagram Feed to WordPress

Adding an Instagram feed to WordPress follows a similar process to the one for Facebook, and it’s the ideal way to increase Instagram followers.

First, get the Instagram Feed Pro plugin from Smash Balloon here.

After that, install and activate the plugin using these step-by-step instructions.

Next, you can go to Instagram Feed » All Feeds from your WordPress dashboard to start creating your new feed.

Look for the Add New button here and then click on it.

create new instagram feed

With this plugin, you get 3 options for your Instagram feed type:

  • User Timeline: Show the latest posts from your Instagram profie
  • Public Hashtag: Display Instagram posts that have specific hashtags
  • Tagged Posts: Embed posts that have tagged your Instagram account

If you want too combine different feed types, you can select multiple options here.

To go ahead and create your feed, you click on Next.

For our tutorial, we’ll use the user timeline option.

choose Instagram feed type

You’ve just created a new Instagram feed for your website. Now it’s time to connect the feed to your Instagram account in the next step.

Connecting Your Instagram Account

After creating your new Instagram feed, you can connect it to your Instagram account here.

First, click on the Add Source button on the new page.

add source instagram feed

After that, you can choose from a personal account or a business account for your Instagram feed.

Using a personal account, you get all the usual features from Instagram. And for your Instagram feeds, you can only show posts from your own profile.

The other option is a business Instagram account, that comes with extra features like analytics and contact button.

Plus, you get more options for your Instagram feed, such as shoppable feed, IGTV video feed, hashtag feed, and more.

After you pick your Instagram account type, click on Login with Instagram.

connect instagram account

To show Instagram content on your site, you can give the plugin read-only access to your Instagram account. Smash Balloon will use this access to view your info and can’t make any changes.

As a result, Smash Balloon is completely safe.

On the popup, click on Allow to give the read-only access.

allow access to instagram

Once you do that, the plugin will bring you back to your website. There, click on Next to use your Instagram account as a source for this feed.

select source for instagram feed

After creating a new feed and connecting it to Instagram, it’s time to customize its design.

Customizing Your Instagram Feed

You can now see your Instagram feed open in the live feed editor.

instagram live feed editor

On the left side of the screen, you can see all the customization options for your Instagram feed. You can use them to change your feed layout, background, color scheme, header style, button design, and much more.

The right side of the screen has a live preview of your new Instagram feed. Using this preview, you can check how your feed looks after you customize it.

To start customizing your Instagram feed, click on the Feed Layout option on the left.

select the feed layout option instagram

The plugin will then give you 4 feed layout options that you can pick from: Grid, Carousel, Masonry, and Highlight.

layout options instagram feed pro

Want a clean way to show Instagram posts on your site? You can choose the Grid layout which shows your posts in simple squares.

branded hashtag instagram

You can go for the Carousel layout instead and show a beautiful Instagram slider on your website. As a result, you can show lots of Instagram posts in an engaging way.

carousel layout for your instagram feeds

Next, there’s the Masonry layout which keeps the original proportions of your Instagram photos and videos. That way, you can show Instagram content in their full size.

masonry feed layout for instagram

If you want to make specific posts highly visible, then you can pick the Highlight layout. It’s a great way to put the focus on certain photos or videos from Instagram.

highlights layout

After picking your Instagram feed layout, click on the Save Changes button.

To proceed, use the small Customize button to return to the main customization options.

customize button instagram

To continue editing the design of your Instagram feed, click on the Color Scheme option.

select the color scheme option instagram

Here, you can set the colors for your Instagram feed and pick from 4 different color schemes:

  • Inherit from Theme: Use your website’s colors for your Instagram feed
  • Light: Use a bright background for your feed along with a darker font
  • Dark: Choose a darker background and a bright color for the font
  • Custom: Manually choose all the colors of your feed
color options instagram

After you’re done customizing your Instagram feed’s colors, click on Save.

Just like that, you can use the live feed editor to change your post layout, header style, feed size, button design, and much more.

Finally, click on Save once you’re happy with the design of your Instagram feed.

You can now go ahead and embed your new Instagram feed on your website.

Embedding Your Instagram Feed

Using the live feed editor, you can easily embed your Instagram feed. First, find the Embed button in the top right corner and then click on it.

embed button instagram feed pro

The plugin will then ask you where you want to display your Instagram feed. On the popup, click on the Add to a Page button.

add instagram feed to a wordpress page

You can also click on Add to a Widget if you want to embed your Instagram feed on your sidebar or footer areas.

For this tutorial, we’ll use a WordPress page to embed the Instagram feed.

add instagram feed to a wordpress widget

After that, use the popup to select the page where you want your Instagram feed and then click on Add.

add instagram feed to a page easy

The plugin will now open that page in the WordPress editor. On the editor, add a new block by clicking on the small plus (+) icon.

add new gutenberg block

Now look for “Instagram” using the search bar and then select the Instagram Feed block from the search results.

embed instagram feed block

Now click on the Publish button and your visitors can see your Instagram feed on your website.

As you can see, it’s super easy to embed your Instagram feed using this plugin. Just open your site and you can see how it looks.

example of elementor instagram feed

We’ve put together a detailed guide on how to embed your Instagram feed on WordPress here, which we’re sure you’ll find super-helpful.

You can also use the free version of Instagram Feed Pro here, but it’s limited to showing Instagram feeds from your own account only. If you want to add Instagram feeds from different sources, it’s better to get the premium version instead.

You’ve got Facebook and Instagram feeds nailed. But what about Twitter? Let’s look at that next.

Adding a Twitter Social Media Feed to WordPress

To add your Twitter feed to WordPress, begin by getting your copy of Custom Twitter Feeds Pro from Smash Balloon here. Then use the instructions linked earlier in this tutorial to install and activate the plugin.

Next, head to the Twitter Feed » All Feeds menu and click on the Add New button at the top.

add new custom twitter feed

You can now choose the type of Twitter feed that you want to show on your website. With Twitter Feed Pro, you get 6 options to choose from:

  • User Timeline: A feed of posts from your main Twitter timeline
  • Hashtags: Show posts from specific hashtags
  • Home Timeline: Display tweets from both yourself and those you follow
  • Search: Perform a Twitter search and display the results in a feed
  • Mentions: Show a feed of tweets that you’re mentioned in
  • Lists: Display curated Twitter lists on your feed by entering the list IDs

To continue, choose your feed type and then click on Next.

For our example, we’ll go with a user timeline.

select feed type twitterr

Next, you can connect your Twitter account and add a source for your Twitter feed.

Click on the Connect button on the popup to get started.

connect twitter account to wordpress

Afterwards, the plugin will open Twitter so you can give read-only access and connect your account.

For that, click on the Authorize app button on the page.

authorize twitter read only access.jpg

Next, you can choose a source for your Twitter feed. Depending on your feed type, you can enter a Twitter handle, search term, hashtag, and more.

For our example, we’ve added the “@starbucks” Twitter handle to show a feed of posts made by Starbucks.

Once you add the source, click on the Next button.

add user timeline

Now let’s find out how you can easily customize your Twitter feed using this plugin.

Customizing Your Twitter Feed

After connecting a source, you can pick a feed template to use for your Twitter feed. With these pre-built templates, you can instantly change how your feed looks.

You get 7 Twitter feed templates that you can choose from:

  • Default
  • Masonry Cards
  • Simple Carousel
  • Simple Cards
  • Showcase Carousel
  • Latest Tweet
  • Widget

Once you pick your feed template, click on Next to proceed.

choose a feed template

Now, you can use the live feed editor to customize how your Twitter feed looks.

On the left, you can find the customization options to set your feed layout, color scheme, header, tweet box style, and much more.

live feed editor twitter

On the right, you can find a live preview of your feed and track your changes in real-time.

To customize your Twitter feed, click on the Feed Layout option on the left.

feed layout option twitter

You can now set the layout of your Twitter feed by picking from 3 options:

  • List
  • Masonry
  • Carousel
pick a feed layout twitter

With the list layout, your tweets will appear in a single full-width column. The content in your Twitter feeds will then be more clearly visible.

list twitter feed layout

Next, you have the masonry layout which will show a feed of tweets in multiple columns with no space between each post.

With this layout, you can show tons of tweets at once.

example masonry twitter feed wordpress

Finally, you can pick the carousel layout to embed a slideshow carousel of tweets with settings to customize the number of columns, loop type, navigation arrows, and more.

twitter carousel layout

When you’ve chosen a layout, click on the Save button to confirm your changes.

Next, click on the small Customize button at the top to continue editing the design of your Twitter feed.

back to customization options twitter

To start changing the colors of your feed, click on the Color Scheme option on the left.

color scheme option twitter feed pro

You can easily change your colors by choosing from 4 different color schemes:

  • Inherit from Theme: Use the colors of your website
  • Light: Show a light background along with a dark font color
  • Dark: Use a dark background and light font color
  • Custom: Manually choose all the colors for your feed
choose color scheme twitter

Click on the Save button at the top to confirm your color scheme.

As you can see, the live feed editor makes it super easy to customize your Twitter feed. You can easily change your header design, lightbox options, feed size, tweet box style, buttons, and much more.

Once you’re happy with the design, click on Save before moving on to embedding your Twitter feed.

Embedding Your Twitter Feed

Just like Facebook and Instagram, you can embed your Twitter feed into any page or widget-ready area of your WordPress site.

First, click on the Embed button in the top right corner.

embed yout twitter feed

After you do that, you can pick the location of your Twitter feed. To embed it on your WordPress page, click on the Add to a Page button.

add to a page

You can also embed it on your sidebar or footer by clicking on Add to a Widget instead.

For this example, we’ll use a WordPress page.

add twitter feed to widget

On the popup, you can see a list of the pages on your site. To continue, just select your WordPress page from the list and then click on Add.

add twitter feed to a new page

This will open the page in the WordPress editor. Here, click the plus (+) icon to add a new WordPress content block.

add a content block

In the search box provided, type “twitter feed” to find the Twitter Feed block and click it to embed it on your site.

embed twitter feed on your wordpress site

You’ll then see a preview of your feed, which you can check before publishing. Once you’ve published your post, it will look similar to the example below:

example twitter feed on website

For more details on how to embed a Twitter feed in WordPress, see this tutorial.

But what if Facebook, Instagram, or Twitter doesn’t have your target audience, while YouTube is thriving with users perfect for your business?

There’s a great YouTube feed plugin which we’ll show you how to use next.

Adding a YouTube Feed to Your WordPress Site

To start adding a YouTube feed to WordPress so visitors can enjoy your video content, get a copy of the Feeds for YouTube Pro plugin. Then proceed to install and activate it on your WordPress site.

From there, head to Feeds for YouTube » Settings, and link your YouTube account by clicking the big blue button to connect.

YouTube Feeds Settings

For several features to work correctly, you’ll also need to add the API key to your account, which you can learn how to set up in our guide to creating and using YouTube API keys here.

Just follow the popup instructions to successfully connect your YouTube account to the plugin.

Once you’ve linked your YouTube account, choose which default feed you want to show on your website. You can choose from the following options:

YouTube Feed types
  • Channel: Display all posts from the selected YouTube channel.
  • Playlist: Show a specific YouTube playlist feed on your website.
  • Favorites: Display a feed of videos from your favorites list.
  • Search: Perform a custom search and have the results added to a custom YouTube feed on WordPress.
  • Live Stream: Display a feed of your current and future live streams on your site.
  • Single Videos: Show multiple, single videos in your feed based on the video ID.

Customizing Your YouTube Feed

First, click the Customize tab at the top of the settings page, and start by setting the width, height, and background color of your feed.

Then, move on to the Layout section to choose how your feeds look on your site. The feeds for YouTube plugin offers several ways to style your YouTube feed, including:

YouTube feed layout types
  • Grid: Video thumbnails shown in a uniform grid with videos opening in a lightbox when clicked.
  • Gallery: One big video that plays when clicked, with more videos displayed in a thumbnail grid below.
  • List: A single full-width column of videos that play when clicked.
  • Carousel: A slideshow carousel of YouTube videos in your feed.

Below that section, you can set the information displayed in each feed, such as user names, play icons, view numbers, stream countdown, and more.

Choose which information to display in YouTube feeds

Below are the options for your feed’s Header, Load More, and Subscribe Button.

Change the header and button options for YouTube feeds

You can also improve the video experience for users by changing the player ratio size, choosing if the video plays automatically or when clicked, and selecting a call to action for when the video is paused or reaches the end.

And like the other Smash Balloon social feed plugins, there are settings to moderate your feeds, enter code snippets, and control more advanced features.

Just remember to click the Save Changes button before embedding your YouTube feed in WordPress.

Embedding Your YouTube Feed

All Smash Balloon social feeds are super-easy to embed in WordPress. You’ve already learned how to add social media feeds to pages and posts in this article.

So next, we’ll show you how to embed your YouTube feed in a widget-ready area of your WordPress website.

Here, we’ll add a YouTube feed to the After Entry widget-ready area. This area displays after a blog post and is often used to show a link magnet for content upgrades and sign-up forms.

First, go to Appearance » Widgets from your WordPress admin area. Then locate the YouTube Feed widget and drag it to your chosen widget area.

YouTube feed WordPress widget

Next click Done, and Save, then navigate to your live website to view your YouTube feed displayed in all its glory.

Here’s a preview of how our YouTube feed looks in the After Entry widget area:

Published YouTube feed in a WordPress widget area

For more details on how to add YouTube videos to your website, check out this post.

How to Add Social Media Feeds to WordPress (Combined)

What if you want to add multiple social media accounts and just combine them into 1 feed?

With Smash Balloon’s Social Wall Pro plugin, you can easily do this with the help of the best social media aggregator in WordPress.

To begin, get your own copy of Social Wall Pro here. After downloading the plugin, install it on your website by following the instructions in this post on how to install WordPress plugins to WordPress.

Since you’ve already followed the instructions above to connect your Facebook, Instagram, Twitter and YouTube accounts to Smash Balloon’s plugins, the next step is easy.

From your WordPress dashboard, navigate to Social Feeds » Create a Social Wall.

social media integration webiste

On this page, you can check the social media accounts you want to display on your social media feed.

For this tutorial, we’ll show you how to integrate social media feeds from all 4 channels, so check Add to Wall for all accounts, like this:

social media integrations into website using social wall

Remember to click on Save Changes, then move on to the next step below.

Customize Your Social Media Feed

To start, click on the Customize tab at the top of your settings page. On this page, you can easily control how many posts to display in your social media feed.

You can also select from multiple layout options. For this tutorial, let’s select the masonrylayout.

social wall pro customize

After finalizing your customization options, it’s time to display your social media feed to your website.

Add Your Social Media Feed to WordPress

As the best social media aggregator, Social Wall Pro makes it super easy for you to add your social media feed to WordPress websites.

From your WordPress dashboard, navigate to Social Feeds » Create a Social Wall. The plugin automatically makes the shortcode for you — you just need to copy it!

using social wall pro

To add your WordPress social media feeds to a new page, go to Pages » Add New Page from your WordPress dashboard.

add new page wordpress

Then, just paste the shortcode you copied into your page editor.

Feel free to edit the page’s title, and when you’re happy with how it’s set up, then click on Publish.

Finally, you can open your website to take a look at your social media wall like this:

live social wall

That’s it!

You now know how to add a social media feed to WordPress websites using the super-easy suite of plugins from Smash Balloon.

As you can see, there are a ton of amazing features that make Smash Balloon the best social media feed WordPress plugin collection.

Ready to add social media feeds to your site? Get Smash Balloon now!

Want an easy way to turn website visitors into customers? Then check out our WordPress tutorial on how to embed social media review widgets on your site.

And don’t forget to follow us on Twitter and Facebook for more social media tips and tricks to grow your business.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.