Friday, October 26, 2007

"Add to Any" social bookmarking: Making your own button

I have previously publish an easy method to put a button on your blog for your blog visitors to bookmark your blog at Easy social bookmarking for your blog using "Add to Any" (click BACK button to get back to this page).

A blog reader asked if it is possible to use her own button for the "Add This" bookmarking button. I had a look at the script and saw that it should not be a problem and did a test/demonstration at Health is Wealth. Click on the "bookmark this" button and see what happens.

The demonstration button, done with a free photo editor, Irfanview (click BACK button to get back to this page).

What I did was this. I opened Irfanview (click BACK button to get back to this page), click IMAGE > NEW (EMPTY) IMAGE, then input the width and height of the button I wanted to create. You will have to input a width which is equal or less than the width of your blog sidebar. If you don't know, refer to How to find the width of the blog Header, main column, sidebar (click BACK button to get back to this page). You can select the background color of the new image. Next, I click and drag the mouse to create a selection, click EDIT > INSERT TEXT INTO SELECTION..., set the font size and color, background color, etc, type "Bookmark this" or any text you like, then click OK. If you want a more fanciful button, type "button generator" into the search box above, tick the radio button beside WEB and search. Find the button generator you like and generate your fanciful button. Or you can use more sophisticated photo editor like Photoshop.

The newly created button was saved into the computer, uploaded the button to Image for bookmarking website, click on the displayed button to get to the page where only the button was displayed, click VIEW > PAGE SOURCE in the menu bar at the top of the browser. A new window will open displaying the page source codes for the post. Below inside the scroll box is the page source I obtained:

<html>
<head>
<title>Bookmark+this.jpg (image)</title>
<script type="text/javascript">
<!--
if (top.location != self.location) top.location = self.location;
// -->
</script>
</head>
<body bgcolor="#ffffff" text="#000000">
<img src="http://4.bp.blogspot.com/_jizoPL28qCY/Rx9X77kbB0I/AAAAAAAAA48/f_b_s6dHlUA/s1600/Bookmark%2Bthis.jpg" alt="[Bookmark+this.jpg]" border=0>
</body>
</html>


The photo URL is highlighted in red. I click and drag over the photo URL, and my normal habit is to open a Notepad file, paste the URL into it so that I can get it anytime I want.

Below is the script for the "Add to Any" social bookmarking button:

<a href="http://www.addtoany.com/?sitename=Good%20Health%20Information&siteurl=http%3A//good-health-information.blogspot.com/&linkname=Bookmark%20Manager&linkurl=http%3A//good-health-information.blogspot.com/rss.xml&type=page"><img border="0" width="91" alt="Add to any service" src="http://www.addtoany.com/addbm-b.gif" height="29" title="Add to any service"/></a>


Again, the photo URL for the default "Add to Any" button is highlighted in red. I drag and drop the mouse over this photo URL to highlight it, click delete to get rid of it, then replace it with the URL of the button I created. So the new script become:

<a href="http://www.addtoany.com/?sitename=Good%20Health%20Information&siteurl=http%3A//good-health-information.blogspot.com/&linkname=Bookmark%20Manager&linkurl=http%3A//good-health-information.blogspot.com/rss.xml&type=page"><img border="0" width="91" alt="Add to any service" src="http://4.bp.blogspot.com/_jizoPL28qCY/Rx9X77kbB0I/AAAAAAAAA48/f_b_s6dHlUA/s1600/Bookmark%2Bthis.jpg" height="29" title="Add to any service"/></a>


So there you are folks. That is how I created my own button for the "Add to Any" social booking button at the bottom of the left sidebar (at time of publishing). I know it is not much of a button, and I am confident of doing better given time and the proper tool, or even with the same tool, make the button bigger. It is over to you. You can go make your own fanciful buttons and make it says anything you like, like for example "Bookmark this great blog. If you don't, it will be the greatest mistake of your life". Maybe I will do that later, because I think that is the truth for this blog (not that one which is a relatively lower traffic blog compared with this one).

5 comments:

  1. Hi, So I am trying to post this bookmark image after every post. Do I place your script after div class='post-footer' under "edit html" still. Its giving me multiple errors when I do this...

    thx

    ReplyDelete
  2. Hi Peter, I am trying to add a signature and a link to every of my blog post, but can't locate where to post it. I'm using Harbor blogger template and the script just looks very different. Please help. Thanks.

    My blog is at www.scrapadoo.blogspot.com.

    ReplyDelete
  3. You may use a template a million times different from mine and it will not make any difference. Go to Settings > Formating
    and at the bottom, there should be a post template. Add whatever signature you want there.

    Peter Blog*Star
    Blogger FAQ (Frequently Asked Questions)
    (Blogger FAQ in progress. More will be added as I have the time)

    ReplyDelete
  4. Hi, I was looking around to find out how I could simply add the social bookmark options in my post footer. I thought this would be easy but I just don't see how ...
    Could you help me out here? Thanks in advance!
    Karen

    ReplyDelete
  5. Hi karenhappywoman,

    Try Easy social bookmarking

    Peter Blog*Star
    Blogger FAQ (Frequently Asked Questions)
    (Blogger FAQ in progress. More will be added as I have the time)

    ReplyDelete

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics