Social buttons

Twitter
Twitter has 4 different buttons (share, follow, hashtag, mention)
https://twitter.com/buttons
https://twitter.com/about/resources/buttons

It is very easy to generate twitter button code to embed our website. From button website, select preferred button, and specify necessary options, then copy and paste the automatically generated twitter button source code.

Here is one example of tweet button
<a href="https://twitter.com/share" class="twitter-share-button" data-url="https://www.example.com/retweet.html">Tweet</a>
! function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0],
        p = /^http:/.test(d.location) ? 'http' : 'https';
    if (!d.getElementById(id)) {
        js = d.createElement(s);
        js.id = id;
        js.async = true;
        js.src = p + '://platform.twitter.com/widgets.js';
        fjs.parentNode.insertBefore(js, fjs);
    }
}(document, 'script', 'twitter-wjs');

Asynchronously load the button - by default, Twitter takes care of this. However, during my test, it seems not load in an async way, so I suggest to add js.async = true to above code.

https://dev.twitter.com/docs/tweet-button has details about adding buttons using Javascript, iframe or even build your own twitter buttons.

Bolt - twitter uses HTTP HEAD to crawl shared link, check out the discussion
https://dev.twitter.com/discussions/1722

Facebook
Facebook has Login, like, send, follow etc buttons.

Similar to twitter, facebook also provides a easy way to generate button codes on the fly. For details, check out https://developers.facebook.com/docs/plugins/

Take Facebook Like button as an example, https://developers.facebook.com/docs/reference/plugins/like/ has the UI to let developer get the social button code on the fly. Facebook Like button also provides 3 ways (HTML5, XFBML and iframe) to create button on website.

Here is one HTML5 example:
<div class="fb-like" data-href="https://www.example.com" data-send="false" data-layout="button_count" data-width="450" data-show-faces="true"></div>

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=yourappid";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Here is one iframe example:
<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.example.com&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=true&amp;font&amp;colorscheme=light&amp;action=like&amp;height=21&amp;appId=yourappid" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowTransparency="true"></iframe>

Note width=80 is a trick to not show Like comment UI

Async loading? js.async = true
 
http://www.aaronpeters.nl/blog/why-loading-third-party-scripts-async-is-not-good-enough
Load (some of) those scripts after onload to increase the usefullness of your web performance data.

Bolt - facebook uses facebook bolt to crawl links (URLs) shared on facebook.

Update  5/12/2013
http://www.phpied.com/social-button-bffs/ has a summary of FB/Tweet/Google+ buttons

Social buttons' Markup

<!-- facebook like -->
<div class="fb-like" data-send="false" data-width="280"></div>
<!-- twitter -->
<a class="twitter-share-button" data-count="horizontal">Tweet</a>
<!-- g+ -->
<div class="g-plusone" data-size="medium"></div>

JS codes

<script>(function(d, s) {
  var js, fjs = d.getElementsByTagName(s)[0], load = function(url, id) {
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.src = url; js.id = id;
    fjs.parentNode.insertBefore(js, fjs);
  };
  load('//connect.facebook.net/en_US/all.js#xfbml=1', 'fbjssdk');
  load('https://apis.google.com/js/plusone.js', 'gplus1js');
  load('//platform.twitter.com/widgets.js', 'tweetjs');
}(document, 'script'));</script>

Load after onload event
http://www.aaronpeters.nl/blog/why-loading-third-party-scripts-async-is-not-good-enough
<script> (function(w, d, s) { function go(){ var js, fjs = d.getElementsByTagName(s)[0], load = function(url, id) { if (d.getElementById(id)) {return;} js = d.createElement(s); js.src = url; js.id = id; fjs.parentNode.insertBefore(js, fjs); }; load('//connect.facebook.net/en_US/all.js#appId=272697932759946&xfbml=1', 'fbjssdk'); load('https://apis.google.com/js/plusone.js', 'gplus1js'); load('//platform.twitter.com/widgets.js', 'tweetjs'); } if (w.addEventListener) { w.addEventListener("load", go, false); } else if (w.attachEvent) { w.attachEvent("onload",go); } }(window, document, 'script')); </script>