How to Add Facebook Widgets & Buttons to Your Website

Affiliate Disclosure: By buying the products we recommend, you help keep the lights on at MakeUseOf. Read more.

Advertisement

If you have a website, you might want to connect your audience with your Facebook Page. This allows your visitors to have a direct connection with your social media account. Once visitors start sharing and liking your posts, your content will reach an even larger group of people.

Unlock the free "Facebook Security Checklist" now!

This will sign you up to our newsletter

Enter your Email

The process of installing Facebook widgets on your website is simple. Here, we’ll go over the several different ways you can use a Facebook button for your website.

Adding Facebook Buttons

Not only do Facebook buttons help your website visitors share your content, but they’re also easy to install. Knowing how to strategically insert Facebook buttons on your website can make a huge difference in terms of traffic. If you own a business, you can even use these buttons to attract more visitors to your business’ Facebook Page How to Create a Facebook Business Page How to Create a Facebook Business Page All businesses should be using Facebook. Here's how to create a Facebook Business page for your own business. Read More .

The Like Button

Facebook Widget Like Button Code

If you’re new to Facebook 10 Essential Facebook Tips for Absolute Beginners 10 Essential Facebook Tips for Absolute Beginners To this day, Facebook is getting new users. Maybe you're one of them. If so, we've compiled a list of essential tips for Facebook beginners like you. Read More , you should know that Facebook’s Like button is the ultimate stamp of approval. Letting users Like your Facebook Page is a great way to get your users to interact with your content.

To create a Facebook Like widget for your website, head to Facebook’s Like Button Configurator. The process of creating the button is pretty straightforward—enter the URL you want your visitors to Like underneath the URL to Like heading.

After that, you can type in a custom width for your button, choose a size, and pick a layout. Checking off the box next to Include Share Button puts a Like button side-by-side with a Share button.

When you’re finished, hit Get Code to generate the Facebook Like button HTML code for your website. You can then copy this code and paste it onto your website.

The Share Button

Facebook Widgets Share Button Configurator

If you don’t want a side-by-side Like and Share button, you can opt to add the Facebook Share button widget by itself. When Facebook users click Share on a post or page, they can post that information to their timeline, post it on a friend’s timeline, or share it via Facebook Messenger.

Go to the Share Button Configurator to get started. This tool works just like the Like Button Configurator. Add the URL you want to share, customize the layout, and choose a button size. From there, hit Get Code to copy and paste this Facebook widget’s HTML onto your site.

The Save Button

Facebook Widget Save Button

Users can use the Save button to essentially bookmark an item, service, post, or page to a list that only they can see. This lets users revisit what they’ve saved, share it with their friends, and get notifications about any updates to the page or product.

Navigate to the Save Button Configurator, type in the link you want users to save, and then choose your button size. You can then select Get Code to copy and paste the code on your website.

Using Facebook Plugins

With plugins, you can embed elements of Facebook right into your website. That way, users can interact with your Facebook Page or group without leaving your website.

Page Plugin

Facebook Widgets Page Plugin

Want to connect your users directly to your Facebook Page via your website? Just use Facebook’s Page Plugin tool. Once you place this plugin on your site, users can Like and visit your Facebook Page from your website.

After typing in your Facebook Page URL, you can enter the width and height of the plugin, choose whether to integrate your Page’s cover photo, pick the size of your header, and even show the pictures of users who like your Page.

Finally, click Get Code to copy and paste the plugin onto your website.

Comments Plugin

Facebook Widgets Comment Plugin

The comments plugin is another handy tool that lets your site’s visitors use their Facebook profile to leave comments on your site’s content. If you want to get this on your website, navigate to Facebook’s Comments Plugin Code Generator.

First, type in the URL that you want users to comment on. You can then specify the width of the plugin and determine how many comments you want to display at once. Select Get Code to get the HTML snippet for your website.

Embedding Facebook Content

Facebook also provides you with the tools to embed Facebook content on your website—this includes videos, comments, and posts. It’s just another effective method to entice your site’s visitors to your Facebook page.

Embedding Videos

Facebook Widgets Video Embedding Tool

The easiest way to go about embedding a Facebook video is by using Facebook’s Embedded Video Player Configurator. Find the URL of the Facebook video you want to post, and then paste it into the URL of video box on the configurator tool.

After you’ve finished customizing the size of the video, you click Get Code for the generated HTML. Keep in mind that you can use this to embed Facebook Live videos How to Use Facebook Live How to Use Facebook Live If you'd like to know how to use Facebook Live but don't know where to begin, this introductory guide is for you. Read More as well.

Embedding Posts

Facebook Widgets Embed Post Tool

To display Facebook posts directly on your website, use Facebook’s Code Generator for embedded posts. Simply find the URL of the post you want to embed on your website and enter it into the generator.

You can then customize the size and the post length. Like all the other tools on this list, click Get Code to get the HTML snippet.

Embedding Comments

Facebook Widgets Embedding Comments Tool

Lastly, you can also use Facebook’s Comments Code Generator to embed comments on your website. You’ll need to find the link to the comment you want to add to your site. To do this, click the timestamp of the specific comment, wait for the page to reload, and copy the URL that appears in your address bar.

Paste the comment’s URL into the Comments Code Generator, and type in the desired size for the comment box. Hit Get Code, and you’re ready to add a comment to your website.

Effectively Using a Facebook Widget

