{"id":19624,"date":"2016-10-28T13:00:19","date_gmt":"2016-10-28T18:00:19","guid":{"rendered":"https:\/\/getflywheel.com\/?p=19624"},"modified":"2023-07-06T11:03:14","modified_gmt":"2023-07-06T16:03:14","slug":"how-to-add-facebook-likes-and-reactions-to-a-wordpress-post","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/how-to-add-facebook-likes-and-reactions-to-a-wordpress-post\/","title":{"rendered":"How to Add Facebook Likes and Reactions to a WordPress Post"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Facebook\u2019s 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 \u201cliking\u201d things, Facebook has made putting emotion into social media mainstream, and now it\u2019s also available to you as a WordPress designer to add more user engagement on your site. Readers can choose from options such as \u201clike,\u201d \u201clove,\u201d \u201chaha,\u201d \u201cwow,\u201d \u201csad,\u201d or \u201cangry.\u201d<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Note: These are often referred to as emoticons, not to be confused with emojis.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter wp-image-19644 size-full\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2016\/10\/emoticons-example.png\" alt=\"an example of different reactions to a WordPress post. 6.4k likes, 262 &quot;wow&quot; reactions, 187 hearts, 57 &quot;sad&quot; reactions, 8 &quot;angry&quot; reactions, and 6 &quot;laugh&quot; reactions\" class=\"wp-image-19644\" \/><figcaption class=\"wp-element-caption\">An emoticon denotes an emotional state while emojis center more around ideas.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Plugins can help you get this functionality all set up. Just wait and see how they compare to Facebook\u2014you\u2019ll be pleasantly surprised!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">With that said, I have to give my standard advice about trying this, or any customizations, in your test environment first.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Before we dive into the \u201chow,\u201d first let\u2019s talk about why you might want to add Facebook Likes and Reactions to your WordPress post.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Why are \u201cReactions\u201d a Good Thing?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">There is a benefit to using emoticons on your site, besides just the visual flair. You\u2019ll get more feedback on your work, and that feedback will be more specific. For example, if a lot of people choose \u201chaha,\u201d you\u2019ll know that the content is funny. If there is a lot of \u201cangry\u201d emotion chosen, you\u2019ll know it struck a chord with the audience, and maybe not the kind you want. The more feedback you get, the more you\u2019ll know for your future content development and can plan accordingly.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">There are users that leave comments, but many don\u2019t take the time to type out a full response. Users are more likely to \u201clike\u201d or choose another reaction because it can be done with a single click of a button.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now that you know why Reactions are so useful, let\u2019s dive into the a plugin that can help you add them to your site!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><a href=\"https:\/\/wordpress.org\/plugins\/voting-platform-feelbacks\/\" target=\"_blank\" rel=\"noopener noreferrer\">Feelback Reactions<\/a><\/h2>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2016\/10\/feelback-reactions.png\" alt=\"feelback-reactions\" class=\"wp-image-19636\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/wordpress.org\/plugins\/voting-platform-feelbacks\/\" target=\"_blank\" rel=\"noopener noreferrer\">Feelback Reactions<\/a> 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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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\u2019t really options on where it should be displayed on the page.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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\u2019ll be in the know about which articles have worked well with your audience by seeing how \u201cemotionally engaging\u201d 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.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter wp-image-19637 size-full\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2016\/10\/feelback-reactions-dashboard-example.png\" alt=\"feelback-reactions-dashboard-example\" class=\"wp-image-19637\" \/><figcaption class=\"wp-element-caption\">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.<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2016\/10\/feelback-reactions-register.png\" alt=\"feelback-reactions-register\" class=\"wp-image-19638\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Before you decide to install Feelback Reactions, there are a few things worth mentioning. You have to register with <a href=\"http:\/\/www.vicomi.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Vicomi<\/a> to use this plugin. You\u2019ll notice that their branding is included, so you\u2019ll 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.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2016\/10\/feelback-reactions-branding.png\" alt=\"feelback-reactions-branding\" class=\"wp-image-19639\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">How to Use Feelback Reactions<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>1. Download and install plugin<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2016\/10\/feelback-reactions-activate.png\" alt=\"feelback-reactions-activate\" class=\"wp-image-19641\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">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 &gt; Installed Plugins &gt; Activate.<br><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2016\/10\/feelback-reactions-activate-02.png\" alt=\"feelback-reactions-activate-02\" class=\"wp-image-19640\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>2. Configure settings<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Go to <strong>Settings<\/strong> &gt; <strong>Vicomi<\/strong> to see the different display options. There isn\u2019t a lot to configure; you basically choose a design (or text) and that is how the emoticons will display. Be sure to <strong>Choose<\/strong> and <strong>Save<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2016\/10\/feelback-reactions-design-options.png\" alt=\"feelback-reactions-design-options\" class=\"wp-image-19642\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>3. Preview<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Previewing is important. With so many designs to choose from, you\u2019ll 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 &nbsp;go to <strong>Settings<\/strong> &gt; <strong>Vicomi<\/strong> (and make sure you are on the Settings tab).<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2016\/10\/feelback-reactions-in-use.png\" alt=\"feelback-reactions-in-use\" class=\"wp-image-19643\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">It\u2019s 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.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Facebook\u2019s 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 \u201cliking\u201d things, Facebook has made putting emotion into social media mainstream, and now it\u2019s also available to you as a WordPress designer to add more<span class=\"tile__ellipses\">&hellip;<\/span><span class=\"tile__ellipses--animated\"><\/span><\/p>\n","protected":false},"author":1,"featured_media":144750,"template":"","resource-topic":[],"resource-role":[],"resource-type":[916],"class_list":["post-19624","resource","type-resource","status-publish","has-post-thumbnail","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Add Facebook Likes and Reactions to a WordPress Post<\/title>\n<meta name=\"description\" content=\"Let your readers interact more effectively with your content by allowing them to add reactions to your WordPress posts.\" \/>\n<meta name=\"robots\" content=\"noindex, follow\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Add Facebook Likes and Reactions to a WordPress Post\" \/>\n<meta property=\"og:description\" content=\"Let your readers interact more effectively with your content by allowing them to add reactions to your WordPress posts.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/case-studies\/resources\/how-to-add-facebook-likes-and-reactions-to-a-wordpress-post\/\" \/>\n<meta property=\"og:site_name\" content=\"WP Engine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/wpengine\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-06T16:03:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2016\/10\/reactions.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1100\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"How to Add Facebook Likes and Reactions to a WordPress Post\" \/>\n<meta name=\"twitter:description\" content=\"Let your readers interact more effectively with your content by allowing them to add reactions to your WordPress posts.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2016\/10\/reactions.png\" \/>\n<meta name=\"twitter:site\" content=\"@wpengine\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/how-to-add-facebook-likes-and-reactions-to-a-wordpress-post\/\",\"url\":\"https:\/\/wpengine.com\/case-studies\/resources\/how-to-add-facebook-likes-and-reactions-to-a-wordpress-post\/\",\"name\":\"How to Add Facebook Likes and Reactions to a WordPress Post\",\"isPartOf\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\"},\"datePublished\":\"2016-10-28T18:00:19+00:00\",\"dateModified\":\"2023-07-06T16:03:14+00:00\",\"description\":\"Let your readers interact more effectively with your content by allowing them to add reactions to your WordPress posts.\",\"breadcrumb\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/how-to-add-facebook-likes-and-reactions-to-a-wordpress-post\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wpengine.com\/case-studies\/resources\/how-to-add-facebook-likes-and-reactions-to-a-wordpress-post\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/how-to-add-facebook-likes-and-reactions-to-a-wordpress-post\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wpengine.com\/case-studies\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Resources\",\"item\":\"https:\/\/wpengine.com\/case-studies\/resources\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Add Facebook Likes and Reactions to a WordPress Post\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\",\"url\":\"https:\/\/wpengine.com\/case-studies\/\",\"name\":\"WP Engine\",\"description\":\"Managed Hosting for WordPress\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085\",\"name\":\"WP Engine\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"caption\":\"WP Engine\"},\"sameAs\":[\"https:\/\/wpengine.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Add Facebook Likes and Reactions to a WordPress Post","description":"Let your readers interact more effectively with your content by allowing them to add reactions to your WordPress posts.","robots":{"index":"noindex","follow":"follow"},"og_locale":"en_US","og_type":"article","og_title":"How to Add Facebook Likes and Reactions to a WordPress Post","og_description":"Let your readers interact more effectively with your content by allowing them to add reactions to your WordPress posts.","og_url":"https:\/\/wpengine.com\/case-studies\/resources\/how-to-add-facebook-likes-and-reactions-to-a-wordpress-post\/","og_site_name":"WP Engine","article_publisher":"https:\/\/www.facebook.com\/wpengine","article_modified_time":"2023-07-06T16:03:14+00:00","og_image":[{"width":1100,"height":500,"url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2016\/10\/reactions.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_title":"How to Add Facebook Likes and Reactions to a WordPress Post","twitter_description":"Let your readers interact more effectively with your content by allowing them to add reactions to your WordPress posts.","twitter_image":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2016\/10\/reactions.png","twitter_site":"@wpengine","twitter_misc":{"Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wpengine.com\/case-studies\/resources\/how-to-add-facebook-likes-and-reactions-to-a-wordpress-post\/","url":"https:\/\/wpengine.com\/case-studies\/resources\/how-to-add-facebook-likes-and-reactions-to-a-wordpress-post\/","name":"How to Add Facebook Likes and Reactions to a WordPress Post","isPartOf":{"@id":"https:\/\/wpengine.com\/case-studies\/#website"},"datePublished":"2016-10-28T18:00:19+00:00","dateModified":"2023-07-06T16:03:14+00:00","description":"Let your readers interact more effectively with your content by allowing them to add reactions to your WordPress posts.","breadcrumb":{"@id":"https:\/\/wpengine.com\/case-studies\/resources\/how-to-add-facebook-likes-and-reactions-to-a-wordpress-post\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/case-studies\/resources\/how-to-add-facebook-likes-and-reactions-to-a-wordpress-post\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/case-studies\/resources\/how-to-add-facebook-likes-and-reactions-to-a-wordpress-post\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/case-studies\/"},{"@type":"ListItem","position":2,"name":"Resources","item":"https:\/\/wpengine.com\/case-studies\/resources\/"},{"@type":"ListItem","position":3,"name":"How to Add Facebook Likes and Reactions to a WordPress Post"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/case-studies\/#website","url":"https:\/\/wpengine.com\/case-studies\/","name":"WP Engine","description":"Managed Hosting for WordPress","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085","name":"WP Engine","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","caption":"WP Engine"},"sameAs":["https:\/\/wpengine.com"]}]}},"acf":[],"grid_image_url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2016\/10\/reactions-grid.png","media-type":{"term_id":916,"name":"Article","slug":"article"},"role":false,"topic":false,"_links":{"self":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource\/19624","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource"}],"about":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/types\/resource"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/users\/1"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media\/144750"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media?parent=19624"}],"wp:term":[{"taxonomy":"resource-topic","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-topic?post=19624"},{"taxonomy":"resource-role","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-role?post=19624"},{"taxonomy":"resource-type","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-type?post=19624"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}