how to add social media feed to wordpress

How to Add Social Media Feeds to Your WordPress Site

by Stacey Corrin on May 26, 2020

Do you want to grow your social media followers, while updating your website with new, engaging content? You can achieve that and more by adding feeds from your social channels right on your site.

In this article, we show you how to add social media feeds to your WordPress site. Then you can delight visitors with relevant content, boost your followers, and secure more potential customers.

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.

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?

By adding social media feeds to your WordPress site, you get to show your social content to all your site visitors. That way they get a broader understanding of your business and how you can help them.

But that’s not all.

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

  • You can display all your feeds in a single place, so visitors can see which content you publish on each platform without having to leave your website.
  • Adding social feeds to your site improves its presentation and creates an engaging experience for users.
  • With social feeds on your website, it’s easier to display user-generated content (UGC) linked to your brand to improve your reputation. It also encourages users to join in and submit their own UGC using relevant hashtags.
  • As we’ve already mentioned, displaying social media feeds on your site gives visitors a source of inspiration, which prompts them to interact with your website. And in doing so, it improves their interest in your business.
  • If people stay on your site to engage with your content, they’re spending more time on YOUR site rather than moving on to the next one.
  • Displaying social feeds with UGC helps users make purchase decisions, giving them the push they need to choose your brand above others.
  • Social media feeds are the ideal way to display social proof for your brand. This creates social trust, making your customers loyal to your business.

Now you know why having social media feeds on your 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. For WordPress users, plugins enhance your site’s functionality without having to worry about knowing how to code. All you have to do is install the plugin, activate it, and get to it.

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 WordPress site, we suggest using the suite of social feed plugins from Smash Balloon.

Smash balloon 5 star ratings

Trusted by over 1.3 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.

The 2 key goals of Smash Balloon are to:

  1. Create and maintain the most useful, functional, beautiful, robust, 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 social media feeds to WordPress for Facebook, Instagram, Twitter, and YouTube, step-by-step.

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

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.

You’ll then need to upload and activate the plugin in WordPress. You can learn how to install a WordPress plugin in this step-by-step tutorial.

Once the Facebook Feed plugin is installed and activated on your website, head to Facebook Feed » Settings.

Then click the blue Connect a Facebook Account button to link your Facebook profile to your website.

Connect a Facebook account

Next, connect either a Facebook Page or Group. For this example, we’ll choose the Page option.

Connect a Facebook page or group

Now follow the on-screen prompts to connect to Facebook and choose to connect 1 or multiple Facebook pages.

Choose a Facebook account

Then click Connect This Page to get set up.

If you’d prefer to link to the Facebook feed plugin manually, click Manually Connect Account and enter your Facebook ID, Access Token. This is useful if you don’t have the privileges required to connect to a Facebook page or group but still want to display the feed on your website. All you’d need is the ID and access token.

Manually connect a Facebook account

When you scroll down the page, there are various settings you can configure, such as how many posts you display in a feed, how often the plugin checks for new posts, and timezone options.

Facebook feed general settings

Feel free to play around with those settings to find what suits your site the best. However, if the thought of fiddling with them fills you with fear, don’t worry. Your feed will still work beautifully without changing a thing.

Just remember to click Save Changes.

Customizing Your Facebook Feed

Next, if you head to Facebook Feed » Customize, you’ll see a range of settings dedicated to how your feed appears on your website.

And along the top of the page are different tabs related to different feed sections such as:

  • Post layout settings
  • Post style settings
  • Miscellaneous settings
  • Custom text and translation settings

General Facebook feed customization settings

The General settings page lets you change the width, height, padding, columns, and background color of your Facebook Feed.

You can also select which posts are displayed in your default feed by ticking and unticking the checkboxes.

Facebook feed post types

As you can see above, you’re also able to display Facebook events on your website, which is great for keeping visitors up-to-date.

Further down the page, you can change how different aspects of your feed appear on your website, including:

  • Your feed header
  • The like box widget included at the top or bottom of your feed
  • The load more button which dynamically loads extra posts in your feed when clicked
  • Your feed’s lightbox that pops up when users click media in your feed

Facebook feed button options

Click Show Customization Options to expand the settings for these features.

The Post Layout tab is where you can choose from 3 different layout options for your Facebook feed which are:

Facebook feed post layouts

  1. Thumbnail: A small thumbnail image with your feed content to the right displayed in a WordPress horizontal Facebook feed.
  2. Half-width: A featured image half the width of your site’s container, with text content displayed on the right-hand side.
  3. Full-width: A featured image spanning the full width of your site’s content container, with text content displayed above the image.

You can also choose to automatically display full-width Facebook feeds when your site container is narrow or on mobile devices to make it easier for users to browse. Plus, there’s the option to show only a single image per post.

