Homesocial media

How To Add Facebook Like, Follow Buttons On Your WordPress Blog [With Codes]

Like Tweet Pin it Share Share Email
Step by step tutorial to add Facebook like, share, save and send button to WordPress manually and with WordPress plugins.

Facebook is the largest referrer of social media traffic to online business and websites. With over 1.8 billion monthly active users (MAUs as of February 2017), Being on Facebook, using Facebook buttons on your website is a no brainer.

If you want to add Facebook like and follow buttons on your WordPress, here is a handy step-by-step tutorial about adding Facebook buttons and widgets on your website.

But before diving in, let's see why you should add Facebook widgets to your website and why that matters.

What Are Facebook Buttons? And Why They Matter?

Facebook buttons are the widgets on your website that helps your readers connect with you on Facebook. This could be liking your Facebook business page, liking and sharing an article on Facebook which can bring you additional exposure and referral traffic.

Advantages of Adding Facebook Like/share and Follow Buttons On Your Website

Adding any sort of social media widget (or button image that links to social media accounts) to your blog allows you to connect to your users over that platform and get more exposure.

By adding Facebook buttons on your website you tap into the huge platform of over 1.8 billion users and get the chance to connect with your audience there.

Here are the benefits of having Facebook buttons on your website:

  • Allows your readers to like your Facebook business page.
  • Allows readers to like and share the article they are reading so that it reaches more similar minds and hence bring you more traffic and leads from Facebook.
  • Facebook is the largest referrer of social media traffic so you can get good traffic.
  • It is always good to have an alternate source of traffic or a platform other than Google so in case your site doesn't perform well on search engines, you can have alternate means to interact with your audience.
  • Facebook pages & groups now have the ability to sell or go LIVE so if you leverage your organic visitors and diverge them to connect with you on Facebook, you can sell and perform LIVE webinars for them.
  • Having a good number of shares and likes on your social profiles give you an authority boost in the minds of your readers and hence increases trust levels.

How To Add Facebook Buttons To Your Website (Step-By-Step Tutorial)

Like all other WordPress tutorials, you can add Facebook buttons and widgets on your site in two different ways.

  1. Manually: By getting the code from the official Facebook's developer page where it has customizable settings to create like like, share widgets using the Extend Facebook Markup Language (XFBML).
  2. Using Plugins: If you're not techy enough to mess with the codes, the beauty of WordPress is, they have plenty of plugins out there. You'll explore the best plugins to add Facebook buttons and widgets.

In this article, I'll walk you through both the processes of adding Facebook widgets on your website.

1

Adding Facebook Buttons Using Official Facebook Developers Page (via manual code snippets)

In this method we'll discuss the process of adding Facebook follow buttons with the XFBML code that you can get from the developers page.

PLEASE NOTE: All the processes in the manual method of adding Facebook widgets to your blog, you get 2 code snippets. If you're adding more than one button, you need to add the first snippet only once because it is the same for all the buttons.

1. Adding Facebook Like & Share Button On WordPress Sites

How to add Facebook like & share
  • Head over to the official Facebook like button page.
  • Click on the "like button configurator" button.
  • In the next screen, you get various options to customize your like button, namely the URL to like (ideally this should be your Facebook business page, but you can place any link you want), the layout of the button (box format, button format etc).

    There are other options like adding Facebook share button along with the like button or showing the faces of likers along with the button etc.

    Choose what you want.
  • After you've zeroed in with what layout you want, click on the "get code" button to generate the code.

This will activate a popup window which will have your Facebook like/share button HTML code to be added on your WordPress website.

Code to add Facebook like and share button

This pop up generates two codes out of which 1st one (marked as part 1 in the image) has to be added to your theme's footer.

Now, if you have a SEO optimized WordPress Theme like StudioPress, you can do it with a breeze because they have inbuilt settings to add codes to your theme's header and footer.

However, if you do not have StudioPress, you can do with by adding insert headers and footers plugin.​ Then place the above code to the header space of the plugin.

You can add the 2nd part of the code to whatever page​/post you want the button to appear on. If you want to display Facebook like button on the sidebar of your blog, add the code to a text/HTML widget.

That's it!

2. Adding Facebook Follow Buttons To WordPress Sites

Procedure to add Facebook follow
  • Head over to the official Facebook follow button page.
  • In the next screen, you get various options to customize your follow button. Add your profile URL, width of the button and the layout of the follow widget you want.

    There are other options like adding Facebook share button along with the like button or showing the faces of followers along with the button etc.

    Choose what you want.
  • After you've finalized what layout you want, click on the "get code" button to generate the code.

In the next pop up you get two code snippets.

Code to add Facebook follow button

The first part has to be placed before the closing header tag (use this plugin) and the 2nd part of the code has to be added wherever you want the button to appear.

3. Adding Facebook Save Button To WordPress Blog via Facebook Developers Option

Facebook save button enables the users to save a specific item, article or service to a private list that can be shared with friends. Users can then use it to receive updates and notifications about those items. 

This can come handy if you're a small business website and run offers and deals for your customers. Here is how to add a "Facebook save button"​ to WordPress.

Procedure to add Facebook save button
  • Head over to the official Facebook save button generator page.
  • In the next screen, enter the website link or product link that you want people to save on Facebook.
  • After you've finalized what layout you want, click on the "get code" button to generate the code.

In the next pop up you get two code snippets.

Adding Facebook Save Button code to WordPress

The first part has to be placed before the closing header tag (use this plugin) and the 2nd part of the code has to be added wherever you want the button to appear.

