The most recognizable social sharing button
What about to use another JavaScript framework on your website? Twenty of them is a current average with total size around 300Kb of JavaScript code. You can see detailed statistics at Craig Buckler’s blog.
Adding features connected with social networks is necessarily. The easiest way to share your webpage is with simple link. No third party JavaScript. No social buttons difficult to properly set.
Social buttons for Facebook
If you want to create original Facebook sharing link with image, you can generate this image from Facebook’s pages for developers. E.g. you can set your own text on this image. You can also modify these buttons to match you language or style of your webpages. The easiest way provides developer console of you favourite browser.
- Open pages for developers – Share Button Configurator.
- Locate “Share Button Configurator” section and select Layout to “button”. There is much more options, but user usually prefer just the most known choices.
- In your web browser modify buttons properties (usually with left click choose “Edit element”).
- Change text in “pluginButtonLabel” element:
<span class="pluginButtonLabel">Share</span> - You can repair rouded borders by modifying padding of this element:
padding: 0px 3px 0px 0px; - Turn this HTML element into image with screenshot. Even combination of Print Screen button and Microsoft Paint works.
The result can be a button such as 
or 
.
The rest of the configuration for optimal Facebook sharing is the same as with common social buttons. You have to set all meta tags (especially from Open Graph namespace) an check them with Facebook sharing tool. It has a little weird name “Open Graph Object Debugger” and it is not so easy to find.
Sharing links
The last important part is URL for social sharing. These links comes from older versions, because everybody wants to have his JavaScript on your webpage. You have to change links to point to your website.
Facebook marks this approach deprecated, but a lot of webpages use it anyway.
http://www.facebook.com/sharer.php?u=http://www.example.com/
You can also set own Twitter account name with “via” parameter. Twitter is more lightveight and sharing by link is still recommended option.
https://twitter.com/intent/tweet?url=http://www.example.com/&text=Page title
Google+
Also Google Plus use a lot of code, but this old approach allows two parameters, “url” for site and “hl” for a language code.
https://plus.google.com/share?url=http://www.example.com/
Keep it clear
Make clear and useful websites without spam code and happy sharing. Users cannot se differences between the newest frameworks and this simple links with images of social buttons.
Leave a Reply