Social Bookmarking Icons for Blogger - The social bookmarking blogger widget will add neat social bookmarking icons below each of your posts so that your readers can bookmark your posts at various social bookmarking sites like digg,stumble,magnolia,delicious,google,yahoo etc.. This is the updated version of my previous post post on the same.. in this i have added a new stumble upon button.If you use this you will get the bookmarking icons after each blog post as you see on my blog here . To get this working on your blog do the following steps..1)Goto Blogger Template>Edit HTML back up your template and expand the widget templates..
2)Now in your template replace
<head>with
<head><script src='http://files.bloggerplugins.org/simpletricks.js'></script>
3)Now find
<p class='post-footer-line post-footer-line-3'>
and place the code from the following file just below that line.
if every thing went correctly this is what you should get
Bookmark this post: |             |
and also some mouse over animation as you see on the icons below this post.. Now you can remove the unwanted buttons by removing the corresponding <a expr:href=....</a> tag.
You can also change the button images if you like.I am looking for some better bookmarking icons(especially for that stumbleUpon).If anybody has it please leave a comment here.
Credits to Beautiful Beta for this awesome javascript
107 comments:
cOOL dude
liked u r ""buy me a coffee icon""
:D
dude is uggestion , u r one add is lying at bottom .
try it at some other place :)
Hi there ... I added the "buy me coffee" thing :) ...thanks ;)
Got another doubt too... I've these square rings around the social bookmarking buttons. How do I get rid of them? :-?
Thanks SO much for this tip. I've searched around and found other great ideas, so now I'm a subscribed fan!
thanks for the comment and the subscribtion...
It;s Really Awesome Reading Ur Post Keep Up The Gud Work Bro .. Njoy !!!
Hey, this is exactly what I have been looking for for my blog. Can you let me know if this still works?
Thanks a lot,
Charlie -
@charlie..
Off course this works like charm..
i've done everything as mentioned.. but still, i'm getting error: "your request could not be completed." and i'm given a error code as well.
Works like a charm! Love your blog... have used 3 of tricks so far!
thanks very much,it's really working in my blog (http://dyharga.blogspot.com)
you are welcome.. i think you should remove the borders around your images to make it look better..
hi there, thnks 4 ur comment at my blog. and yup, it's definitely look better w/o the borders.
1) not sure how to remove them
2) can't seem to find 'body {'
hope u can help me! would be much appreciated!! =)
hi Anne, you can add that css part at different places i just asked to post it in a particular place just to avoid confusion..
just try to find ]]></b:skin> in your blog template code and the place that css part just above it..
hope it helps..
Gr8 tip !!
Where were your blog till today !!
I loved it a lot !! Going to try this tip !
Thanks !
he he it was here all the time.. but i didn't care much for optimizing it for search engines..Now trying to optimize it for better search engine results.. By the way how did you come to know of my site?
Google !
I arrived here via google !
I can't seem to find the step 3 line of code in my blog's code. I use a slightly adapted template from blogger. Is it located in the /*Posts area of the code?
Just find
<p class='post-footer-line post-footer-line-3'>
This is definitely there in your template..Just expand your widget templates and look for it. and then follow the procedure..
i have added some of your suggestion at http://www.tourinmed.blogspot.com
nice.. but you haven't implemented that properly.. adding the code as a sidebar widget wont give you bookmarking icons like on my site.. you will have to add it to your template using the method i have mentioned..
Thanks Aneesh! I found the code (I kept skipping over the expand widgets step) and it installed perfectly. It looks great!
I have done what you said and it altered my site. It worked but messed up the template. Some of my posts titles are screwed up when I put the code in. I dont know what happened. I did everything correctly but for some reason it messed up how my posts looked.
i don't see the code on your site..i don't see any reason why this should mess up the template..You may not have followed the instructions properly.. if you need it fixed feel free to contact me.. sorry for the late reply.. i have classes now.. so little late..
Aneesh, FYI - The server where image icons are hosted seems to be down and so the icons are not dispaying.
thanks for the info.. that server went down just now i hope.. as i am using the same bookmarking icons.. i can't use googlepages to host these images as the googlepage websites that i use already exceed the bandwidth.. you too might have seen that when you used some of the widget installers..So i am trying to move it to a hosting account..Now i have uploaded the images to my godaddy free hosting account.So it will work perfectly for now..
Thanks - It's probably a good idea to suggest the users to upload the images on a server e.g. imageshack.com of their choosing so they don't have future problems
I seem to have some spacing problems with my curent icons - not sure why?
you must add padding:0px; to the bookmarking image's css part..something like
.bookmark img { border: 0;
padding:0px;
}
But still your icons may not stand in one line as the wrapper width is less... in that case remove 1 or 2 of the icons..
hi genius. :)
i have problem. i have a new 3 column template and the 2 sidebars are really too narrow. some of my widgets cannot fit it.
and the center where i put all my blogsposts needs to be trimmed down. what should i do about it?
i just examined your template..First of all make a backup of your template and follow these instructions
and by the way don't call me a genius. he he .. :)
Love this Aneesh keep them coming you are a blessing to us all
Remain blessed
thanx for the widget was looking for it,lloks nice at my blog.
Thank you Thank you Thank you! So helpful!!!
@Iago's Mom... I just commented out 2 of the icons that didn't fix in a row in my layout, so one day if I use a wider layout, I can get the extra icons back.
Thank you again Aneesh! You're the bomb! Happy bookmarking all :)
hello plz help.
i am not able to find
"post footer line"
where it is?????
plz tell me!
you are using a lil bit complicated template.. i think it should work for you if you place the code from the text file just above <div class='postmetadata'> in your template.If you are still having trouble feel free to contact me..
I've enjoyed thoroughly your blog and thank you for the social booking marking script.
I implemented the scrip on my blog ...
but there is one feature that I like on yours that does not work on mine and that is
when I hover over a button the "bookmark this blog" does not show the name of the button.
Can you tell me how to do this?
I hope I was clear.
hey in the social bookmarking ...the option 3 is unclear ...i couldnt find the thing in the edit html page
RIGHT on!! After HOURS of work your simple explanations FINALLY made my life easy!!
Hmm, doesn't work for me. I keep getting Blogger error codes.
That was one of the easiest, no brainer Blogger hacks I've used. Thank you!
Hi Aneesh, this is cool! I've got it installed and it works fine on Firefox 3.
However, I've got a lil glitches when it comes to IE7. On the front page, the day of post for the first post is fine, but the subsequent posts have got the first letter of the day chopped off, e.g., 'Friday' becomes 'riday'.
Another problem on IE7 is the counter for the number of comments. The number is wrong when each blog post is viewed individually.
Thanks for your attention and your help in advance. :)
I have sovled the problem myself by adding an additional line after the code, i.e., < BR CLEAR="RIGHT" >< /BR >
I think this is helpful for those having the same problem on IE7. :)
@luna.. you didn't get the hover part working because you didn't follow the first step.. that javascript is responsible for the mouse over text..
I couldn't find (p class='post-footer-line post-footer-line-3')
so I placed it under (data:post.body/)
instead and it worked. Thanks.
Thanks, it works well for my blog!
BTW, it would be great if there's a related post plugin :)
I'm waiting for your next wonderful plugins...!
Aneesh
Thanks for your reply.
I added the line and it is working.
Good luck in school and I appreciate the job you have done.
A lot of time and energy you've spent and it is truly appreciated.
Thank you! Very simple and easy to do. Took all of 5 minutes!
One problem though - now for some reason, my comments under my post are off track.
Any ideas on how to fix this - please?
Thanks, Jody
I fixed my problem -
I tried to do what CKII said but it didn't work for me.
What did work: I added TWO
's after the code.
Thanks Again.
Hi,
I am using a template from blog crowd. I am unable to use above code, Can you help me.
Hey! I did this and it automatically hid all posts except for the most recent. I want to use it but I want more than one post to show up. So I switched back to boring template with no bookmarking.
I wasn't able to find 2nd instructions tag (won't let that html in comments) so I put the js code after the body tag as someone in comments indicated worked for them. Which caused only one post at a time to show up on blog. Some help?
.
.
.
.
Error interpreting blog template
Invalid data reference post.id: com.google.layouts.framework.widgetview.GoogleMarkupException: No dictionary named: 'post' in: ['blog']
I keep getting this no matter what I do. Any help would be great!
Sorry for the extra comment but I figured it might help to tell you I also don't have any code that begins with < p class=etc...
The closest thing I have is
< b:section class='footer' id='footer'/
could not find the post footer line help me out.
it worked i just put it under
data:post.body/
and it appeared
excellent work keep it up
excellent :)
Great post Aneesh, i have used this in ma site, really cool and worth it, thanx mate..
This is exactly what I was looking for for my new layout - thanks very much!
what should we do if there's no
p class='post-footer-line post-footer-line-3'
?
Hey there,
Good stuff! Would you be able to add a facebook icon, though? Or maybe give us an update on how to do so?
Cheers!
thank so much
I couldnt get the file..
http://lightedpen.blogspot.com/
Thank you very much
i done it successfully on my blog http://trackblogging.blogspot.com
Can you add a facebook icon as well???
i love this way to put bookmark in posts so thanks u much..ill write this to my romanian friends who dont know more about that..ill give a link back to your site:)
Thank you for this post. I have been looking for this. It is whats lacking in my blog... Thanks again...
Hi,
Where is the code after the step 3?
Thank You. It worked for me
Hey buddy thanks for the guide . I have gone through it and finished the task .
HAPPY NEW YEAR & thanks, just added it and my blog keeps getting cooler :-)
Thanks for the informative post, worked fine on one of my blogs, but on another the icons displayed vertically..possibly user error on my part. Another option could be to insert the code in the Settings, Formatting, Post Template.
Don
http://www.adsenseblogger.net
thanks m8. i implement this widget on my blog.
Please include the new Google's Favicon here
Thanks so much for this easy to follow piece.
I had two issues which came up though.
1) Direction number 3 (did not start with the same as my template, but was able to just search the 2nd half for the line...
2) My template spacing is off and the bookmarks were on top of my labels......I'll probable just add a blank line to remedy.
I still can't get it to work. [sigh] :o(
Its working for my Blog. Thanks for your help, I was struggling with this since so long.
Thanks A lot.
Regards,
Atul
But I don't have that p class line.
For some reason, the
p class='post-footer-line post-footer-line-3'
does not exist on my blog HTML so this won't work. Is there any other code I could use?
Thanks so much. :o)
hi thanks
The p class= line is no longer there in the new templates. So how do I make this work?
can you explain what you are replacing step 3 with please?
They displayed vertically on mine too. Am really gutted because I love this widget!
Thanks so much, may it be useful . . .
Please also add twitter!
which file do i add? i can't find post footer. *sigh
Not able to find p class='post-footer-line post-footer-line-3'
insted i got the bllow line in my blog, is this same?
div class='post-footer-line post-footer-line-3'
Aneesh have you got any way to include in twitter?
thx
Thanks a lot.I just added the bookmark widget at the end of each of my posts!Worked perfectly :)
Good job bro. Thanks.
Hey there,
I'm trying to do this to my blog, but I can't find:
post-fotter-line... etc
I've expanded widgets, and I'm using ctrl F to find it, but nada. Any help? Thanks.
hey thanks a lot man
u rock bro, this is THE blog where I can find the collest tips and implement them in the easiest way.
Take care and keep it up...
Cool
For some reason the line came out vertical instead of horizontal help?
which is the code for twitter? can you make an icon for bligg from www.blogoree.ro ?
Thankyou very much...
Thank you so much! You really have given us a great tool. I REALLY appreciate your work:))))
thanks...it tips, I can used it
This tool is brilliant but has stopped working now, looks like it has on your site aswell (images not showing). Would this be me or something at your end?
cheers
SN
@Strange Nature i had modified my .htaccess file at files.blogggerplugins.org and this thing got weird.. thanks for notifying me..now changed it back and everything working fine.. by the way i would suggest that you download these files and upload it yourselves to some googlepages or something. Though these image are so small in size it now consumes me more than 30 GB of bandwidth per month and that is the reason why i moved to host gator.. :(
This thing won't go offline as long as i have money to pay my hosting.. but it is a little too high. about 120$ per year...:(
works after the
div class='post-footer-line post-footer-line-3'
code for me, thanks!
@ Aneesh. Will it be a case of saving the image files to a host and then altering the script (in my html) so the targets are pointing to the new destinations? Or would I have to modify anything else? I am happy to do this to save your colossal bandwidth. Thanks again.
@Strange Nature yea it is..
p class='post-footer-line post-footer-line-3'>
IS
div class='post-footer-line post-footer-line-3'/>
IN THE SAND DOLLAR BLOGGER TEMPLATE
Excellent blog. I just used this information about social bookmarking buttons on my blog. no problem found. Thank you so much :)
nice,its very help me..
Will you be adding a twitter icon to social bookmarkings?
yea i have added a twitter icon now.. Read about it @ my new post
Post a Comment
Please don't spam on here..