If you decide to use a Facebook widget for your site, make sure that you use it appropriately. Placing tons of plugins and widgets all over your website will likely steer away visitors, rather than bring them in. Remember: less is more!

Want to get even better at using Facebook? Show off your geeky skills by using these awesome Facebook hacks The 6 Best Facebook Hacks to Show Off Your Geeky Skills The 6 Best Facebook Hacks to Show Off Your Geeky Skills There are some helpful Facebook hacks that most users won't know about. If you use them, they can show off your geeky skills. Read More .

Explore more about: Blogging, Facebook, Webmaster Tools.

Whatsapp Pinterest

Enjoyed this article? Stay informed by joining our newsletter!

Enter your Email

Leave a Reply

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

  1. Terrell
    April 7, 2018 at 3:26 pm

    Very good blog you have here but I was wondering if you knew of any community forums that
    cover the same topics discussed in this article? I'd really love to be a
    part of online community where I can get suggestions from
    other knowledgeable people that share the same interest.
    If you have any suggestions, please let me know. Thanks!
    cheap nfl jerseyshttp://astrovoyancefrance.fr/index.php/kunena/horoscopes/28808-network-users-info

  2. Gaye
    February 25, 2018 at 3:57 pm

    Here is our nfl toddler jerseys & cheack more details

  3. Charolette
    February 22, 2018 at 9:04 pm

    Nice weblog right here! Also your site quite a bit up very fast!
    What host are you using? Can I am getting your affiliate hyperlink in your host?

    I wish my web site loaded up as fast as yours lolcheap NHL jerseys; Carlos,

  4. Barry
    January 29, 2018 at 5:05 am

    You actually make it seem really easy with your presentation however I find this matter to be really something which I
    think I would by no means understand. It kind of feels too complex and extremely
    vast for me. I'm having a look forward to your subsequent submit, I'll attempt to get
    the hang of it!cheap NHL jerseys

  5. Diane
    January 14, 2018 at 9:26 am

    I've learn several good stuff here. Certainly worth bookmarking for revisiting.
    I wonder how a lot effort you place to make any such great informative website.cheap jerseys

  6. Kristan
    January 1, 2018 at 5:28 pm

    cheap official jerseys.Buy cheap official jerseys from
    China buy cheap jerseys factory, free shipping
    and easy returns also best service.

  7. Kiara
    November 20, 2017 at 2:38 am

    I am best replica soccer jerseys supplier online, take coupon code
    here: cheap nfl jersey sell

  8. Delilah
    October 19, 2017 at 7:02 pm

    Ebay same style football jerseys for cheap to offer. Online free shipping - cheap jerseys

  9. Zella
    September 14, 2017 at 10:53 am

    Which jerseys from China do you ever buy? Now this one site for sale:
    authentic jerseys from china

  10. Catharine
    September 7, 2017 at 5:33 pm

    Who do you want to gift for cheap jerseys authentic? Get value into the page: p14035415

  11. Evelyn
    August 2, 2017 at 6:54 am

    Here is our replica nfl football jerseys & cheack more details

  12. Stock images
    June 22, 2017 at 12:56 am

    Stock images aren’t all harmful if you are able to utilize them adequately. They are capable to create visually exciting and gripping content to your producing. They take out some of the design or outsourced digital photography you might want to generate into the size of your pocket. And they They could be very speedy visual content remedies on the fly. And on top of that, each our stock photos are 100 zero cost - examine us out and publish a lot more gripping content next time. You're encouraged!

  13. Carmel
    June 4, 2017 at 8:53 pm

    Very descriptive blog, I liked that bit. Will there be a part 2?

    cheap jerseys

  14. Fausto
    February 15, 2017 at 4:38 pm

    cheap nba jerseys Amazon Shopper online retail,with link: cheap
    jerseys authentic

  15. Romeo
    February 7, 2017 at 11:36 pm

    awesome page you got at this point what is everyones first thoughts on here page relating to on the run hack online

  16. JanetMaf
    January 18, 2017 at 2:30 pm

    freud mourning and melancholia essay
    free resume templates with color

  17. henry
    November 4, 2016 at 11:00 am

    thanks for sharing the informatio

    shoutmeloud.com

  18. kelly beard
    May 22, 2015 at 5:08 pm

    what does the little blue check mark mean in the search bar ...not in the search bar itself but like maybe a few names down??

  19. Joe
    March 25, 2015 at 6:06 pm

    great information, especially the badge piece. didn't know this was an option. Thank you!

  20. jerfrank
    December 16, 2014 at 4:09 am

    Steps are very clear, i'll follow this article to add my facebook Widgets & Buttons bo my website http://www.dell-driver.com

  21. Amelia
    September 12, 2013 at 6:08 am

    There's a website and it will help you just ripe in your phone number and the satellite will do the rest.

  22. Guest
    July 15, 2010 at 5:43 am

    Hi,

    In the case of like button, what do we do when our blog site does not support iframes?

    The like button included in this website... its simple and nice.. is there a widget available for the same?

  23. TechGyo
    June 9, 2010 at 6:10 pm

    I added it but sinec it is a frame, it gave me some problem in loading

    • Guest
      July 15, 2010 at 3:43 am

      Hi,

      In the case of like button, what do we do when our blog site does not support iframes?

      The like button included in this website... its simple and nice.. is there a widget available for the same?

  24. James Frm Dabasics
    May 22, 2010 at 7:52 am

    Need help creating a Facebook Fan Page? Then Click the link below :] [Broken Link Removed]