Social buttons for sharing without JavaScript

Sharing social buttons Facebook

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.

  1. Open pages for developers – Share Button Configurator.
  2.  Locate “Share Button Configurator” section and select Layout to “button”. There is much more options, but user usually prefer just the most known choices.
  3. In your web browser modify buttons properties (usually with left click choose “Edit element”).
  4. Change text in “pluginButtonLabel” element:
    <span class="pluginButtonLabel">Share</span>
  5. You can repair rouded borders by modifying padding of this element:
    padding: 0px 3px 0px 0px;
  6. 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 Social button Facebook or Share Facebook button.

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

Facebook marks this approach deprecated, but a lot of webpages use it anyway.

http://www.facebook.com/sharer.php?u=http://www.example.com/

Twitter

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.

Spread the word...Email this to someoneTweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInShare on Tumblr
Posted in IT

Leave a Reply

Your email address will not be published. Required fields are marked *

*