The following section is where you can choose the information included in your feeds such as description text, post actions, likes and comments, and more.

Show or hide Facebook feed information

When you’ve finished configuring the layout settings, click Save Changes.

Now let’s move on to the Style Posts section. Here you can choose how posts are shown in your Facebook feed. You can select the Regular option, which has a simple separating line between posts, or the Boxed option which separates posts into individual boxes.

Style posts in your Facebook feed

Moving down the page, you’ll see the following settings:

  • Post Author: Choose the text size and color for the post’s author.
  • Post Text: Set the length of the post text and its’ color. You can also choose to link the text and tags to the original content on Facebook.
  • Shared Post Description: Choose the size, weight, and color of the text in shared posts.
  • Post Date: Configure the date and time formatting for posts in your feed, as well as the text size, weight, and color.
  • Shared Link Boxes: Set the box and text styles for your shared links in your feed.
  • Event Posts: Configure the formatting for event titles, dates, and details shown in your Facebook feed.
  • Likes, Shares, and Comment box: Choose the icon style, text and link colors, background color, and more.
  • Post Action Links: Choose the text to show in your action links and format the size, weight, and color.

Once you’ve saved your changes, move on to the Misc settings. Here you can enter custom CSS for styling your feed and scripts for tracking purposes like Google Analytics tracking and retargeting pixels.

Custom tracking and CSS for Facebook feeds

Further down, you can also control the media settings, pagination settings, caching options, and more.

Advanced options for facebook feeds

Now that you’ve set things up and customized your Facebook feed let’s look at adding it to your WordPress site.

Embedding Your Facebook Feed

If you’re wondering, “How do I embed a Facebook feed?” the answer is pretty simple. With the Custom Facebook Feed Pro plugin, you can add your feeds to any post, page, or widget-ready area in WordPress with a few clicks.

Let’s look at how to add a Facebook feed to a page in WordPress.

First, head to Pages » Add New from your WordPress dashboard. Then click the Plus (+) icon to add a new WordPress content block.

Add a new content block

In the search box, type Facebook to reveal the Facebook feed block and click it to add it to your page.

Facebook feed content block

Now you’ll see a preview of how your feed will look live on your website.

Click Publish; then, your feed will look similar to the one below, based on your settings when you navigate to the live page.

Published Facebook Feed in WordPress

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. Then install and activate the plugin using the instructions we linked above.

Next, connect to your Instagram account by clicking the blue Connect an Instagram Account button. You can also manually connect to Instagram by entering a valid Instagram Access Token.

Connect an Instagram account

The Instagram Feed plugin lets you show a variety of feed types on your website, including:

  • User Account: A feed of the latest posts from your Instagram account.
  • Hashtag: Display feeds based on specific hashtags.
  • Tagged: Feeds containing only content you’re tagged in.
  • Mixed: A feed with multiple content types, including hashtags, tags, and more.

Instagram content sources

So choose which feed type you’d like to display and click Save Changes.

Customizing Your Instagram Feed

Next, head to Instagram Feed » Settings » Customize to choose how you’d like to display your feed on your website.

At the top of the page, you can set the width, height, and background color of your feed. Then you’re faced with several layout options including:

Instagram feed layout types

  • Grid: A simple grid of square-cropped Instagram post images.
  • Carousel: Posts from your feed displayed in a slideshow carousel.
  • Masonry: Instagram feed posts displayed in their original aspect ratios with no space between them.
  • Highlight: Masonry style cropped post images with no captions or likes displayed.

You can also set the number of photos in your feed and the columns and padding.

Below that section are options for controlling the header, load more button, and follow buttons for your Instagram feed. Simply click Show Customization Options for each section to reveal the settings.

Instagram feed header and button options

Clicking the Posts tab allows you to configure the settings for posts displayed in your Instagram feed. Here you can sort photos, change the resolution, and choose which media type to show.

Instagram post settings

Below that, you can choose the styles for when a user hovers over the post and which information you’d like to display.

Instagram post feed hover styles

You can then configure similar settings for captions, likes and comments, and lightbox comments.

Remember to click Save Changes when you’re finished with this section.

Moving on to the Moderation tab, you can set which posts appear in your Instagram feed.

One way is to enter words, phrases, or hashtags you’d like to include or exclude.

Instagram feed post filtering

The other way is to enable Visual Moderation for your feeds. This lets you manually remove an image from your live feed in a visual format by clicking the Moderate button on your visible feed.

Instagram feed visual moderation

Here’s how it would look to site admins. All you need to do is click any image to remove it.

moderation settings

The advanced Instagram feed settings are where you can change the look of your feeds with custom CSS. You can also add your Google Analytics tracking code and any custom JavaScript or JQuery.

Advanced Instagram Feed Settings

With your Instagram feed customized, how do you display it?

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’ve got Facebook and Instagram feeds nailed. But what about Twitter? Let’s look at that next.

