Put Blog This widgets on your Web Page – Blogger LiveJournal Twitter
Put Blog This widgets on your Web PagePost to Blogger, LiveJournal and TwitterBelow is a long discussion about hos the Blog This stuff developed. What you really want is the script. Look over on the right, there is a row of social bookmarking tools that include blogging tools. Copy the code below to your website and you will have the same row. <script language="javascript" type="text/javascript" src="http://www.blogseye.com/blogthis/blogthis.js"></script>
I am keeping this at googlepages, but if the traffic gets too heavy it might stop working. If this happens we will will have to host the script somewhere else. If this happens let me know and I’ll put out a zip of all the files so we can spread it around. Keep reading if you need specific help about blogger.com, etc. It is common practice to put Digg or del.icio.us icons on your web pages hoping that some generous person will click on them and maybe get you a little traffic. Getting your page or post mentioned in someone else’s blog will get you much more traffic, long after Digg and Del.icio.us have forgotten you. I was surprised that there were no "Blog This" buttons on any of the blogs that I read.Blogs generate much higher quality readers, the kind who want to stay around and see what else is on the site. I wondered why there were no buttons encouraging users to blog a page. So? I made a little widget that I could add to my web pages and my blog posts that would help a blogger make a post. These are based on bookmarklets and I was able to find the code to post to Blogger.com and Livejournal.com blogs. I made cute little buttons that will, hopefully, catch a blogger’s eye. Feel free to download the button, but don’t hot link to them. I can’t stand the traffic. I’ll rename the images if I start getting hits. These images are a little oversized so you might want to shrink them down a little before uploading them to your web site.
This is the code for putting the "PAGE" buttons on any web page. This uses JavaScript to send the page title, the page url and any highlighted text to the blog post page. In the case of twitter it sends just the title and URL. <a href="#" target="_new" onClick='q="";d=document;w=window; t=escape(d.title); u=escape(location.href); if(d.selection)q=d.selection.createRange().text;else if(w.getSelection){q=w.getSelection();}else if(d.getSelection)q=d.getSelection();q=escape(q); this.href= "http://www.blogger.com/blog_this.pyra?t="+q+"&u="+u+"&n="+t;'>
Live Journal Blog This: <a href="#" target="_new" onclick='d=document; w=window; r=d.selection?d.selection.createRange().text:d.getSelection(); t=d.title; u=location.href; e=escape("<a href=\"" +u+ "\">"+t+"</a><br/>"+r); this.href= "http://www.livejournal.com/update.bml?mode=full&event="+e;' ><img src="http://www.blogseye.com/blogthis/livejournalp80.gif" border=0 /></a>
Twitter Twit This: <a href="#" target="_new" onclick='t=document.title; u=location.href; this.href="http://m.twitter.com/home?status="+escape(t+" - "+u);'><img src="http://www.blogseye.com/blogthis/twthispage.gif" border=0/></a>
Integrating into Blogger.com Classic templates. Forgive, me, but I don’t know enough about the new blogger templates. I did, however, find a way to make this work on Classic Blogger templates using "<$BlogItemPermalinkUrl$>" and "<$BlogItemTitle$>" tags that are available. The code below will add all three posts to you Blogger.com template. Add it just before the permalink information. The code of your template is dense, but you should be able to find the code that goes on the bottom of each post for a permalink. Just copy the code below and past it there. The gotcha is that you can’t have any single quotes in the title. For twitter there can’t be anything in the title that will confuse XML so no special characters. Your blogger will sometimes put an ampersand or single or double quotes in the title and that will break twitter. All Three Blog this post items. For Blogger Classic
<a href="#" target="_new" onClick='q="";d=document;w=window; t=escape("<$BlogItemTitle$>"); u=escape("<$BlogItemPermalinkUrl$>"); if(d.selection)q=d.selection.createRange().text;else if(w.getSelection){q=w.getSelection();}else if(d.getSelection)q=d.getSelection();q=escape(q); this.href= "http://www.blogger.com/blog_this.pyra?t="+q+"&u="+u+"&n="+t;'>
<img src="http://www.blogseye.com/blogthis/blogthissm.gif" border=0/></a>
I have a wordpress plug-in that works for twitter this. Contact me and I’ll email it to you – it’s only a few bytes and there isn’t anything to it. I want to continue so it does all three buttons. I found some 20×20 icons for Blogger, LJ and Twitter that work well for compact posts. I’ve add several of the main social bookmark sites code to round out a good set of options.
Here is the version for blogging or bookmarking a page. It is all nine icons and the javascript. They snatch the title and the url from the current page and open a window for the post or bookmark. Copy and paste into any web page and it should work. (Remember, no punctuation allowed in the page title or some of these will fail.)
<a href="#" target="_new" onClick='q="";d=document;w=window; t=escape(d.title); u=escape(location.href); if(d.selection)q=d.selection.createRange().text;else if(w.getSelection){q=w.getSelection();}else if(d.getSelection)q=d.getSelection();q=escape(q); this.href="http://www.blogger.com/blog_this.pyra?t="+q+"&u="+u+"&n="+t;return false;'><img src="http://www.blogseye.com/blogthis/sb_blogger.gif" border=0 style="margin:0;padding:0;" title="Blog This Page with Blogger"/></a>
Here is the Blogger.com set of links for individual posts. Add this to the blogger classic template at the end of the section for posts.
<a href="#" target="_new" onClick=’q="";d=document;w=window; t=escape("<$BlogItemTitle$>"); u=escape("<$BlogItemPermalinkUrl$>"); if(d.selection)q=d.selection.createRange().text;else if(w.getSelection){q=w.getSelection();}else if(d.getSelection)q=d.getSelection();q=escape(q); this.href="http://www.blogger.com/blog_this.pyra?t="+q+"&u="+u+"&n="+t;return false;’><img src="http://www.blogseye.com/blogthis/sb_blogger.gif" border=0 style="margin:0;padding:0;" title="Blog This Page with Blogger"/></a><a href="#" target="_new" onclick=’d=document; w=window; r=d.selection?d.selection.createRange().text:d.getSelection(); t="<$BlogItemTitle$>"; u="<$BlogItemPermalinkUrl$>"; e=escape("<a href=\"" +u+ "\">"+t+"</a><br/>"+r); this.href="http://www.livejournal.com/update.bml?mode=full&event="+e;’ ><img src="http://www.blogseye.com/blogthis/sb_livejournal.gif" border=0 style="margin:0;padding:0;" title="Blog This Page with LiveJournal"/></a> <a href="#" target="_new" onclick=’t="<$BlogItemTitle$>"; u="<$BlogItemPermalinkUrl$>"; this.href="http://m.twitter.com/home?status="+escape(t+" – "+u);’><img src="http://www.blogseye.com/blogthis/sb_twitter.gif" border=0 style="margin:0;padding:0;" title="Twitter this page"/></a> <a href="#" target="_new" onclick=’t=escape("<$BlogItemTitle$>"); u=escape("<$BlogItemPermalinkUrl$>"); this.href="http://digg.com/submit?phase=2&url="+u;’><img src="http://www.blogseye.com/blogthis/sb_digg.gif" border=0 style="margin:0;padding:0;" title="Digg this page"/></a> <a href="#" onclick=’t=escape("<$BlogItemTitle$>"); u=escape("<$BlogItemPermalinkUrl$>"); this.href="http://del.icio.us/post?v=4&url="+u+"&title="+t;’ rel="nofollow" target="_blank"><img src="http://www.blogseye.com/blogthis/sb_delicious.gif" border=0 style="margin:0;padding:0;" title="Bookmark this page with Del.icio.us"/></a> <a href="#" onclick=’t=escape("<$BlogItemTitle$>"); u=escape("<$BlogItemPermalinkUrl$>"); this.href="http://www.google.com/bookmarks/mark?op=add&title="+t+"&bkmk="+u;’ rel="nofollow" target="_blank"><img src="http://www.blogseye.com/blogthis/sb_google.gif" border=0 style="margin:0;padding:0;" title="Bookmark this page with Google"/></a> <a href="#" onclick=’t=escape("<$BlogItemTitle$>"); u=escape("<$BlogItemPermalinkUrl$>"); this.href="http://reddit.com/submit?url="+u+"&title="+t;’ rel="nofollow" target="_blank"><img src="http://www.blogseye.com/blogthis/sb_reddit.gif" border=0 style="margin:0;padding:0;" title="Bookmark this page with ReddIt"/></a> <a href="#" onclick=’t=escape("<$BlogItemTitle$>"); u=escape("<$BlogItemPermalinkUrl$>"); this.href="http://www.stumbleupon.com/submit?url="+u+"&title="+t;’ rel="nofollow" target="_blank"><img src="http://www.blogseye.com/blogthis/sb_stumbleupon.gif" border=0 style="margin:0;padding:0;" title="Add this page to StumbleUpon"/></a> <a href="#" rel="nofollow" target="_blank" onclick=’t=escape("<$BlogItemTitle$>"); u=escape("<$BlogItemPermalinkUrl$>"); this.href="http://technorati.com/faves?add="+u;’><img src="http://www.blogseye.com/blogthis/sb_technorati.gif" border=0 style="margin:0;padding:0;" title="Add this page with Technorati"/></a>
New! Here is a simple javascript that automagically adds all of the icons to any web page. Here is the result. Copy the code below into any web page. The code: <script language="javascript" type="text/javascript" src="http://www.blogseye.com/blogthis/blogthis.js"></script>
July 24, 2008 – change the location.href=url to this.href=url to let the actual link open a new window.
|
