If you share a link of a website on Facebook, then Facebook will display the title, description and an image of that website. If you are a webmaster, then you can define what will be shown on Facebook. Let’s have a look at my example:

<title>Der Blog von Benny Neugebauer</title>
<meta name="description" content="Benny Neugebauer schreibt in seinem Blog über Tipps und Tricks in der Webentwicklung. Zu den Themen zählen JavaScript, Java, PHP, HTML5, SEO und Photoshop." />
<meta name="medium" content="blog" />
<link rel="image_src" href="http://www.bennyn.de/images/logo.png" / >

Explanation:

1. Facebook will show the standard HTML title of your webpage.
2. You can set description, which will be shown. It can be 160 characters long but to be compatible with the Google search, it should not be longer than 130 characters.
3. It is recommended to determine the type of your website. Possible values are: audio, image, video, blog, news and mult (multiple).
4. Finally you can set a thumbnail picture for your website. The size should be 100×100 pixels.

Here is the final result of my customization:

More information can be found in the Facebook Share documentation.

To create a custom twitter button you need to encode some strings and insert a few lines of JavaScript. This is how it can be done:

HTML code:

<a id="twitterLink" target="_blank">
  <img src="./images/twitter.png" alt="Twitter button" />
</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

JavaScript code:

var url = window.location.href.split('?')[0];
var twitterUrl=encodeURIComponent(url);
var twitterText=encodeURIComponent('Hello World:');        
var twitterLink='https://twitter.com/share?text='+twitterText+'&url='+twitterUrl+'&count=none';
document.getElementById('twitterLink').href=twitterLink;

Wer viele console.log() Einträge in seinem JavaScript-Code hat, sollte diese Einträge beim Live-Schalten der Webseite unbedingt entfernen. Um auf Nummer sicher zu gehen, dass beim Endanwender auch wirklich keine Log-Einträge zu sehen sind, empfiehlt es sich, die console.log()-Funktion zu überschreiben und somit unbrauchbar zu machen:

var console = {};
console.log = function(){};

Übrigens, Internet Explorer Version 8 und älter können mit console.log nicht umgehen und zeigen stattdessen nur Fehler an. Daher empfiehlt es sich immer, auf console.log in der Produktivumgebung zu verzichten.

With JavaScript it is easy to get the current URL of the website. You can get the URL with and without parameters. This is how you can do it:

console.log(document.URL); // http://www.bennyn.de/sth/index.html?param=value
console.log(window.location.href); // http://www.bennyn.de/sth/index.html?param=value
console.log(window.location.href.split('?')[0]); // http://www.bennyn.de/sth/index.html
console.log(window.location.pathname); // /index.html

You can define CSS declarations only for Mozilla Firefox by using the following scheme:

<style type="text/css">
  @-moz-document url-prefix() 
  {
    html
    {
      background: url('https://developer.mozilla.org/@api/deki/files/274/=Moz_ffx_openStandards_1680x1050.jpg') no-repeat;
    }
  }
</style>

To center an image properly in a HTML page you have to make it a block element. This can be done with CSS like this:

HTML:

<img id="logo" src="images/timer.png" />

CSS:

#logo{
  display: block;
  margin: 0 auto;
}