How to Create a Facebook Share Button with No Script
In this tutorial, I will show you how to create a custom Facebook share button without using the default code and the script that Facebook generates for the share buttons.
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.
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 http://www.example.com/my-page/, the code for the href attribute that you will use will be as follows:
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:
padding: 4px 0;
text-shadow: 1px 1px 1px #333;
border-bottom: 2px solid #1a326e;
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:
This is how you can create a custom Facebook share button with no script. It looks like a little bit more work compared to using the default button but if you want to have your own unique share button on your website, this is how you can do it.
More Facebook Tips
How to Create Friends Lists by City in Facebook How to Search People by Email on Facebook How to Permanently Disable Facebook Search History How to Delete Facebook Search History How to Search People on Facebook by City Custom Styling Facebook Like Button: Is It Possible? Can I See Who Viewed My Profile on Facebook? How to Add Multiple Facebook Share Buttons on Your Website Is it Possible to View Private Facebook Profiles? How to Add a Facebook Like Button to Your WebsiteFacebook Tips