Loading...

Blog

How to Create A Custom ‘Tweet This’ Button For Your Facebook Fan Page

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>

 

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>

 

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.

Leave a Comment

6 comments
Baptiste
Baptiste

Thanx a lot for a newbie like me! :)

James
James

Thanks for the code. I have implemented it on my fan page. I do have a question though. This bit from option #1 does not seem to do anything. Is it supposed to be a link to a little square quote balloon image? I don't understand why a tag is used here--italics? Anyway I've tried the code with and without this line and it works the same.

Elgart
Elgart

Thanks for the info..This is great tutorial! I will really apply this to my Facebook Fan Page account.

Aaron
Aaron

I'm so into social media right now. Especially Facebook marketing and furthermore, FBML. So thank you! I love reading and learning all I can from www.facebook.com/fanpagefactory and blogs like yours! These resources make it fun and easy to keep up! Enjoy Aaron

SiewShuen
SiewShuen

Thanks for sharing. Was looking for this for quite a while. Thanks for the effort :)

daddydesign
daddydesign

@James, Facebook changed that line of code but we now have the new correct code: (check updated code on post). Use that to get the little square quote balloon image.