The Facebook like button, usually just referred to as the like button, has long-since broken out of the confines of its native social network. This famous “thumbs up” icon can be found on a diverse range of websites, blogs, and web apps, giving visitors the op­por­tu­ni­ty to show their ap­pre­ci­a­tion for a company, celebrity, or par­tic­u­lar content. Meanwhile, with the help of an in­te­grat­ed Facebook share button, users can show content that they find in­ter­est­ing or en­ter­tain­ing with their circle of friends – allowing brands, messages, or posts to spread around the world quicker than ever before. So why exactly is this social media plugin fast becoming a rite of passage for website operators? We’ll take you through the basic in­for­ma­tion and benefits behind the use of social media widgets as well as show you how to add your own Facebook like button.

What are the Facebook social plugins?

The like and share buttons are two of the core com­po­nents that make Facebook what it is. These two clickable features, both of which have undergone numerous optical ad­just­ments over the years, are the driving force behind user net­work­ing and content cir­cu­la­tion on the social network market leader. Almost all other social networks have since copied the concept and im­ple­ment­ed similar buttons or widgets of their own. Since 2010, it’s been possible to embed these icons into other web projects outside of Facebook as well. To help with this, the internet giant has provided its own social plugins that can be im­ple­ment­ed pretty easily: Thanks to the in-house con­fig­u­ra­tor, they’re easy to fit in with your web project and available as iFrame or JavaScript ap­pli­ca­tions. For many content man­age­ment systems – like WordPress for example – there are ad­di­tion­al ex­ten­sions that can help you with the embedding of Facebook buttons as well.

Social signals: the benefits of embedding Facebook buttons

Social networks provide the perfect channels to share content and form a direct line of contact to customers, readers, and fans. With its afore­men­tioned like and share functions as well as the option for leaving comments, Facebook does this perfectly. Feedback from users that is given along such lines, also referred to as social signals, plays a decisive role in de­ter­min­ing online success for a number of reasons:

  • The more reactions your posts receive, the greater the chance of other authors, bloggers, or private users seeing your content and linking to it. This results in valuable, topic-relevant backlinks – which in turn has a very positive effect on your search engine ranking.
  • Backlinks, mentions, and likes increase your reach and authority con­cern­ing relevant keywords. This can be of benefit in gen­er­at­ing new customers, readers, or fans. It’s also likely to add an ad­di­tion­al positive effect on your web presence.
  • Positive social signals are reflected in traffic growth in the long term too – another plus point that helps you to achieve a better ranking in Google’s SERPs.

The above points prove that even if user signals on social media don’t count directly towards your ranking on Google and Co., they still have a huge positive influence on your search engine po­si­tion­ing. The basic re­quire­ment for this is to provide high-quality, in­for­ma­tive content that leads to likes, shares, and comments – and built-in Facebook like and share buttons on external sites can help you to expand the reach of this content sig­nif­i­cant­ly.

How to add a Facebook like button to your website

In order to generate an official Facebook like button or share button, you’ll need the cor­re­spond­ing code con­fig­u­ra­tor, which can be found in the Facebook de­vel­op­ment area ‘Facebook for De­vel­op­ers’. In the next section, we’ll explain how you can create a like button using this tool. But first, it’s necessary to access the Facebook overview page for de­vel­op­ers in order to see the full list of social plugins available. Once you’re on this page, select the ‘like’ button.

Image: Facebook offers functions that allow you to integrate a variety of social plugins into your external website
Facebook for developer’s nav­i­ga­tion menu

