Adding social media feeds the right way

This isn’t about adding social sharing buttons to your blog posts. If you want to do that, check out how to add branded social sharing icons to your site. This post is all about embedding your social media feeds + content directly into your WordPress website.

This post covers options the 4 most popular social networks for business — Facebook, Twitter, Instagram + Pinterest.

Facebook

To add your Facebook business page feed to your site, you can’t go wrong with the Custom Facebook Feed plugin. It’s easy to use + install, has plenty of customizable options, not to mention, it’s up to date!

Head to Plugins > Add New + search for Custom Facebook Feed by Smash Balloon. Click Install + then Activate to get the plugin ready for your site. You’ll now have a new menu item in your dashboard called Facebook Feed. Enter in your Facebook Page ID — which is just the text that appears after www.facebook.com/ in your page’s direct link.

Once your ID is added, you can go to town with their settings, including design customization + text changes. If you’re adding this feed to a sidebar, you’ll likely want to keep the number of posts low. That will help to keep the widget height short. But if it’s going elsewhere, you’ll have more room to play with.

Add your social media feeds with a shortcode.

What I love most about this plugin is that you can now add your feed to your sidebar OR any page on your site using their shortcode [custom-facebook-feed]. It really doesn’t get much simpler than that.

Twitter social media feeds

To load your tweets into your sidebar, I recommend installing the Custom Twitter Feeds plugin. Just like the FB feed option, it’s easy to use + has been kept up to date because it’s by the same plugin author.

To add your twitter social media feed to your Wordpress website, head to Plugins > Add New + search for Custom Twitter Feeds by Smash Balloon. Click Install + then Activate to get the plugin ready for your site.

You’ll now have a new widget type in your widget area called Twitter Feed. Click + drag that to the sidebar you want your Twitter feed to appear on.

You can add multiple social media feeds.

The slick thing about this plugin is that its shortcode allows for tons of customization, including the Twitter handle to display. Which means you could have multiple twitter feeds added if you were managing multiple accounts or creating a collection of who to follow.

You also get to set the link color + border color of the widget to make it more on brand with your site. (You know how much I love keeping colors on brand!)

Instagram social media feed

My favorite way to add Instagram social media feeds to any site is a little bit nerdier than adding a plugin. While it involves some code, the only thing you need to know how to do is copy + paste.

Head to https://lightwidget.com/ to snag your IG feed code. Enter in your username + adjust the settings to match what you want to see on your site.

If you wanted a row of your latest images, set the Grid columns to ~6 + the rows to 1. You can even change the hover, padding + whether captions show or not.

Once you’re happy with the preview, click the Get Code! button. You’ll be able to copy the populated code + paste it into any page text editor or text widget within your Widgets area to add your instagram feed right to your site.

Pinterest

Just like Instagram, I add Pinterest with a bit of code instead of a plugin because of the flexibility it provides.

Go to https://developers.pinterest.com/tools/widget-builder/ + you’ll see a widget builder that will walk you through all of the settings necessary — the board URL + the widget size. You’ll then get a short bit of code to copy + paste into a widgets or page via the text editor. (If you’re in Gutenberg, add it via an HTML block.)

Unlike Instagram, to add Pinterest you also need to add a separate line of code to your theme. If your theme has a header + footer scripts area (or extra scripts) for stuff like Google Analytics, you can paste this extra code there.

I’ve had luck pasting it into the page where the Pinterest board was embedded directly. But following their instructions of placing it at the bottom of the page code is better.

You can also use this tool to create a save or follow button, highlight a specific pin or embed a preview of your Pinterest profile. Each one is straight-forward + only involves 2 bits of code that you need to add to your site. After that, make sure you prep your website images for Pinterest.

on your keyboard hit enter to search or esc to close