Compact Share Buttons

The Essential Social Media Share Buttons for Your Website.

Advantages

  • Easy setup, easy to integrate in your website: Simply copy the code to the desired position in your HTML document.
  • No privacy concerns: The button code is completely embedded in your website. No external requests, no cookies, no tracking. As an alternative you have the option to host the code on your server or webspace.
  • Fast: No performance problems.
  • Responsive size: The size of the buttons depends on the CSS font-size of the parent element.
  • Scalable: The buttons look crisp on Retina displays and at all zoom levels.
  • Free customizable by your own CSS (for instance via child selectors, see the HOWTO section) or code modifications.
  • Free of charge. This website is solely funded by the advertisements on this website.

Generator

Preview

Settings

Choose Services

Facebook
Twitter
Google+
Reddit
WhatsApp
Mail
Info Link

Button Appearance

10%

Optimizations (Code Size Reduction)

fontawesome.io

Installation

The code is optimized for HTTP compression (enabled on most websites). Depending on your settings the maximum compressed size will be about 2.7kB. Embedded in your HTML code the compression ratio may even increase.

Approximate code size (uncompressed / gzip compressed):

Copy and paste the code into your site:*



*Alternatively you can download the code and install it as an external JavaScript file on your server or webspace.

HOWTO...

...select the buttons in my style sheet?

Example: Put the button code inside of a DIV container, give the container a class name. Like this:

<div class="buttons-social">

	YOUR BUTTON CODE

</div>

Now you can use the following rule to apply CSS declarations to each button:

.buttons-social>a{

	YOUR CUSTOM CSS DECLARATIONS

}

Use the following rule to apply hover effects to each button:

.buttons-social>a:hover{

	YOUR CUSTOM CSS DECLARATIONS

}