Getting an OpenID and using your blogspot url

from phydeaux3

Blogger talks about enabling support for using your blogspot (or custom domain) urls available (probably by becoming an OpenID provider as well as a consumer). But if you want it now, you can. There are several free, open, easy places to get an OpenID that you can use anywhere that supports it. MyOpenID is one, but there are others. Takes just a minute to sign up.

So to use that in a Blogger comment, you would select Any OpenID and enter in your OpenID url in the url field. For example I got one that is http://phydeaux3.myopenid.com and I can login and authenticate through MyOpenID in a similar manner as above. Only thing is, the comment links to http://phydeaux3.myopenid.com instead of here. How to change?

Well a quick google found OpenID Delegation which gives the code you can add to your blogspot template so it can function as your OpenID url. This is specific to myopenid, but other OpenID providers would be similar.

<link rel="openid.server" href="http://www.myopenid.com/server"/> <!-- For delegating OpenID v1.x-->
<link rel="openid.delegate" href="http://XXXXXXXXX.myopenid.com"/> <!-- For delegating OpenID v1.x-->
<meta http-equiv="X-XRDS-Location" content="http://XXXXXXXX.myopenid.com/xrds"/> <!-- For delegating OpenID v2.x-->

Just copy and paste the above in the head of your template. Change the XXXXXXXXX's to whatever your openid name is. Now, if I choose Any OpenID from the dropdown, I can put in http://phydeaux3.blogspot.com as the url. It will then show as the link in the comment.

While there seems to be a heated debate about Blogger removing the URL field from anonymous comments, I think this is a better system. If a little more complicated. Now I'm the only person who can use phydeaux3.blogspot.com in a Blogger comment link, so no one can impersonate me (Not like that's been a problem for me). If Blogger goes through and becomes an OpenID provider as well, and integrates it into your Blog a little easier, then it will be even better. One would hope anyway.

New Blogger Widget for Picasa Web Albums

Notice - as of May 17, 2007 Picasa Web Albums now offers their own easy to use flash embedded slideshow, effectively making this one obsolete. Picasa Web Albums Now with Slideshows.
Everything here still works, but the native flash presentation from Picasa Web Albums is slicker and probably what you want to use if you want a slideshow.

To follow up on my previous post about Picasa Web Albums now making their data available in JSON, I've gone ahead and worked up a customizable (somewhat) one-click widget creator for the New Blogger.

The widget will work for either displaying your public albums, or for listing images from one particular album. Right now only one of these PWA widgets can be displayed on a page.

I've tried to keep it somewhat simple on the options, but here is the complete rundown of what each option means.

The first input box is where you type in your Picasa Web Albums username. Your Picasa Web Albums username is usually(the first part before the @)of your google account username, but can be changed. If you are unsure, goto Picasa Web Albums and sign in. Click on SETTINGS in the UPPER RIGHT of the page and then scroll down to your Gallery URL. Your current gallery url will be in the format
http://picasaweb.google.com/USERNAME
After you enter in your Picasa Web Albums username, then click the Submit link. The page will then fetch the list of albums and display their names in a drop down menu. Select the album you want to display from that list, or choose the Show All Albums option.

Display the Widgets Title -- Select whether or not to display the actual name of the widget on your blog. Defaults to displayed. The default name is Picasa Web Albums but it can be changed when adding.

Show as SlideShow -- This is a poor man's slideshow. Will display one image at a time, rotating them with their links. Is set to default to the SlideShow.

If the SlideShow is deslected, then two additional options appear. To show as either a Vertical or Horizontal strip. They do what they say. If you want a vertical strip of images choose vertical, if you want the images to line up horizontally, then choose horizontal.

Show Album Title as Header -- This sets whether to display the title at Picasa Web Albums for the selected group as a header. Defaults to displayed.

Show Border Around Image -- Sets whether to show a border around the images.

Slide Show Speed in Seconds(10 max) -- If the slideshow is selected, then this sets the interval for displaying the next image. Defaults to 5 secs. 10 seconds is the max.

Number of Images to Display (20 max) -- Sets how many images (or albums) to display. Default is All but the upper limit is 20.

Size of Thumbnails -- Sets the size of the displayed images, you have 3 choices. The default is 160px, a small 64px size, and an extra small 48px.

Border Color (in Hex) -- Sets the color of the images borders (if shown) in hexadecimal format. Default is black (#000). You can use either 3 or 6 hex numbers. The # should not be entered.

After you are satisfied with the settings, click the "Generate Widget and Code" button. You can view or use the raw code if you want (could be used on any webpage) but if you are in New Blogger then click on the "Add Picasa Web Album Widget" button.

If you have never added a one-click widget before you may want to read first the Blogger Help page "How do I add third-party page elements to my layout?" but it's pretty simple. Once the widget has been added you can drag it wherever it's needed.

The widget creator has been tested to work in will probably work from most browsers, has been tested in IE7, Firefox 2 and Opera 9. The displayed widget tested in all those and appears to work in Safari as well. I don't think it would be an issue for any browser, but you never know. Also I think I've tested just about ever possible combination of options, but I may have missed something.

So if you got this far then here is the widget creator. Widget Creator for Picasa Web Albums and New Blogger

Ricardo Santos has made a Portuguese translation available at Widgets para o blogger - Phydeaux3

Note - May 14, 2007 Post was rewritten to update the instructions for a sligtly updated version of the widget maker

Note - 4-24-07 Moved my personal Widget out of the sidebar into this post, as I need the sidebar real estate for other stuff. :-)

