How to Create a Facebook Share Button with No Script

I talked about how to add a Facebook Like button to your website in another post, where I demonstrated how to easily place a Like button on your website using the code that Facebook provides on their developers page.

In most cases, both for Like and Share buttons, using the default code that Facebook provides would be the simplest and sometimes the best option. For example, if you don't want to get involved with coding and styling your own buttons, or if you want to display the buttons exactly as they appear on Facebook's button generator preview, or if you want to keep displaying the numeric like and share values, my suggestion would be to go with the code that Facebook's Share Button Configurator generates.

However, there may be other cases where you wouldn't want to use the default share button and create your own. For example, if you want to create a unique Facebook share button with a style that matches your website's theme with different coloring, then you will need to design and code your own custom Share button.

Like layout and design, page loading speed is an important factor while serving your website pages to your visitors and sometimes third party scripts such as the script that is used in the default Facebook share button code may slow down the overall loading of your website. Sometimes, even if it doesn't directly slow down your website, after all other elements on your page has finished loading, the external scripts may continue to load and keep the browser busy unnecessarily due to some momentarily connection issues with the server where that script is hosted, in this case the Facebook site.

I did a quick check and noticed that the size of the script that Facebook uses for the Share button is 171 KB. This may not sound much for some of you but in terms of JavaScript standards, this is a huge file. If you wouldn't want to add a huge file to your website just to do a simple task which is to let your visitors share your pages on their Facebook profiles, hence increase your page's loading speed, especially concerning the mobile Internet users, then creating a custom Share button is the way to go.

Custom Facebook Share Button With No Script

To create your own button, you will need to get your hands dirty with some HTML and CSS to code and design the button. There is no limit for the customizations that you can do with CSS, but for the sake of simplicity, I will give a basic example below:

Step 1: The HTML of the Button

The HTML code for the Share button that you will place on your web page consists of the following:

<a href="https://www.facebook.com/sharer/sharer.php?u=YOUR_WEB_PAGE_URL" class="share-button" target="_blank">Share</a>

The important part of this button is the href attribute. The first part of it (https://www.facebook.com/sharer/sharer.php) is the URL of Facebook's sharing page. The second part of it (?u=YOUR_WEB_PAGE_URL) is your web page's URL. Let's say your page is located at https://www.tutsandtips.com/, the code for the href attribute that you will use will be as follows:

https://www.facebook.com/sharer/sharer.php?u=https://www.tutsandtips.com/

The class, class="share-button", is used for easily controlling the style of the button via CSS (see below). The target window, target="_blank" is used so that the share dialog will be opened in a new window and your visitor will not be leaving your website.

Once you insert the button code into your page, you can now style it with CSS as you wish.

Step 2: The CSS of the Button

Note that you can style your custom share button to match your website's layout and colors as you wish, the following is just a basic example. The CSS code for the share button consists of the following:

.share-button {
display: inline-block;
text-align: center;
width: 80px;
padding: 4px 0;
background: #3a5795;
color: #fff;
font-size: 15px;
font-weight: bold;
text-shadow: 1px 1px 1px #333;
border-bottom: 2px solid #1a326e;
border-radius: 3px
}

You can play with the width and padding values, colors, font and border as you wish. If you need some with CSS styling, please check the CSS tutorials.

You can see a preview of the Share button the above HTML and CSS codes generated below:

Share

f t g+ in