In this tutorial we will show you how to use your own image in place of the default image used by addthis.com, a popular and powerful bookmarking and article sharing service giving you greater control over the look of your website.
What is AddThis.com?
Who better to descrie the service than the people themselves, here is a short service breakdown lifted directly from the site:
Launched in September 2006, AddThis is the #1 bookmarking and sharing button on the Internet. AddThis has become the standard button for bookmarking and sharing. The AddThis button spreads your content across the Web by making it easier for your visitors to bookmark and share it with other people, again…and again…and again. This simple yet powerful button is very easy to install and provides valuable Analytics about the bookmarking and sharing activity of your users. AddThis helps your visitors create a buzz for your site and increase its popularity and ranking. More Info >
What Icons Do They Offer?
Here are the images that AddThis offer as standard:
(Disclaimer: There is nothing wrong with these icons and they fit almost any website perfectly, but for those that like to take more control over the look of their blog and help take it to the next level this article will tell you how to use any image as your AddThis link)
Step 1 - Sign Up
First things first, you need to go to AddThis.com and sign up to the service (it has some quite nice statistics as to where your users are sharing your posts, what services they are bookmarking with and it all opens in a nice pop-out browser as to not direct those visitors away from your website).
Step 2 - Getting The Code
The next step is to get your specific AddThis code for your website/blog.
For those using wordpress here is a short walk through:
- Follow the “Get Button” link
- In the drop down menu choose “Sharing / Bookmarking Button”
- Pick an image
- “On a Blog”
- “Wordpress”
- Now follow the “Get Your Free Button” link
On the next page click and copy the code in the box titled “Blog Button” (not Blog Post Button)
The code should look like the following..
<!– AddThis Button BEGIN –>
<a title=”Bookmark and Share” onclick=”window.open(’http://www.addthis.com/bookmark.php?wt=nw&pub=jamiecarter&url=’+encodeURIComponent(location.href)+’&title=’+encodeURIComponent(document.title), ‘addthis’, ’scrollbars=yes,menubar=no,width=620,height=520,resizable=yes,toolbar=no,location=no,status=no,screenX=200,screenY=100,left=200,top=100′); return false;” href=”http://www.addthis.com/bookmark.php” target=”_blank”><img src=”http://s9.addthis.com/button1-addthis.gif” border=”0″ alt=”Bookmark and Share” width=”125″ height=”16″ /></a>
<!– AddThis Button END –>
How Do I Use My Own Image?
To use your own image in place of the default we need to alter the following segment of the code from the code we have just copied:
<!-- AddThis Button BEGIN -->
<a title="Bookmark and Share" onclick="window.open('http://www.addthis.com/bookmark.php?wt=nw&pub=jamiecarter&url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title), 'addthis', 'scrollbars=yes,menubar=no,width=620,height=520,resizable=yes,toolbar=no,location=no,status=no,screenX=200,screenY=100,left=200,top=100'); return false;" href="http://www.addthis.com/bookmark.php" target="_blank"><img src=”http://s9.addthis.com/button1-addthis.gif” border=”0″ alt=”Bookmark and Share” width=”125″ height=”16″ /></a>
<!– AddThis Button END –>
The code on its own:
<img src="http://s9.addthis.com/button1-addthis.gif" border="0" alt="Bookmark and Share" width="125" height="16" />
There are 2 area’s of the code that need to be edited. I shall break down the 2 areas that need to be changed for those with limited knowledge on coding.
1. The Image Location:
src="http://s9.addthis.com/button1-addthis.gif"
This segment of the image code tells the internet browser the exact location of the image file. So when editing this you need to know the exact url of the image you are looking to replace it with.
The information between the “” is what needs to be edited, as follows
src="http://yourdomain/yourfolder/yourimage.jpg"
2. The Image Dimensions:
width="125" height="16"
Finally the code from AddThis specifies the height and width of the image it is displaying and need altering according to the dimensions of the image you are looking to use.
Can I Use The Image Used By Blog2Life For AddThis?
Yes, we make it our mission to provide you with everything used on this site!
There are 2 ways you can use Blog2Life’s own Share-It button.
No Hastle
For those with limited bandwidth and ftp access, limited skills and to save you lots of effort, this image has been uploaded to a free image hosting provider so all you need to do is just copy and paste the following code as explained in the steps above.
<img src="http://i30.photobucket.com/albums/c343/jamiecarter500/share-it.png" border="0" alt="Bookmark and Share" width="125" height="16" alt="share-it" />
Free download and self host
For those that prefer to host the image yourself you can download it here.
We do not permit the downloading of this image from any other website, please link back to the site for downloading.
Hope this helps you in your quest for website perfection. Keep your eyes peeled for B2L’s subscribe button article coming soon!
Share The Love
best of the best it is,