Facebook’s Social Plugins for Developers: Part 1

Jacky Kimani
DevCNairobi
Published in
3 min readApr 4, 2017

Ever visited a website or used an app and saw Facebook’s Like button, Share button, Send button, Follow button or even embedded comments, posts or videos? Ever wondered how those small components got there? No? Well, if you haven’t used any of those yet, you should be wondering how they work and try them out.

Facebook enables developers to use these plugins to their advantage, this is possible especially when people sign into your site or app using their Facebook credentials. However, they do not need to sign in with Facebook to be able to do any of those actions that you’d like them to do. In this post we’ll be briefly looking at what these plugins are used for exactly.

Like Button

By including the Like button, you get to know how many people literally like your web content. In addition to that, if people like your content, other people who follow them can directly see this since their activity is shared on Facebook.

Share Button

The Share button enables your users to share your content onto their timelines, in groups or to specific friends on Facebook. They are also able to add their own personalized messages when sharing the posts.

Send Button

Enables your users to send your content to one or more friends using a Facebook message.

Save Button

Lets your users save content from your site to a private list on Facebook and they can share it with friends and receive notifications about the item or service when need be. They are also able to come back and revisit the content later on.

Follow Button

Lets people subscribe to your public updates on Facebook

For all the buttons simply follow the steps below,

Choose the URL of a Facebook page or a website which you want to use with the button, simply put this as the website or page which you want your users to like.

Go to the code configurator for any of the buttons and adjust the settings for the button. Generate the code by clicking on the Get Code button.

Finally, copy the HTML code generated and paste it where you want the Like button to appear.

Quote Plugin

This lets people select text on your page and add it to their share post.

Page Plugin

Lets you embed and promote any Facebook page on your site or app. This way people can like and share the page without leaving your site or app.

Comments Plugin

It lets people comment on your site using their Facebook accounts and they can choose to share their comment activity with their friends (and friends of their friends) on Facebook as well. The plugin also includes built-in moderation tools and social relevance ranking.

Embedded Comments

These can be used when you want to add public (only public) comments on a post from Facebook onto the content of your site.

Embedded Posts

These are used when adding public (again, only public) posts from Facebook onto the content of your site.

Embedded Videos

This plugin is used when adding Facebook videos or Facebook live videos to your website. The videos should be public. You can control the embedded video player and observe events fired by the player by using the Embedded Video Player API

You can change the language of the buttons or plugins by loading a localized version of Facebook Javascript SDK. If you decide to do so, remember to change the width of the button or plugin to fit all the content in it.

Look out for part 2 of the article where we’ll be taking a more hands-on approach and we shall be creating a simple web page and adding these plugins to our code.

--

--

Jacky Kimani
DevCNairobi

Software Developer at Andela && Editor at DevC Nairobi