How To Use Custom Image For Tweet Button
Posted by Justin Nwosu in Social Media Optimization on 04-02-2012
Tags: Custom Image, Custom Tweet Button, Social Media, Tweet Button, Twitter Button
0
Adding Twitter’s Tweet button to websites is trending, as more Internet users recognize the impact of social media on our everyday lives. But then the default Tweet button might not blend well with the over-all website design. Maybe, the button’s color doesn’t match the color scheme of the website, and adding it would be a color riot. Or maybe, the shape and size don’t fit into the space you want it to be placed in. So, when you find yourself in this type of scenario, what will you do? Discarding the Tweet button is not a good idea. Managing the default button is not advisable either. So, the best thing to do is simply to modify the default Tweet code, in order to use your own image. That’s what I did and I’m happy to share the trick with you 
Here is how I modified the Twitter code to use a custom image for Tweet button:
I know you’d want to send your Tweets through a pop-up window, instead of opening a new browser tab or window. So, I first of all wrote a JavaScript code (shown below) that will open a pop-up window. You don’t need to modify anything in the JavaScript code. Just copy and paste it in the Head section of your web page between the <head> and </head> tags.
- <!– Begin Twitter pop-up JavaScript –>
<script language=”javascript” type=”text/javascript”>
<!–
var win=null;
function NewWindow(mypage,myname,w,h,scroll,pos){
if(pos==”random”){LeftPosition=(screen.width)?Math.floor(Math.random()*(screen.width-w)):100;TopPosition=(screen.height)?Math.floor(Math.random()*((screen.height-h)-75)):100;}
if(pos==”center”){LeftPosition=(screen.width)?(screen.width-w)/2:100;TopPosition=(screen.height)?(screen.height-h)/2:100;}
else if((pos!=”center” && pos!=”random”) || pos==null){LeftPosition=0;TopPosition=20}
settings=’width=’+w+’,height=’+h+’,top=’+TopPosition+’,left=’+LeftPosition+’,scrollbars=’+scroll+’,location=no,directories=no,status=no,menubar=no,toolbar=no,resizable=no’;
win=window.open(mypage,myname,settings);}
// –>
</script>
<!– End Twitter pop-up JavaScript –>
That’s it for the JS. Now let’s go to displaying our custom button on the web page. Copy the code shown below and paste it where you want your Tweet button to appear on your web page.
- <a href=”https://twitter.com/share?url=YourDomainNameGoesHere&text=TheDescriptionOfYourWebPageGoesHere” rel=”nofollow” onclick=”NewWindow(this.href,’template_window’,’500′,’400′,’yes’,'center’);return false” onfocus=”this.blur()”><img src=’YourImageURLGoesHere‘ border=”0″ title=”Share on Twitter” alt=”Share on Twitter”/></a>
Please, change YourDomainNameGoesHere to the actual URL of your web page, TheDescriptionOfYourWebPageGoesHere to the description of the page you want to Tweet and YourImageURLGoesHere to the actual URL of the image you want to use. You can optionally modify the size of the pop-up window to any size you prefer. You’ll notice that I set the size to 500px by 400px.
This code works well for websites that have static HTML web pages. You can see it in action on the website for our computer company. The only drawback is that you have to manually place the code on every web page you want the Tweet button to appear.
This code doesn’t work on WordPress or any other CMS. I’ll post the code for that soon. So, keep in touch!
