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');
});