On the following page, you’ll find a little in­tro­duc­tion as well as a step-by-step guide to in­te­grat­ing your own Facebook like button. The third section contains the con­fig­u­ra­tor you’ll need, although it can also be located in the menu listed above. You’ll need to fill out the following options fields for the web tool in order to generate a code:

  • URL to Like: the social plugin requires the internet address for your Facebook page so that the button can be linked to it later. Enter the full URL of your company Facebook page in this field.
  • Width: the ‘width’ option allows you to define the width of your like plugin in pixels. The standard width for the like button plugin is 450 pixels, with the minimum width set at 225 and the maximum 625.
  • Layout: the layout field allows you change the ap­pear­ance format for the Facebook button. This mostly affects the po­si­tion­ing of the number of people who have already in­ter­act­ed with your Facebook page via this social plugin. It’s a common mis­con­cep­tion that this figure only shows the number of likes that a page has received. In fact, it combined the number of likes, shares, and comments into one figure.
  • Action Type: the action type has no direct effect on the func­tion­al­i­ty of the button. Instead, it just affects the wording. If you choose to keep the standard setting of the ‘like’, then you’ll take advantage of the classic variant and users who click on the button will inform their Facebook news feed au­to­mat­i­cal­ly that they like your page. The al­ter­na­tive option, ‘recommend’ allows your user to recommend your content, company, or blog to their friends. The variation is designed pre­dom­i­nant­ly with editorial posts in mind, where the positive statement made by the ‘like’ button may be in­ap­pro­pri­ate – in the case of a natural disaster or similarly negative events, for example.
  • Button Size: you also have the option to change the size of your button. For smaller button displays, you should stick to the default size ‘small’. But if you want a bigger like button to help it stand out more on your page, then you can do so by changing the size to ‘large’.
  • Show Friends’ Faces: if site visitors are logged into Facebook while viewing your web project, then the social plugin can display ad­di­tion­al profile pictures of their friends who have already liked your Facebook page. To implement this feature, all you need to do is check the tick box in the options field.
  • Include Share Button: you don’t have to implement a Facebook share button sep­a­rate­ly. If you’ve checked this box, then a share option will be au­to­mat­i­cal­ly in­te­grat­ed alongside the like button plugin.
Image: Facebook offers several options to customize your like button integration
The Facebook con­fig­u­ra­tor code for designing your own like button plugin

After com­plet­ing all the options fields, you can now create the code for your Facebook like button by clicking on the ‘Get Code’ button. Select your Facebook app ID and you’ll now receive the embedding code for the Facebook JavaScript SDK (Software De­vel­op­ment Kit), that you must first integrate into your website as its own plugin code (ideally after the open <body> tag). Now you can add this plugin code into your HTML document in the place where you want the button to appear.

Attention

If you don’t own a Facebook app ID, you can create one easily in the social plugins menu. Simply log in with your Facebook account and choose ‘Add New App‘, which can be found un­der­neath ‘My Apps’ in the top menu listed above. Here, you can enter the display name for your ID as well as your contact e-mail address and chosen category.

Image: This is a generated code for a Facebook like button, ready to be integrated into your website
The JavaScript SDK and in­di­vid­ual code of a Facebook like button

If you want to work with an iFrame instead of the JavaScript code, then simply select the cor­re­spond­ing tab in the pop-up window and copy the iFrame code into your web project. In this case, you won’t need the JavaScript SDK anymore.

Image: The same code, but this time in iFrame format
The iFrame variation of a Facebook like button code

The Facebook share button doesn’t have to be created in the same package as the like button: simply select the ‘Share’ button from the menu and generate a second social button in exactly the same way as you did for the like button with the help of the con­fig­u­ra­tor.

What are these two code varieties and what are their dif­fer­ences?

