Alternative badge for Facebook pages

Some time ago I was quite closely involved in the development of various applications for facebook and, accordingly, some of the projects in the “for the soul” format were associated with this social network. One of these projects will be discussed in this article, namely, an alternative badge for facebook pages. The embarrassing appearance of native badges served as a push to the implementation. The source of inspiration was the approach to this issue from Google+. The basic tasks were simple - easy to install and configure, and besides the maximum possible cross-browser.

Sources + Demo

• Project sources on GitHub
• Demo page

Installation

1. Downloading the latest version of the FBplus.badge library from the project repository on GitHub
2. We connect the style file
   

   <link rel="stylesheet" href="{  }/fbplus.badge.css"> 

   
   
3. Add the widget code to the page
   

    <div id="FBplusBadge" data-width="240" data-href="https://facebook.com/{page name}" data-rel="page" data-theme="light" data-lang="en"></div> 

   
   

    <script type="text/javascript"> (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = '{  }/fbplus.badge.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> 

   
   

* Widget installation example can be viewed here.
')

Customization

Customizing the widget is done by changing the values ​​of the data attributes.

Title attribute	Value default	Short description	additional information
data-width	240 px	widget width	value must be in the range of 160 - 420 pixels
data-href	---	page address	it is allowed to use both the full address of the page and only its name
data-rel	page	page type	at the moment the widget is relevant only for facebook page
data-theme	light	design theme	may be “light” or “dark”
data-lang	en	widget language	The following values ​​are available: "En" - English "De" - German "Fr" - French "It" - Italian Es is spanish "Pt" - Portuguese "Ru" - Russian language "Ua" - Ukrainian language

Supported browsers

Google Chrome, Firefox, Safari, Opera, Internet Explorer 8+

Additionally

Examples of the appearance of widgets when choosing a dark theme



PS I would be grateful for constructive criticism