How to Add Social Feeds to WordPress with Flow Flow

Social media consumes our lives. Not in a bad way though. I personally love being able to stay up to date on what friends, family and especially brands are up to on a minute to minute basis. Which is maybe not so great for my own productivity, but it’s awesome news for your online brand or business.

Your followers want to know what you’re tweeting, pinning, liking, sharing, posting etc. So why not make it easy for them by adding your social stream to WordPress?

Flow Flow, WordPress Social Streaming Made Easy

The absolute best way to add social feeds to your WordPress blog or website is with Flow Flow. As with any feature you might want to add to WordPress there are tons of plugin options, but let us explain to you why we think Flow Flow is the absolute best.

Quick Feeds

Adding feeds is even easier with Flow Flow. It can get complicated when you have to create, locate and decipher what’s needed to authorize each social network feed. And this process can be even more complex if you’re forced to use a different plugin for each network. Lucky for your Flow Flow includes support the most popular networks (Facebook, Twitter, Instagram, Pinterest, etc.) AND it makes it easy to authorize your feeds with built-in fields for required information (as well as detailed documentation if you ever need help).

Easy Customizations

Technical features are of course important, but so is the look and feel of the plugin. You don’t want an ugly or mismatched feed displayed on your website. Flow Flow includes options for grid style, columns, custom column spacing, stream background (make it match or stand out on your main site or page row background), animation, font colors, social icon styles and more. And if you want to tweak an element that doesn’t have a built-in option you can always adda bit of custom CSS.

Visual Composer Integration

Add your streams to pages as you’re building them with Flow Flow’s full Visual Composer integration. The plugin is completely compatible with Visual Composer’s front-end editor so you can easily insert your streams as you use other page builder options for rows and layouts.

Total Theme Compatible

And of course Flow Flow is compatible with the Total WordPress theme. In fact, we’re honored to say that Flow Flow is currently using the Total theme on their live preview. When you pair Total’s rock solid code, quick demo imports, nearly unlimited styling options and of course included visual page builder with the social stream power of Flow Flow there’s nothing you can’t build.

But now that you know why we love Flow Flow, let’s get into how you can implement this awesome plugin on your WordPress website.

Flow Flow Quick Start Guide

Looks Awesome (the team behind Flow Flow) has done an excellent job documenting their plugin. To get started in a jiffy you can simply watch their video guide:

But for those of you who want to follow along with an old-school walk through keep reading to see how we setup Flow Flow.

Step 1: Purchase, Download and Install the Plugin

First you need your own copy of the plugin, so head over to CodeCanyon and purchase a personal use license.

Get Flow Flow Social Streams

If you’re a developer you might want to also consider the extended license – it’s a great way to add value to your client work by offering social streams as a feature on all your client sites. Just an idea.

Once you have a license, go to your downloads page to download the plugin file. If you choose the “All files & documentation” option remember that this will download a zip file that includes more than just the plugin so you will need to unzip it before attempting to install the plugin (usually just double clicking on the file will do the trick).

Next log into your WordPress installation and go to your Plugins section. Click on the button at the top of the screen to “Add New” then again to “Upload Plugin.”

Click on the option in the middle of your screen to “Choose File.” Browse for the folder you just downloaded and unzipped from CodeCanyon, it should be named similar to Flow-Flow 3.0.9 (with that last bit changing based on your version number). Select the zipped file (flow-flow.zip) within that folder and follow the onscreen prompts from WordPress to finish the plugin installation. Then click the option to activate.

Step 2: Edit Flow-Flow Settings

Before your begin building we recommend taking a quick look at the plugin settings. If you go to Flow Flow > Settings you can view the built-in options for the plugin.

In our opinion you won’t want to miss the moderator user-role options, date format and the amount of stored posts for your feeds. But do take a glance at the other options before you save.

Step 3: Add Your Social Feeds

With your plugin installed, active and setup you can start by adding your social feeds. Every social network is different and some will require access tokens or apps before you can add a feed. But don’t worry – Flow Flow makes this all super easy.

Simply go to Flow Flow > Feeds and click on the green button to “Create Feed +” to get started. This will open a popup.

From here select the social feed you want to add. We chose to start with Pinterest since it’s super easy to add.

