Getting rid of JavaScript in social buttons (Facebook, VK, Twitter, etc.)
How we got rid of social networking JavaScript libraries, accelerated page loading speed, and used the RESTful API for sharing and likes.
All buttons of sharing and likes offered from Twitter, Google+, LinkedIn, vk.com, Facebook oblige us to embed their own JavaScript code into projects, each connected script executes requests and uploads additional files from third-party servers, each request “on side "slows down the page loading speed and increases the load on the user's device. The user is forced to wait until such processes as DNS-lookup, HTTP-request are completed, then the response includes the script itself, the styles and images used in the button.
This is followed by the process of checking the user for authorization in the social network, parsing the incoming information, rebuilding the DOM and drawing new elements. After all the necessary processes for the appearance of the button itself are over, the submerged script continues to work, sets third-party cookies, follows the user, his actions and preferences (this is where social networks show us the “right” advertising).
Another point is that all the “sharing / like” buttons are out of our control, both their behavior and the styles on the page.
We decided to use the RESTful API (aka HTTP GET) and a bunch of Twitter Bootstrap 3 + Font Awesome to implement the sharing and likes buttons from all popular social networks. This approach is applicable to any open REST-functional that does not require authorization of the application, any social network.
We connect TWBS3 and FA. Find the colors of social networking brands and write CSS styles for them. For Google+ and Surfingbird, create additional styles that place the logo in the button in the “right” way. Styles:
')
Find HTTP-endpoints from social networks , find out what parameters can be transferred via GET. Select the icon and check with the previously created CSS-styles. We will use the following markup:
Standard button for “sharing” URL with additional text.
HTTP endpoint:
Options:
Standard “like” for a specific URL.
HTTP endpoint:
Options:
“Tweet” with a link to the page and additional text.
HTTP endpoint:
Options:
+1 to URL
HTTP endpoint:
Options:
Share (“share”) URL.
HTTP endpoint:
Options:
Share (“share”) URL.
HTTP endpoint:
Options:
Share (“share”) URL. With the ability to specify the name of the site, its description and image.
HTTP endpoint:
Share media file and URL on Pinterest.
HTTP endpoint:
Share (“share”) URL. Keep in mind that Surfingbird does not parse the provided URL pages, all parameters below are required. Also in the Font Awesome there is no Surfingbird icon, we will add it as a picture.
HTTP endpoint:
An example with a full set of working buttons is on jsfiddle.net and codepen.io .
Useful links:
Why HTML and only?
All buttons of sharing and likes offered from Twitter, Google+, LinkedIn, vk.com, Facebook oblige us to embed their own JavaScript code into projects, each connected script executes requests and uploads additional files from third-party servers, each request “on side "slows down the page loading speed and increases the load on the user's device. The user is forced to wait until such processes as DNS-lookup, HTTP-request are completed, then the response includes the script itself, the styles and images used in the button.
This is followed by the process of checking the user for authorization in the social network, parsing the incoming information, rebuilding the DOM and drawing new elements. After all the necessary processes for the appearance of the button itself are over, the submerged script continues to work, sets third-party cookies, follows the user, his actions and preferences (this is where social networks show us the “right” advertising).
Another point is that all the “sharing / like” buttons are out of our control, both their behavior and the styles on the page.
We decided to use the RESTful API (aka HTTP GET) and a bunch of Twitter Bootstrap 3 + Font Awesome to implement the sharing and likes buttons from all popular social networks. This approach is applicable to any open REST-functional that does not require authorization of the application, any social network.
Training
We connect TWBS3 and FA. Find the colors of social networking brands and write CSS styles for them. For Google+ and Surfingbird, create additional styles that place the logo in the button in the “right” way. Styles:
Extra CSS style code
i.fb, span.fb{ color: #3b5998; } i.tw, span.tw{ color: #00aced; } i.google, span.google{ color: #dd4b39; } i.linkin, span.linkin{ color: #007bb6; } i.vk, span.vk{ color: #45668e; } i.pinterest,span.pinterest{color: #cb2027;} i.surfingbird{ max-height: 12px; min-width: 25%; } i.surfingbird::before{ content: url(http://bootstrap-ru.com/cdn/i/surf.png); position: relative; left:0px; top: -7px; float: left; } .google-plus-one{ overflow: hidden; position: relative; } .google-plus-one i{ position: absolute; left: -4px; bottom: -5px; } .google-plus-one span{ font-size: 16px; font-weight: 900; line-height: 10px; margin-left: 15px; } .btn-sm.google-plus-one span{ font-size: 14px; } .btn-sm.google-plus-one i{ bottom: -3px; } .btn-lg.google-plus-one span{ font-size: 20px; margin-left: 18px; } .btn-lg.google-plus-one i{ bottom: -5px; } .btn-xs.google-plus-one span{ font-size: 12px;} .btn-xs.google-plus-one i{ bottom: -7px; } ')
Create html-markup buttons
Find HTTP-endpoints from social networks , find out what parameters can be transferred via GET. Select the icon and check with the previously created CSS-styles. We will use the following markup:
<a class="btn btn-default" href=“addre.ss?param=_VALUE_” > <i class="fa fa-social-icon additional-class”></i> </a> Facebook Share
Standard button for “sharing” URL with additional text.
HTTP endpoint:
http://www.facebook.com/sharer.phpOptions:
u- urlt- accompanying text- UPD : To transfer the description of the page, use OpenGraph, discussion on SO
Facebook Like
Standard “like” for a specific URL.
HTTP endpoint:
http://www.facebook.com/plugins/like.phpOptions:
u- url
Twitter Tweet
“Tweet” with a link to the page and additional text.
HTTP endpoint:
http://twitter.com/shareOptions:
url- urltext- accompanying textvia- link to a Twitter account (for example, the official channel of the site)
Google Plus One (+1)
+1 to URL
HTTP endpoint:
https://apis.google.com/_/+1/fastbuttonOptions:
url- urlusegapi- Accepts valuestrue/false. Used to enable / disable the display of an additional “share” window.size- Accepts values:small,medium,standard(default),tallhl- Language, list of available languages
A complete list of accepted parameters can be found here .
Google Plus Share
Share (“share”) URL.
HTTP endpoint:
https://plus.google.com/shareOptions:
url- url
LinkedIn Share (Share)
Share (“share”) URL.
HTTP endpoint:
http://www.linkedin.com/shareArticleOptions:
url- url
VK.com (Vkontakte) Share
Share (“share”) URL. With the ability to specify the name of the site, its description and image.
HTTP endpoint:
http://vk.com/share.phpurl- urltitle- Site name (page)description- Description of the site (page)image-imageURL
A complete list of accepted parameters can be found here .
Pinterest Pin
Share media file and URL on Pinterest.
HTTP endpoint:
http://www.pinterest.com/pin/create/button/url- urlmedia- URL to the image or videodescription- Description of the site (page)
Surfingbird Surf!
Share (“share”) URL. Keep in mind that Surfingbird does not parse the provided URL pages, all parameters below are required. Also in the Font Awesome there is no Surfingbird icon, we will add it as a picture.
HTTP endpoint:
http://surfingbird.ru/shareurl- urltitle- Site name (page)description- Description of the site (page)screenshot- URL to the image with a screenshot of the site
The final code of the buttons combined in .btn-group
<div class="btn-group"> <button class="btn btn-default disabled" > Share: </button> <a class="btn btn-default" target="_blank" title="Like On Facebook" href="http://www.facebook.com/plugins/like.php?href=_URL_" > <i class="fa fa-thumbs-o-up fa-lg fb"></i> </a> <a class="btn btn-default google-plus-one" target="_blank" title="+1 On Google" href="https://apis.google.com/_/+1/fastbutton?usegapi=1&size=large&hl=en&url=_URL_" > <i class="fa fa-google-plus fa-2x google"></i><span class="google">1</span> </a> <a class="btn btn-default" target="_blank" title="On Facebook" href="http://www.facebook.com/sharer.php?u=_URL_&t=_DESCTEXT_" > <i class="fa fa-facebook fa-lg fb"></i> </a> <a class="btn btn-default" target="_blank" title="On Twitter" href="http://twitter.com/share?url=_URL_&text=_DESCTEXT_" > <i class="fa fa-twitter fa-lg tw"></i> </a> <a class="btn btn-default" target="_blank" title="On Google Plus" href="https://plusone.google.com/_/+1/confirm?hl=en&url=_URL_" > <i class="fa fa-google-plus fa-lg google"></i> </a> <a class="btn btn-default" target="_blank" title="On LinkedIn" href="http://www.linkedin.com/shareArticle?mini=true&url=_URL_" > <i class="fa fa-linkedin fa-lg linkin"></i> </a> <a class="btn btn-default" target="_blank" title="On VK.com" href="http://vk.com/share.php?url=_URL_&title=_TITLE_&description=_DESCTEXT_&image=_URL_TO_MEDIA" > <i class="fa fa-vk fa-lg vk"></i> </a> <a class="btn btn-default" target="_blank" title="Pin It" href="http://www.pinterest.com/pin/create/button/?url=_URL_&description=_DESCTEXT_&media=_URL_TO_MEDIA" > <i class="fa fa-pinterest fa-lg pinterest"></i> </a> <a class="btn btn-default" target="_blank" title="Surf!" href="http://surfingbird.ru/share?url=_URL_&description=_DESCTEXT_&screenshot=_URL_TO_MEDIA&title=_TITLE_" > <i class="fa surfingbird fa-lg"></i> </a> </div> An example with a full set of working buttons is on jsfiddle.net and codepen.io .
Useful links:
- Article in English: Social HTML-only Buttons
- The color palette of brands of social networks
- REST endpoints
- Libraries for generating buttons: shb and SocialButtons , UPD : shariff (request data on the server), Social Likes (jQuery plugin)
Source: https://habr.com/ru/post/250021/
All Articles