Custom share and tweet buttons for Facebook and Twitter

I came across an issue with a design, where the client didn’t want the standard Facebook Like and Twitter tweet buttons on their site. Here’s how I created my own custom share buttons.

Lets start with Facebook. There are a couple of items that will need to be added into the header.

Step 1: Add the following meta tags (if they don’t already exist).

<meta name="title" content="This is the Title">
<meta name="description" content="This is a description">
<meta name="keywords" content="keywords here">

Step 2: Add the Facebook share script

<script src="//"></script>

Step 3: Add the following to your custom Facebook share link

<a name="fb_share" type="button" href="" target="_blank" class="socialLinkFacebook" title="Facebook">Facebook</a>

For Twitter follow these steps.

Step 1: Create a custom Twitter tweet link

<a href="" class="socialLinkTwitter" title="Twitter" target="_blank">Twitter</a>

Step 2: Add Javascript window popup click handler function (you’ll need jQuery linked already for this javascript)

$('.socialLinkTwitter').click(function (e) {

var sTwitterShare = $(this).attr('href');,'Share','width=550,height=450');