Adding a Twitter Social Meed 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 Twitter Feeds » Settings and click the blue button to login and authorize your Twitter account.

Connect your Twitter account

Next, scroll down to the Feed Settings area where you can choose to display any of the following feed types:

Twitter feed types

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

Below that section, you can choose how many Tweets to display and how often the plugin should check for new content.

Now let’s find out how to customize your Twitter feed.

Customizing Your Twitter Feed

To customize your Twitter feed, navigate to the Customize tab at the top of the Settings page.

Here you can set the width and height of your feed, as well as choose the type of layout you’d like including:

Twitter feed layout types

  • List: A full-width list of your tweets.
  • Carousel: A slideshow carousel of tweets with settings to customize the number of columns, loop type, navigation arrows, and more.
  • Masonry: A feed of tweets in columns with no space between each post.

When you’ve chosen a layout, you can scroll down to pick which details you’d like to include in your feed and tweak the settings for media.

show or hide information in Twitter feeds

In the Moderation section, further down the page, you can include or exclude content from your feed based on hashtags, words, or phrases. Plus, it’s easy to hide specific tweets by entering the post ID into the box provided.

As with the previous social media feed plugins from Smash Baloon, you’ll find options for adding CSS and tracking codes, as well as advanced options for controlling every aspect of your Twitter feed.

Remember to click Save Changes before moving onto embedding your Twitter feed.

Embedding Your Twitter Feed

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

Here’s a demonstration of how to embed your Twitter feed in a WordPress post, which is an excellent way to highlight relevant content for your visitors.

First, head to Posts » Add New from your WordPress dashboard. Then click the Plus (+) icon to add a new WordPress content block.

add a new content block to your WordPress post

In the search box provided, type Twitter to find the Twitter social block and click it to add it to your post.

Twitter feed content block

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:

Display your Twitter feed in a WordPress post

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 plugin for that, 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.

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 playlist in the YouTube 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.

Below this section, you can set how often the plugin checks your feed for new content.

Customizing Your YouTube Feed

Customizing your YouTube feed follows a similar process as the other social media feed plugins for WordPress in this guide.

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 videos in your feed with optional autoplay and navigation arrows.

You can also control the number of videos in each feed and the spacing between videos.

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

Then you can control the text used for labels in your feed, which helps if English isn’t your audience’s first language.

Control the labels and text in your 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

Then you can 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 just like the other Smash Baloon 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

As we mentioned earlier, 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.

For this part of the tutorial, we’ll add a YouTube feed to the After Entry widget-ready area. This an area that 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 site 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

That’s it!

You now know how to add social media feeds to your WordPress site using the super-easy suite of plugins from Smash Balloon.

So what are you waiting for?

Get Smash Balloon now!

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

Comments

  1. Steph Green

    Awesome article! I love the detail and the screenshots provided. Smash Balloon is so great to work with!

    Reply
  2. Lynda Johnson

    This is great! Smash Balloons keeps it so simple that even tech dummies can keep up.

    Reply
  3. Marissa Benson

    Thanks for the tips!

    Reply
  4. Silver Teede

    Some guud stuff

    Reply
  5. Kakhaber Khmelidze

    Thanks for the extensive information.

    Reply
  6. Angie Will

    Very informative.

    Reply
  7. Michelle David

    Extremely informative thank you!

    Reply
  8. Edward

    thanks for this

    Reply
  9. Monica McConnell

    so much more tech than i am used to

    Reply
  10. Melinda Mattox

    This is great and super helpful! Thank you.

    Reply
  11. Edgar Taklenok

    Great features!

    Reply
  12. Michelle David

    Thanks for such an informative and well thought out presentation!

    Reply
  13. Brady

    We use this often with our clients!

    Reply
  14. Dave Shipston

    Happy Thanks Giving!

    Dave

    Reply
  15. Kakhaber Khmelidze

    Thank you.

    Reply
  16. Melinda Mattox

    So helpful and full of great information. Thanks Smash Balloon!

    Reply
  17. KASIA JANKOWSKA

    Can You add Pinterest too?

    Reply
  18. Sally Haynes

    My tourism web site is fairly basic but the Smash Balloon Facebook feed gives it a more sophisticated feel. And it is trouble free!

    Reply
  19. Patrick M

    I keep coming back for the great advice!

    Reply
  20. Vincent Gruenbacher

    fantastic!

    Reply
  21. Jessica Dunn

    Sincerely wish all how to posts went just like this one. Show and Tell 100% the kind of explanation I need especially online. THANK YOU! and Happy Thanksgiving everybody.

    Reply
  22. Luis Marinho

    Best plugin for social media. Keep Going!

    Reply

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.

Leave a Reply

Your email address will not be published. Required fields are marked *