Social Media Share Buttons Code for Website

Social media is a big part of the online world. The social media sites such as Facebook, Twitter, reddit, LinkedIn and others are some of the most used sites on the Internet. Adding share buttons to a web page for such sites helps promote the content and draw traffic. After all that is why a web page exists, to offer something interesting to the world. There are different ways to add a share button to a web site. A web search shows plenty of free and commercial code available. The social media sites themselves provide code to help integrate social sharing into a website. This article covers an HTML link method. Most of the social media websites provide a URL that can be used to share a web page. By putting share buttons or text links on a web page and using the share URLs a simple set of social media share buttons can be generated.

Using Images for Links

The share buttons code used in this article are based on HTML links (anchors). If you are not familiar with using images for HTML links see our article HTML Image Hover Effects Using Onmouseover.

A Set of Images for Social Media Share Buttons

For this article a set of social media images are needed, the following set of social media button images were inspired by the share-button project on GitHub (which uses the MIT license). The buttons were out of date so have been changed to match current social media websites branding, and of course you can use your own images. All of the following share buttons are provided in a zip file for convenience.

Social Media	Button Image	Hover Image
Facebook
Twitter
reddit
LinkedIn

Social Media Share URLs

Here are the basic share URLs for various social media websites. The URL of this website's home page, https://tekeye.uk/ is used as the example. Notice how the URL to share has been encoded. There are web pages that can do the encoding, or if the HTML is being generated in code (Javascript, PHP, ASP, etc.) functions exists to perform the encoding.

Completing the Social Media Share Buttons Code

With the social media images and share links available the final HTML share link code can be constructed. The HTML anchor wraps the image, which changes onmouseover. Here is the code snippet for Facebook:

<a href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Ftekeye.uk%2F"><img src="social-buttons/face-but.png" onmouseover="this.src='social-buttons/face-but-hov.png';" onmouseout="this.src='social-buttons/face-but.png';"/></a>

If you want the share button to open the social media site in a new tab (a good idea when using the sharing links) add target="_blank" to the link (anchor) HTML:

<a href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Ftekeye.uk%2F" target="_blank"><img... etc.

The button in operation:

The same code is used for the other social media sites, just change the link href and button images. Here is the completed line up of buttons:

Adding Email and Print Options

Email and print existed before social media and some websites still like to offer buttons directly from the web page. Here's how to add email and print buttons to the social media sharing buttons. Firstly button graphics for email and print were made in a similar style:

Option	Button Image	Hover Image
Email
Print

Here's the email button code, using the mailto URI scheme:

<a href="mailto:?subject=I%20saw%20this&body=http%3A%2F%2Ftekeye.uk%2F"><img src="social-buttons/email-but.png" onmouseover="this.src='social-buttons/email-but-hov.png';" onmouseout="this.src='social-buttons/email-but.png';"/></a>

The print button code is:

<a href="javascript:;" onclick="window.print()"><img src="social-buttons/print-but.png" onmouseover="this.src='social-buttons/print-but-hov.png';" onmouseout="this.src='social-buttons/print-but.png';"/></a>

Finally the completed email and print buttons:

See Also

• For additional Twitter share parameters see the Twitter Web Intent Example.
• The LinkedIn customized share URL supports several parameters.
• There is a reddit Wiki page on submitting links.

Note: Values for optional parameters also need encoding.