In this tutorial we will teach you how to create your own custom Twitter ‘Tweet This’ button for your Facebook Fan page. The goal of this tutorial is to make this button look exactly like the Facebook FBML ‘Share’ button using CSS. We have provided 2 different yet simple options to accomplish this.

EXAMPLE OF THE FACEOOK FBML SHARE BUTTON:

STEP 1: Getting the Twitter Code

Simple “Tweet This” Code

Before we can create the button, you will first need the ‘Tweet This’ code. Keep in mind that this line of code is the only working ‘Tweet’ code inside of a static FBML page. This line of code will be modified and adapted in the following step’s options to produce the styled Facebook version.

<a title="Your Title Here" href="http://twitter.com/home/?status=Your Message Here">Tweet</a>

Tweet

STEP 2: Creating the CSS ‘Tweet’ Button

Option #1 – Pulling from Facebook’s Style Sheet

The first option to create the custom ‘Tweet” Button is the easiest for making the button fall in line with Facebook’s style of the ‘Share’ button because we will be using exactly that, Facebook’s style. We have set up the code to mimic the way Facebook sets up the ‘Share’ button creating a flawless Facebook styled ‘Tweet’ button by utilizing some of their CSS classes. Copy and modify the code below, happy tweeting!

<a title="Your Title Here" rel="dialog" href="http://twitter.com/home/?status=Your Message Here" class="uiButton uiButtonDefault uiButtonMedium">
<i class="mrs img sp_6isv8o sx_368f44"></i><span class="uiButtonText">Tweet</span></a>
</a>

@daddydesign" href="http://twitter.com/home/?status=How to Create A Custom Tweet This Button For Your Facebook Fan Page http://bit.ly/dkHsyA" target="_blank">Tweet

 

Option #2 – Custom CSS with Background Image

The second option is a safer choice just in case Facebook decides to change their code (which they often do). This option relies on using your own CSS along with an image stored on your server, the benefits to this are that you control the code and images and can basically change the style to anything you want. You will need to create the background image or you can save ours directly, please do not link back to our image, save it and use it on your server. If you want to use any wording longer than Tweet you will need to modify the length of the background image to accommodate longer text, or you can get more creative with the CSS and multiple images to create a repeating re sizable button. After your background image is created copy and modify the code below, happy tweeting!

CSS

#button{ 
width: 60px; 
height: 25px; 
float: left; 
position: relative; 
line-height: 22px; 
background: url(yoursite.com/background_image.png) no-repeat top center; 
}
.tweet{ 
font-family:"Lucida Grande","Lucida Sans Unicode", sans-serif; 
font-size: 11px; 
font-weight: bold; 
padding: 0 0 0 18px; 
}
.tweet a{ color: #333; text-decoration: none; }
.tweet a:hover{ text-decoration: underline; }

CODE

<div id="button">
  <div class="tweet">
    <a href="http://twitter.com/home/?status=http://twitter.com/home/?status=your message here" target="_blank">Tweet</a>
  </div>
</div>

@daddydesign" href="http://twitter.com/home/?status=How to Create A Custom Tweet This Button For Your Facebook Fan Page http://bit.ly/dkHsyA" target="_blank">Tweet

 

Comments

If you have any questions or know any other way(s) of accomplishing this, please share your comments below. You can see both the ‘Share’ and ‘Tweet’ buttons in action on our Fan Page @ http://facebook.com/wordpressdesign.