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