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|
Social Media Share URLs
Here are the basic share URLs for various social media websites. The URL of this website's home page,
|Social Media||Share URL|
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|
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:
Finally the completed email and print buttons:
- For additional Twitter share parameters see the Twitter Web Intent Example.
- More information on the Google+ share link is available.
- 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.
Author:Daniel S. Fowler Published: