I recently found out that Facebook no longer offers a “share” button. I think in some cases, the “share” button can give you a better return on your social traffic than a “like” button. I went ahead and wrote up a very short tutorial while I created my button so that you can have your own “share” button too:

Step 1: Create the button:

HTML:

<div class="f_btn"><a href="#" target="_blank">Share</a></div>


CSS:

.f_btn {
font-family: 'Helvetica Neue', Arial, sans-serif;
font-weight: normal;
font-size: 11px;
line-height: 18px;
}
.f_btn a {
position: relative;
display: inline-block;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
color: #222;
overflow: hidden;
height: 20px;
outline: none;
text-decoration: none;
background-color: #f8f8f8;
background-image: -webkit-gradient(linear,left top,left bottom,from(#fff),to(#dedede));
background-image: -moz-linear-gradient(top,#fff,#dedede);
background-image: -o-linear-gradient(top,#fff,#dedede);
background-image: -ms-linear-gradient(top,#fff,#dedede);
background-image: linear-gradient(top,#fff,#dedede);
border: #ccc solid 1px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}


It should look something like this:

Step 2: Clean up the button

HTML:

<div class="f_btn"><a href="share.php" target="_blank"><span>Share</span></a></div>


CSS:

.f_btn span {
position: relative;
display: inline-block;
padding: 0 4px 0 19px;
}

.f_btn a:focus, .f_btn a:hover {
border-color: #bbbbbb;
background-color: #f8f8f8;
background-image: -webkit-gradient(linear,left top,left bottom,from(#f8f8f8),to(#d9d9d9));
background-image: -moz-linear-gradient(top,#f8f8f8,#d9d9d9);
background-image: -o-linear-gradient(top,#f8f8f8,#d9d9d9);
background-image: -ms-linear-gradient(top,#f8f8f8,#d9d9d9);
background-image: linear-gradient(top,#f8f8f8,#d9d9d9);
}

.f_btn a:active {
background-color: #efefef;
-webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.1);
-moz-box-shadow: inset 0 3px 5px rgba(0,0,0,0.1);
box-shadow: inset 0 3px 5px rgba(0,0,0,0.1);
}


It should look something like this:

Step 3: Add a nice logo

HTML:

<div class="f_btn"><a href="share.php" target="_blank"><i></i><span>Share</span></a></div>


CSS:

.f_btn i {
position: absolute;
top: 50%;
left: 3px;
margin-top: -6px;
width: 12px;
height: 12px;
background: rgba(0, 0, 0, 255) url('../img/f_tiny.png');
}


It should look something like this:

Step 4: Add the share count

HTML:

<div class="f_btn"><a href="share.php" target="_blank"><i></i><span>Share</span></a><div class="f_count">2450</div></div>


CSS:

.f_count {
position: relative;
display: inline-block;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
vertical-align: top;
background: #F7F7F7;
border: 1px solid #BBBBBB;
margin-left: 4px;
padding: 0 3px 0 2px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
height: 20px;
}
.f_count:after, .f_count:before {
right: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.f_count:after {
border-color: rgba(247, 247, 247, 0);
border-right-color: #F7F7F7;
border-width: 3px;
top: 50%;
margin-top: -3px;
}
.f_count:before {
border-color: rgba(187, 187, 187, 0);
border-right-color: #BBBBBB;
border-width: 4px;
top: 50%;
margin-top: -4px;
}


It should look something like this:

If you want the share count to be dynamic, you can use Facebook SQL, and load the value using an AJAX request like this:


https://api.facebook.com/method/fql.query?format=json&query=SELECT%20share_count%2C%20like_count%2C%20comment_count%2C%20total_count%2C%20commentsbox_count%2C%20comments_fbid%2C%20click_count%20FROM%20link_stat%20WHERE%20url%20%3D%20%27eisbox.net%27