Social Sharing
Add social sharing links and buttons without the bloat.
Add social sharing links and buttons without the bloat.
The widgets provided by Twitter, Facebook, and other services require numerous HTTP requests and can really hurt the performance of your sites and apps.
These simple CSS and HTML snippets make it easy for you to go social - without hurting site performance.
A few simple classes turn button
and a
elements into branded social media buttons.
<a class="btn btn-tweet" href="#">Tweet</a> <a class="btn btn-facebook" href="#">Share</a> <a class="btn btn-google" href="#">Google+</a> <a class="btn btn-linkedin" href="#">LinkedIn</a>
To include sharing links for Twitter, Facebook, Google+ and LinkedIn, just add your URL's and titles where indicated in these snippets.
Make sure to replace spaces with %20
in your article and page titles.
<a target="_blank" href="https://twitter.com/intent/tweet?text=YOUR-TITLE&url=YOUR-URL&via=TWITTER-HANDLE">Twitter</a>
<a target="_blank" href="http://www.facebook.com/sharer/sharer.php?u=YOUR-URL">Facebook</a>
Google+
<a target="_blank" href="https://plus.google.com/share?url=YOUR-URL">Google+</a>
<a target="_blank" href="http://www.linkedin.com/shareArticle?mini=true&url=YOUR-URL&title=YOUR-TITLE&summary=YOUR-SUMMARY&source=YOUR-URL">LinkedIn</a>
To add icons to your share links, try using icon fonts.
If you'd prefer to offer a single sharing icon that reveals all sharing options, also include Modals or Houdini.
Social Sharing works in all modern browsers, and IE 6 and above.