Once you select a feed you’ll be prompted to enter the feed settings. These options will vary based on the feed you selected. Pinterest only requires the username or username/board, your preferred frequency to update (ranging from 5 minutes to once per week), number of posts to load (1, 5, 10 or 20) as well as the option for you to moderate what is shown. Once you’re done click to “Add Feed.”

Now repeat the process for each social network you want to add! Just remember that you may need to add authorization information before you can add a feed, but Flow Flow makes this easy by offering an “Auth” section.

From here you can add the authorization info required for Twitter, Facebook, Instagram, Google+, YouTube, Foursquare, LinkedIn, SoundCloud and Dribble all at once (Pinterest, Flicker, Vimeo, WordPress and RSS do not require any additional authorizations when being added). Each social settings section includes a link to the official Flow Flow documentation if you need help. We strongly recommend you follow their directions if you’re not sure how to setup your apps and/or access tokens.

Once your authorizations have been added and saved you will be able to create and activate feeds for these social networks.

If you accidentally enter the wrong information when creating a feed or forget to add the feed authorization you’ll see an orange exclamation icon (!) as the feed status. Just hover on the icon to see the feed error. Once you correctly edit the feed or authorization info you’ll have the option to enable your feed.

Step 4: Create Social Streams

After you’ve added all of your social feeds you can compile them into social streams. This is quick and easy. Just go to your “Streams” tab and click the green button to “Create Stream”

Add Social Feed Sources

Give your stream a name and start adding your feeds. Just use the dropdown field to select then add each of your preferred feed sources.

As you add feeds you’ll be able to see them in your “Connected Feeds” section.

General

Next click on the “General” tab to set important options for ordering, post count, lightbox, privacy, device display and more.

Grid

Do not skip these options! You’ll want to go to the “Grid” tab to change settings for grid design (masonry, equal grid or justified), columns & spacing, heading and more.

Social Stream Styling

Flow Flow makes it easy to create a custom looking stream. Use the options for card styling and the drag and drop card builder to recolor and reorganize your social stream posts.

Custom CSS

If you’re a developer or if you are well versed in CSS their is a built-in section to add your custom code. This is a great way to fine tune the visual display for your stream to really make it match your client’s website.

Shortcode

The last tab for your stream contains the stream’s shortcode. This can be copy & pasted onto a post or page to instantly display your stream.

Step 5: Add Your Stream to Your Website

The last step is to make your stream visible by inserting it on a page. One option is to copy the shortcode and paste it into the text editor for your page. But if you’re using a theme with a page builder like our Total WordPress theme it’s as simple as clicking a few buttons.

First create a new page, give it a name and choose your page layout, featured image, etc. Once you’re done with your page settings click on the Visual Composer backend or frontend editor (we like to see what we’re doing, so we always use the frontend editor with Total).

Next click the plus (+) icon to add a new page element then select the Flow Flow Social Stream.

Then select the social stream you want to add and save your changes. That’s it! Just publish your page to make it visible to your website visitors.

More Flow Flow Features

The power behind Flow Flow doesn’t stop there! The developers have also released a couple helpful add-ons for the plugin to give you even more value added via your social streams.

Advertising & Branding: Monetize your social streams with the Flow Flow Advertising & Branding add-on. With this installed you can sell featured spots in your social stream, insert ads or even create hero cards for your social media campaigns.

Broadcasting Extension: Have a lobby in your office? Or perhaps your business is hosting or attending a conference? The Flow Flow Broadcasting Extension is just what you need. Use it to display your live social stream on a big screen (tv, projector, etc) and instantly draw attention to your most relevant posts, tweets, announcements, etc.

Final Thoughts

To sum up, Flow Flow is feature rich plugin that provides every WordPress user with an easy way to collectively display social feeds (whether it’s on your website or a big screen tv). We personally love the easy options, excellent documentation, integration with the Visual Composer (and Total) and useful extensions. You can learn more about Flow Flow on the plugin page, and we hope you’ll give it a try on your next client project or for your own personal website.

Have any questions about Flow Flow? Or maybe you’ve used the plugin and want to share some tips & tricks? Just leave a comment – we’d love to hear your thoughts!