How to add Facebook Likes and Reactions to a WordPress post

How to add Facebook Likes and Reactions to a WordPress post

Facebook’s reaction system is nothing new; we all love liking and commenting on posts. But what if you wanted to offer that functionality to your WordPress site? Rather than just “liking” things, Facebook has made putting emotion into social media mainstream, and now it’s also available to you as a WordPress designer to add more user engagement on your site. Readers can choose from options such as “like,” “love,” “haha,” “wow,” “sad,” or “angry.”

Note: These are often referred to as emoticons, not to be confused with emojis.

emoticons-example An emoticon denotes an emotional state while emojis center more around ideas.

There are a few great plugins that can help you get this functionality all set up. Just wait and see how they compare to Facebook – you’ll be pleasantly surprised!

With that said, I have to give my standard advice about trying this, or any customizations, in your test environment first.

Need help learning how to set up a development copy of your WordPress site? Follow our super simple tutorial here!

Before we dive into the “how,” first let’s talk about why you might want to add Facebook Likes and Reactions to your WordPress post.

Why are “Reactions” a good thing?

You may think this is just an attempt to replicate Facebook. To be honest, in a lot of ways, it is. If you think Facebook is the sole user and inventor of emoticons, however, you may be interested to know that emoticons were around in the days of AOL, long before Facebook began using them. They may not have looked as fancy, but the idea was the same: they conveyed emotion in communication.

There is a benefit to using emoticons on your site, besides just the visual flair. You’ll get more feedback on your work, and that feedback will be more specific. For example, if a lot of people choose “haha,” you’ll know that the content is funny. If there is a lot of “angry” emotion chosen, you’ll know it struck a chord with the audience, and maybe not the kind you want. The more feedback you get, the more you’ll know for your future content development and can plan accordingly.

There are users that leave comments, but many don’t take the time to type out a full response. Users are more likely to “like” or choose another reaction because it can be done with a single click of a button.

Now that you know why Reactions are so useful, let’s dive into the plugins that can help you add them to your site!

DW Reactions

DW Reactions allows your users to choose from the standard set of reactions (“like,” “love,” “haha,” “wow,” “sad,” or “angry”), all without having to leave a comment. This makes it super fast and easy for your readers. It’s also important for those who like the traditional “like” button – that’s also one of the options.  DW Reactions is also free, so it’s both convenient and cheap to look at user trends. Everything looks great on various devices, so no matter how your users browse, they will be able to easily react.

It’s very simple to use, as well. Users can interact with the reactions by hovering or tapping (depending on the device), and as people start to engage with the emoticons,  there will be a number shown next to each one with the count.

dw-reactions

How to use DW Reactions

1. Download and install plugin

First things first. The DW Reactions plugin needs to be installed and activated. This can be done right away after the installation or by going to Plugins > Installed Plugins > Activate.
dw-reactions-activate

dw-reactions-activate-02

2. Configure settings

After the plugin is installed and activated, you can configure everything by going to Settings > Reactions. Here you will find the plugin settings. They are pretty self-explanatory, but there are a few defaults to keep an eye out for.

dw-reactions-settings

By default, only registered users and users that are logged in can react. In many cases, this may not be the most desirable setting for your site. To change it, be sure to uncheck “Users must be logged in to add reaction.” There are also settings for where the reactions will be displayed. Do you want them to only show on posts? What about your homepage, pages, or archives?

Now it’s time to actually make the reactions show up on your pages or posts. To automatically display reactions, make sure that the boxes next to “Show reactions button” and “Show reactions count” options are selected.

Be sure to save your settings and then view your site – you should be able to your reactions now! With just a few simple presets, the reactions are ready to use.

dw-reactions-options

There is also a manual option, which can be used for a little more control over where reactions appear. Keep in mind, with the manual approach, it is a good option if you only want reactions to appear in just a few places, not as a global setting like we did with the basic settings. It allows for shortcodes, which makes accomplishing post-specific reactions quick and easy.

Feelback Reactions

feelback-reactions

Feelback Reactions is a lot like DW Reactions, but the look and feel can be customized while still being mobile friendly. The idea of emoticons is definitely still the focus, but there is the opportunity to have it look different than what Facebook uses. There are nineteen different themes to choose from, including an option to display emotions as text. It also includes a visible count showing how many people have selected any given option on each page.

This plugin is more of an out-of-the-box solution than DW Reactions, but there are definitely some trade-offs. It can be configured to only show on pages you want, but it takes some digging in the Dashboard to set that up. The location is also pretty much defined at the moment, shown after page and post content, so there aren’t really options on where it should be displayed on the page.

Feelback Reactions does offer a good analytics tool for the reactions system, though. There is a separate area for analytics, keeping the design and data separate. Go to the Dashboards tab to take a look around at the detailed analytics. This will allow you to visualize data within a specific time period and also view other important information. You can see things like pageviews, engagement, and referrals. A valuable insight can be found within the Article tab, which provides insight into which timeframes are better for posting content. You’ll be in the know about which articles have worked well with your audience by seeing how “emotionally engaging” they were by using a unique reactions total. If you want to know which author is getting the most (and best) reactions, you can also see author performance information.

feelback-reactions-dashboard-example There is not a lot of data here, but when there are multiple reactions chosen, it will be easy to see how the users emotions affected the number of pageviews.

feelback-reactions-register

Before you decide to install Feelback Reactions, there are a few things worth mentioning. You have to register with Vicomi to use this plugin. You’ll notice that their branding is included, so you’ll have to be cool with having that shown on your site or do a little CSS magic to hide it. To see the stats, you will have to join the VICOMI community.

feelback-reactions-branding

How to use Feelback Reactions

1. Download and install plugin

Start by installing the Feelback Reactions plugin. Like the example above, this plugin can be activated right away after the installation or by going to Plugins > Installed Plugins > Activate.
feelback-reactions-activate

feelback-reactions-activate-02

2. Configure settings

Go to Settings > Vicomi to see the different display options. There isn’t a lot to configure; you basically choose a design (or text) and that is how the emoticons will display. Be sure to Choose and Save.

feelback-reactions-design-options

As far as the reaction location, they will be displayed after content and above the comments section, so there are not any placement settings to choose from.

3. Preview

Previewing is important. With so many designs to choose from, you’ll want to double check that the ideal one was chosen to go along with the look and feel of your site. A good way to do this is to choose a post (or create a new one if needed) and choose View. You should see the chosen design. If you need to go back and change it, just  go to Settings > Vicomi (and make sure you are on the Settings tab).

feelback-reactions-in-use

It’s okay to get emotional. These are great plugin options to gather more user feedback and allow them to provide emotional insight. With these two plugin options, emotions can get the best of you and your posts.

Join the discussion

Get more great content in your inbox

More articles

Delightful managed WordPress hosting

The #1 choice of over 70,000 digital creatives

Tour the platform
[if lte IE 8]
[if lte IE 8]