Ads 468x60px

Pages

Showing posts with label social bookmarking. Show all posts
Showing posts with label social bookmarking. Show all posts

Thursday, October 25, 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx0Jw2F_qEa66gGaXMYZaYrjXSHR9eWJXBVb5XcAfv_Uv4fpbTc6KPFhMtuAIua5BwGn-cGV9RwX2hMk93KbsVwWaioYFRdWcxCnwNXZ6fZiK1rea0gPew2C3oOtMbogbwFlnhbLpfnr3Z/s1600/Bookmark+this.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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx0Jw2F_qEa66gGaXMYZaYrjXSHR9eWJXBVb5XcAfv_Uv4fpbTc6KPFhMtuAIua5BwGn-cGV9RwX2hMk93KbsVwWaioYFRdWcxCnwNXZ6fZiK1rea0gPew2C3oOtMbogbwFlnhbLpfnr3Z/s1600/Bookmark+this.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).

Friday, March 23, 2007

Another easy feed reader and social bookmarking service

To help build traffic to your website, it is always good to let visitors have an easy way to subscribe to feeds to be kept updated on new posts in your blog. In this way, visitors using a suitable feed reader can keep an eye on your blog for new post, and visit your blog when they see something interesting or useful.

Social bookmarking now is also very important to help building traffic. The problem is there are a multitudes of social bookmarking services and feed readers. I have written a previous post on an easy way to social bookmarking for your blog at Easy social bookmarking for your Website (click "BACK" button to get back to this page. A reader of my blog alerted me to a similar service AddToAny.

I have used AddToAny to add an icon for my blog reader to easily add my blog to their feed reader at Good Health Information. You can find the icon at the top of the left sidebar. Click on it and see what happen. I have also added a "bookmark manager" to the same Page Element (to save valuable real estate above the fold. If I use a separate Page Element to add the script, there will be a large empty space between the feed icon and the bookmark icon. By adding the script in the same Page Element, using a <br /> tag to put them on separate lines, I have greatly reduced the white space between the 2 icons). If you are interested in the scripts I used for the two icons, I put them below in the scroll box:

<a href="http://www.addtoany.com/?sitename=Good%20Health%20Information&siteurl=http%3A//good-health-information.blogspot.com/&linkname=Subscribe&linkurl=http%3A//good-health-information.blogspot.com/rss.xml&type=feed"><img border="0" width="110" alt="Add to any service" src="http://www.addtoany.com/add-sub.gif" height="17" title="Add to any service"/></a>

<br/>
<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>


The advantage of AddToAny is that it is very easy to use. The advantage/disadvantage (depending on how you look at ot is that you don't need to register for an account. This also means you have no way of finding out how many people are subscribed to your feed.

Acknowledgement: I was tipped off about the existence of AddToAny by BlogmasterPg

Monday, March 12, 2007

Easy Social Bookmarking for your Blog

Social Bookmarking Icons

Found this site that offer an easy way for you to add those social bookmarking icons for a blog or a website. There are now so many social bookmarking sites, and adding as many icons as possible can make your blog or website look cluttered. For example, I found this in the sidebar of a blog:

Social bookmarking icon clutter

Now with AddThis, you can get just a single icon to put on your blog or website, and a visitor clicking on the single icon will get to a page where he can choose whatever social bookmarking service or services he is subscribing to.

I have added AddThis icon for both the blog as well as the individual posts of this blog: Dummies Guide to Google Blogger. You can pop over to that site and test them out.

I will just paste the note that I added as I tried to add those icon to the above blog (note: you can do it without having to register for an account, but I think registering for an account is useful because then you have access to statistics like how many people have bookmarked the blog, etc.)

http://www.addthis.com/
Choose Bookmark or RSS Feed
http://www.addthis.com/account.php
email: xxxx@gmail.com
username: manature
password: yyyy
Message: An account with this username already exist
ignore
signin
Click "Get the code for your button
Which kind of button? Bookmark button/feed button
Chosed Bookmark button
Click radio button to choose the button (chosed the largest one, more visible)
Where? Drop-down menu: "on a Blog"
Blogging Platform: Drop-down menu: chose "Blogger"
Want stats with that? tick "Yes"
Click "Get Your Free Button"
Code for Blog Button:

Note: The codes here are for illustration purposes only. You should get the codes direct from your own account in AddThis as otherwise, you will not be able to see the statistics as it will enter my account instead.

<!-- AddThis Bookmark Button BEGIN -->
<a href="http://www.addthis.com/bookmark.php" onclick="window.open('http://www.addthis.com/bookmark.php?pub=manature&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;" title="Bookmark using any bookmark manager!" target="_blank"><img src="http://s3.addthis.com/button2-bm.png" width="160" height="24" border="0" alt="AddThis Social Bookmark Button" /></a>
<!-- AddThis Bookmark Button END -->


To add to top of left sidebar of Dummies Guide to Google Blogger
Click "Add a Page Element" for the left sidebar in the Layout
Selected HTML/Javascript
Pasted in the script
Save
Done

Social Booking icon for the posts

This will involve tampering to your template, so a good thing to do is to backup your template first. If you are new to editing and backing up templates, refer to this post How to backup and edit your New Blogger template. To add the AddThis icon to the bottom of every posts, get into your template editor, tick the "Expand widget template", then look for this line of code:

<div class='post-footer'>

paste directly below the above line of cod this block of codes

<!-- AddThis Bookmark Post Button BEGIN -->
<div><a expr:href='"http://www.addthis.com/bookmark.php?pub=enviroman&url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Bookmark using any bookmark manager!'><img src='http://s3.addthis.com/button1-bm.gif' width='125' height='16' style='border: 0px; padding: 0px' alt='AddThis Social Bookmark Button' /></a></div>
<!-- AddThis Bookmark Post Button END -->


Preview, and if satisfied, save the template.

Update 14 March 2007: I find it so useful, I think I will add them to this blog as well.

Update 21 March 2007: I got a comment which seem to indicate that the blogger didn't understand how AddThis easy social bookmarking works, so I thought I will do an update to explain further. When you install the AddThis easy social bookmark icon AddThis easy social bookmark icon, the icon include many social bookmarking services. When clicked on, it will open up a pop-up (see screenshot below, click to enlarge):

AddThis easy social bookmarking expanded pop-up

from which you can select a whole range of social bookmarking services. Try clicking on the icon just below this post or the icon at the top or the left sidebar and see what happen.