Note Added-3-22-07 Widget Maker Updated to work with new Picasa Web Albums API changes. Widgets made before this date most likely need to be remade to work fully.

Picasa Web Albums Example Widget

Natural

• 
• 
  
• 
  
• 
  
• 

Code for New Blogger Tag Cloud / Label Cloud

from phydeaux3

Due to overwhelming demand (ok, it was one person) I've gone ahead and wrote up the code and explanations on how to setup and use the highly desireable Label Cloud for New Blogger. Because everyone wants a tag cloud for Blogger. I think everything is correct there, but if you try to set it up and run into any problems I blame Avatar. :-)

I've set the page up off-site since I don't feel like mucking with code in the Blogger post editor at the moment. And if you have any questions feel free to ask. Pay close attention to the BACKUP YOUR TEMPLATE before proceding notice. Here's the link to the setup and instructions...

New Blogger Tag Cloud / Label Cloud Setup and Instructions

One thing I might add, the cloud is done with javascript so it will only display when javascript is enabled. But the widget includes a noscript section so that users without javascript enabled will still get a normal label listing.

Feedburner - FeedCount Chicklet Text

Feedburner is a very popular feed aggregator and provides a host of services which you can tap on to publicize and promote your Blog. One widely used service is their FeedCount Chicklet which displays your Blog Feed's circulation statistics. The chicklet can be static (displaying the number of “readers”) or animated (showing the number of “readers” via feed). Although you can change the background and text color for the graphic display, there is no option for you to change the text. This hack will explain how to change and personalize the FeedCount Chicklet text as well as to change the animation settings so that it rolls the text more than once.

For those who have yet to sign up for a Feedburner account, consider doing so right away. Now that it is under the Google family, there is an easy way for you to channel all your Blogger feed
subscribers to Feedburner. Login to Blogger, and under Settings ->Site Feed, enter your Blog's Feedburner Feed address into the box beside “Post Feed Redirect URL.” Readers who click the “Subscribe to: Posts (Atom)” link or the RSS icon in their browsers will be redirected
to your Feedburner Feed.

FeedCount Chicklet

When you are logged into Feedburner account and are viewing your Feed details, click the Publicize -> FeedCount tab. This is where you can generate a code to display a chicklet in your Blog which shows the subscriber count. Whether or not you already have a high number of
subscribers doesn't really matter. A nice chicklet can draw readers' attention and make it easy for them to click the Feed link.

Choose the custom colors of the body and text and click “Activate”. You will be given a HTML code for the Chicklet. We have to edit this code. Open MS Notepad (usually found under All Programs -> Accessories in Microsoft Windows) or a word processor program. Copy and paste this code.

Static FeedCount HTML Code

The static FeedCount code will look something like this:-

<p><a href="http://feeds.feedburner.com/ TipsForNewBloggers"><img src="http://feeds.feedburner.com/~fc/ TipsForNewBloggers?bg=99CCFF&amp;fg=444444& anim=0" height="26" width="88" style="border:0" alt="" /></a></p>

This is the standard FeedCount chicklet you see:-



To change the word “readers” to some other text such as “Viewers”, insert this other code (shown in red). You can change the word “Viewers” to other text, but because of the space constraint, keep it to no more than 7 characters.

<p><a href="http://feeds.feedburner.com/ TipsForNewBloggers"><img src="http://feeds.feedburner.com/~fc/ TipsForNewBloggers?bg=99CCFF&amp;fg=444444& anim=0&amp;label=Viewers" height="26" width="88" style="border:0" alt="" /></a></p>

The FeedCount chicklet now looks like this:-



You
can change the text to capital letters or include characters, e.g.,“*FANS*”, and your new FeedCount Chicklet will look like this:-



Animated FeedCount HTML Code

The animated FeedCount code is rather similar except that the animation value is set as “1” instead of “0”.

<p><a href="http://feeds.feedburner.com/ TipsForNewBloggers"><img src="http://feeds.feedburner.com/~fc/ TipsForNewBloggers?bg=99CCFF&amp;fg=444444& anim=1" height="26" width="88" style="border:0" alt="" /></a></p>

When the page is loaded, viewers will see a one-time rolling text of number of “readers” via feed.



The word “readers” can be changed to other text like “Members” by inserting the code (shown in red):-

<p><a href="http://feeds.feedburner.com/ TipsForNewBloggers"><img src="http://feeds.feedburner.com/~fc/ TipsForNewBloggers?bg=99CCFF&amp;fg=444444& anim=1&amp;label=Members" height="26" width="88" style="border:0" alt="" /></a></p>

This is the new FeedCount Chicklet you will see. Insert the relevant text that suits your Blog.



Animation to play more than once

Other than the change in text, you can also set the animation to play more than once by changing the anim value to something greater than 1. Since readers are unlikely to stay on a page for too long, it need not be too big a value. When the page is refreshed, the animation count will start all over again.

<p><a href="http://feeds.feedburner.com/ TipsForNewBloggers"><img src="http://feeds.feedburner.com/~fc/ TipsForNewBloggers?bg=99CCFF&amp;fg=444444& anim=50&amp;label=Friends" height="26" width="88" style="border:0" alt="" /></a></p>

Our animated FeedCount Chicklet will now look like this:-



Further reading:-

Another useful service that Feedburner has is their Headline Animator. You can create a nice animated banner that automatically displays the titles of your recent posts. Read more about it in our guide at Animated Banner with Rotating Headlines.