4. Adding Facebook Send Button To WordPress Blog via Facebook Developers Option

Facebook send button helps people to privately send your articles/pages to their friends on Facebook. This is a great method of sharing for those who don't want to clutter their personal profiles with sharing publicly.  

Here is how to add a "Facebook send button"​ to WordPress.

How to add Facebook send button to WordPress
  • Head over to the official Facebook send button generator page.
  • In the next screen, enter the website link or product link that you want readers to share on Facebook.
  • After you've finalized what layout you want, click on the "get code" button to generate the code.

In the next pop up you get two code snippets.

Adding Facebook Send Button code to WordPress

The first part has to be placed before the closing header tag (use this plugin) and the 2nd part of the code has to be added wherever you want the button to appear.

2

Adding Facebook Buttons & Widgets Using WordPress WordPress Plugins

1. Facebook Button By BestWebSoft:

(Adds Facebook Like, Share & Follow Widgets)

Plugin to add Facebook buttons to WordPress

Facebook button by BestWebSoft is the only WordPress plugin that can add Facebook  like, share and follow buttons to your blog. 

Feature Highlights:

  • Best plugin to add like, share and follow buttons
  • Allows full customization including colour scheme, layout, button positions and more.
  • Multi-language compatibility.
  • Choose action for like button.
  • Easy to set up.

2. FB Save Button For WP Plugin

Plugin to add Facebook save buton to WordPress

FB Save Button for WP does what it is named after. It allows you to add a save button to your WordPress site. You have the freedom to choose where you want to place the save button like above the post and below the post.

FB save button plugin also has shortcode options to add save widget wherever desired.​

Feature Highlights:

  • Allow addition of save button in posts or pages.
  • Allow addition of button after or before the content
  • Shortcode options
  • Very easy to set up

3. FB Send Button For WordPresss Plugin

Facebook Send Button for WordPress plugin allows you to add send button on your WordPress blog. With Send button, your readers can send your post to their friends. 

They also can share the article/page link to groups they are a part of.

Feature Highlights:

  • Allow addition of send button in post or page
  • Allows addition of send button in post or page
  • Shortcode options using the code [wpfbs]. For example, [wpfbs link="http://example.com/"] places a send button.
  • Very easy to set up

How to Add Facebook Like and Follow Button With Images?

There is another alternative method to add Facebook buttons through images. This works in a similar manner you do to add a simple clickable image widget on WordPress.

If you do not want to mess up with codes or don’t want to take a toll on your server resources with plugins, you can try adding Facebook buttons images and add clickable links to them.

N.B. This method will only work for creating Facebook like button images for pages and follow button images. It is not suitable to create share/send or save button images for each and every article manually.

This method works for:

  1. Facebook follow buttons
  2. Facebook page like buttons
  3. Clickable buttons for Facebook Live and audience network
  4. Clickable button images to direct users to join your Facebook group etc.

Step by step process of adding Facebook widgets via clickable images:

  1. Get your desired Facebook like and follow button images from official Facebook branding assets site or download some fancy ones via regular sites.
  2. Upload each image to your WordPress editor as you do while writing a blog post.
  3. Click the image to add link to your desired action. Like if it is a “follow us on Facebook button” image, add link to your profile page and so on.
  4. The go back to the text mode to get the HTML code of the whole thing.
  5. Add it to a text widget (to place it on the sidebar as a widget) or add it on a blog post/page.

Wrapping Up: The Easiest Way to Add Facebook Buttons With Codes To WordPress

With the above methods, you can easily add Facebook like, share, follow & send buttons to your WordPress sites. Like I said, manual methods are the best, but you can go plugins way if you don’t want to hassle with the codes.

If you’re adding codes to get the Facebook widgets, make sure to backup your site. This will help you go back to a restore point in case you mess up.

P.S. If this article helped you, kindly share it on your favorite social networking site using the buttons on the side. We appreciate your help.

Comments (6)

  • Hello, Swadhin!

    I’d actually opt for the technical method (first in my case) to add the FB Like/Follow buttons because you made it very clear and easy to apply. 🙂

    And that’s better to avoid using plugins while you can take advantage of the theme files. 🙂

    So simple and effective share of the methods, buddy!

    ~ Adeel

    Reply
  • Hi Swadhin
    Great information indeed.
    I still am confused. I purchased a course from Udemy of WordPress development. Most of the things are clear to me. But all I want to is the code to put for facebook, twitter and linkedin share link.
    I mean what function to use at the place of URL so that my custom share buttons in the theme file work smooth.
    I have tried many place but nothing works

    Reply
    • Author

      Hi Vashishtha,
      I think you missed reading this post. 😉

      This post is about how to add Facebook buttons from the official site without having to use any plugin (and some plugins that you can use).

      What you are asking falls in the realm of theme development/plugin development which clearly isn’t the topic here not is it within the scope of this article.

      As far as your question about adding social share buttons and calling them via functions is considered I am of no help to you since this isn’t my forte, neither the topic here.

      How about mailing the course developer or asking any WordPress theme developer the same?

      Glad to see you around. 🙂

      -Swadhin

      Reply
  • Ok Thanks
    I will ask the course developer
    thanks

    Reply
  • Nice article. I was just looking to add my Facebook Business page on WordPress Blog but I couldn’t find out the right way to add this but article help me a lot to add Facebook Like & Follow Buttons on WordPress blog.

    So thanks for this article !!!

    Reply

Leave a Reply

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