About
Why HTML only buttons?

First of all sharing and like buttons offered by Twitter, Google+, LinkedIn, vk.com and Facebook comes with their own Javascript code, each request for scripts to social networks servers slows down page loading time, and users (visitors) have to wait until each of them is loaded (DNS lookup, HTTP request, then response, - and all buttons comes with images), then parse page, then rebuild DOM, then do something else like creating third-party cookies, collecting info, spinning, fishing :) - we hope it's a joke, but who knows?

One more thing - Those social share/like buttons is out of your styling control. But when you using RESTful API, other words HTTP GET, other words Links - You can do what ever you can imagine - today we're offering to use imagination of Twitter Bootstrap 3 developers, - the standard TWBS flat buttons and add iconic font - Font Awesome.

Please find an examples at CodePen and JSFiddle. For comments, questions and contributions use our GIST.

Initial preparing

Create additional classes for social colors and one for google-plus-one button. Note: all values passed in RESTful URLs must be url encoded. To encode in JavaScript use encodeURIComponent('string') function. In PHP use rawurlencode() function.

Links:

[HTML] Link Twitter Bootstrap 3 and Font Awesome CSSs:

<!-- In <head> element add: -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"/>

[CSS] Initial button styles:

/*Next create separate CSS file or */
/*add to <head> element <style> element with: */
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
}

/*Special classes for surfingbird: */
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 +1 button styles: */
.google-plus-one{
   overflow: hidden;
   position: relative
}

.google-plus-one i{
   position: absolute;
   left: -12px;
   bottom: 2px
}

.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: 2px;
  left: -8px
}
.btn-lg.google-plus-one span{
  font-size: 20px;
  margin-left: 18px
}
.btn-lg.google-plus-one i{
  bottom: 2px;
  left: -16px
}
.btn-xs.google-plus-one span{
  font-size: 12px
}
.btn-xs.google-plus-one i{
  bottom: -2px;
  left: -13px
}
Facebook › Share

Traditional link sharing, on Facebook on your time-line

  • u: URL to Share

Note: Previously used t query parameter used to set custom text below link, - is not supported by Facebook anymore.

[HTML] Example:

<a href="http://www.facebook.com/sharer.php?u=_URL_" class="btn btn-default">
  <i class="fa fa-thumbs-o-up fa-lg fb"></i>
</a>
Facebook › Like Button

Like provided URL, with additional facebook timeline sharing.

  • href: URL to Like

[HTML] Example:

<a href="http://www.facebook.com/plugins/like.php?href=_URL_" class="btn btn-default">
  <i class="fa fa-thumbs-o-up fa-lg fb"></i>
</a>
Twitter › Tweet

Tweet provided URL, with additional text.

  • url: URL to Tweet
  • text: Text
  • via: Your website's twitter name

[HTML] Example:

<a href="http://twitter.com/share?url=_URL_&text=_ADDITIONAL_TEXT_&via=TWITTER_NAME" class="btn btn-default">
  <i class="fa fa-twitter fa-lg tw"></i>
</a>
Google › Plus One (+1)

+1 provided URL on Google.

[HTML] Example:

<a href="https://apis.google.com/_/+1/fastbutton?usegapi=1&size=large&hl=en&url=_URL_" class="btn btn-default google-plus-one">
  <i class="fa fa-google-plus fa-2x google"></i>
  <span class="google">1</span>
</a>
Google Plus › Share

Share provided URL on Google Plus.

  • url: URL to Share

[HTML] Example:

<a href="https://plus.google.com/share?url=_URL_" class="btn btn-default">
  <i class="fa fa-google-plus fa-lg google"></i>
</a>
LinkedIn › Share

Share provided URL at LinkedIn Network.

  • url: URL to Share

[HTML] Example:

<a href="http://www.linkedin.com/shareArticle?url=_URL_" class="btn btn-default">
  <i class="fa fa-linkedin fa-lg linkin"></i>
</a>
vk.com › Share

Share provided URL on VK (Vkontakte - vk.com).

Note: Vk.com won't parse your page, so to display title, description and image you need to specify it in URL.

  • url: URL to Share
  • title: Website (page) title
  • description: Website (page) description
  • image: URL to Website (page) image
  • All options and docs

[HTML] Example:

<a href="http://vk.com/share.php?url=_URL_&title=_TITLE_&description=_DESCRIPTION_&image=_URL_TO_IMAGE_" class="btn btn-default">
  <i class="fa fa-vk fa-lg vk"></i>
</a>
Pinterest › Pin

Share provided Media on Pinterest within URL.

  • url: URL to Share
  • description: Website (page) description
  • media: URL to Meda/Image

[HTML] Example:

<a href="http://www.pinterest.com/pin/create/button/?url=_URL_&description=_DESCRIPTION_&media=_URL_TO_IMAGE_" class="btn btn-default">
  <i class="fa fa-pinterest fa-lg pinterest"></i>
</a>
Surfingbird › Surf!

Share provided URL on Surfingbird.

  • url: URL to Share
  • title: Website (page) title
  • description: Website (page) description
  • screenshot: URL to Website (page) image

[HTML] Example:

<a href="http://surfingbird.ru/share?url=_URL_&title=_TITLE_&description=_DESCRIPTION_&screenshot=_URL_TO_IMAGE_" class="btn btn-default">
  <i class="fa surfingbird fa-lg"></i>
</a>

In this article we offer a conceptual approach. You're free to modify our examples to fit your need. Or grab code as it is, if it fully satisfies you. If you found text above useful - add this page to your bookmarks and/or share it at your favourite social network.