Although the two versions are very similar to one another in their basic function, it does make a dif­fer­ence whether you opt for a Facebook button in the form of an iFrame or a JavaScript ap­pli­ca­tion in your web project. Since both social plugins are hosted by Facebook, the social network au­to­mat­i­cal­ly knows whether the user is logged in – and if they are, it will display a per­son­al­ized form of the button. In the case of the iFrame, this per­son­al­iza­tion comes in the form of a list of all of the site visitor’s friends who have pre­vi­ous­ly liked this website or post (including their profile pictures). If the site visitor isn’t logged in or even doesn’t operate a Facebook account, then an in­vi­ta­tion or prompt to log in or register will au­to­mat­i­cal­ly appear. The JavaScript plugin has an ad­di­tion­al benefit – it allows users to add a comment when they click on the like button.  Unlike the iFrame, which is a single HTML element, the JavaScript version also requires you to embed the Facebook SDK as well as the button code line. You can also use this powerful developer kit to integrate a login feature to the social network. In order for Facebook to display these per­son­al­ized buttons, the user’s browser contacts the Facebook servers au­to­mat­i­cal­ly. If the user is logged into the social network, or has been logged in pre­vi­ous­ly, and calls up a page that has a social plugin, then the user can be iden­ti­fied precisely. But this does mean that in return, Facebook receives in­for­ma­tion such as the access time, user ID, or even in­for­ma­tion about the browser being used and the in­di­vid­ual IP address. The social media giant has pre­vi­ous­ly expressed that it reserves the right to store and use this collected data in order to improve its own products and services as well as to optimize targeted ad displays. This has led to some countries, including Germany, declaring this tra­di­tion­al approach to include the Facebook like button and other social plugins to be unlawful.

An al­ter­na­tive to embedding: simple, CSS-designed HTML links

Shariff is a modern solution to the problem of sharing social media content directly through other websites and platforms. This open source project has been published and developed by Heise through the open platform GitHub, where you can download the source code. A Shariff sharing button is basically nothing more than a simple static link that’s been in­di­vid­u­al­ly designed to look like a typical share button from one of the popular social media platforms like Facebook, Google+, and Twitter, with the help of the stylesheet language CSS (sheriff.min.css files). This means that the de­vel­op­ment team at Heise didn’t have to rely on ordinary graphics, it instead opted for flexible vector icons that remain sharp in high-res­o­lu­tion displays and can be placed on either your own private server or via the content delivery network MaxCDN. To ensure you don’t have to enter the URL of the static link manually, Shariff au­to­mat­i­cal­ly writes it into the source code via JavaScript (shariff.min.js files). You can then implement the button easily using a <div> container and the class sheriff, which can be easily po­si­tioned wherever you want the button to appear in the <body> section of your web project. In its simplest form, the source text of a page will look as follows: 

<!DOCTYPE html>
<html>
<head>
    [...]
    <title>your website</title>
    <link href="shariff.min.css" rel="stylesheet">
</head>
<body>
    <h1>your article</h1>
    <p>[...]</p>
    <div class="shariff"></div>
    <script src="shariff.min.js"></script>
</body>
</html>

If you use an optional server component, it’s even possible to receive and display in­for­ma­tion about the number of site visitors that have used your in­te­grat­ed Facebook share button. For this purpose, Heise has developed three backends – a PHP, a Perl, and a Node.js version as well as out­sourced modules for Facebook, Google+, and Twitter. The backend sends a request to the server of the network via the cor­re­spond­ing API, and in turn it receives a col­lec­tion of Meta data as an answer, from which it can then extract the in­for­ma­tion regarding where the targeted URL has been shared.

In­te­grat­ing social plugins into your own website – a summary

Linking your own website to your social network pages via buttons can make it much easier to dis­trib­ute your content. This isn’t just true of Facebook – it applies to all other platforms that you’re active on. If you open up a dialog with your users and regularly publish high-quality content, then the chances are your website traffic will benefit from social signals in the long run. The social plugins that Facebook (and other social media channels like Google+ or Twitter) offers to help you embed your buttons are really helpful, fast, and un­com­pli­cat­ed, but there are also other ways to include social media buttons that don’t com­pro­mise data pro­tec­tion, like the Shariff tool from Heise for example.

Shariff doesn’t share data to the server with the social network in question until your site visitors have agreed to it, thanks to the power of static links. By using links like this with button optics, you can enjoy the benefits of linking from your website to your social media profiles without having to hand over your site visitors’ personal data to the social media giants au­to­mat­i­cal­ly.

Go to Main Menu