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="//static.ak.fbcdn.net/connect.php/js/FB.Share"></script>

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

<a name="fb_share" type="button" href="http://www.facebook.com/sharer.php" target="_blank" class="socialLinkFacebook" title="Facebook">Facebook</a>

For Twitter follow these steps.

Step 1: Create a custom Twitter tweet link

<a href="https://twitter.com/share?url=mydomain.com" 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) {

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

});
Tags:
 custom,
 facebook,
 guide,
 share,
 tweet