Blogger Images: Two Steps Forward, One Step Back

from here

Update 12-04 - This issue appears to be resolved on uploaded images now

Aside from the always ongoing image issues that pop up with Blogger most of the time, it seems that in trying to solve one bug, they have introduced another. Just speaking from what I'm seeing.

The Bug
When Blogger introduced the ability to upload a header image directly from the Layouts screen it was a good deal. Makes something that is relatively confusing easy to do. But there has always been a problem with header images uploaded this way when using a Custom Domain and it relates to some of the issues involved with using Picasa Web Albums as the image host for Blogger.

To try and make a long story short, Picasa Web Albums restricts images over 800px in size from displaying on outside domains, EXCEPT apparently blogspot.com is allowed through. PWA defines different images sizes/features by the folder in which images are accessed from (a bit more on that from an earlier post). So when you use the layouts feature to upload a header image, the code generated is using the full original size folder for that image (even if the image is less than 800px). Since this is blocked on outside domains, folks using the custom domain in Blogger and using this feature would find their header images disappearing (To confuse matters more, if it was in the persons browser cache already it would show for a bit, but to everyone else it was no go).

The Fix
So after all this time Blogger finally caught on, and seem to have put in a new folder that can be accessed from outside domains, and now the image header will upload to that directory. Here's an example url.

http://3.bp.blogspot.com/_KFUscpI6LaQ/R0-ljp6nQBI/
AAAAAAAAAkU/SIm-MYc35us/s1600-R/hamster2.jpg

The key part is the s1600-R folder, which is the new one. Previously the folder used was s1600. So the new -R folder apparently is only used by Blogger for the headers, and doesn't suffer the domain restrictions, so it should solve the problem for header images for custom domains. If someone has a problem with one previously uploaded, just reload it and it will use the new folder.

The New Bug
Well, that's all fine and dandy, but now images uploaded to the post editor for posts are using that same s1600-R folder for the large/linked size. Which is incorrect, and due to other oddities of the PWA setup will prompt for a download when accessed like that, instead of showing the image full size. Here's an example.

Click on the hamster and you'll be prompted to download the image.

If you look at the code produced, the linked image again is going to the s1600-R folder. Previously, linked images that should be displayed went to the s1600-h folder. This is all part of the convoluted ways that PWA restricts access to their images. The -h folder is supposed to show a webpage with the image embedded. And that is what was previously used for the large size posted images.

I assume this is system wide, and not a fluke with my account as I'm seeing it other places. At some point I also assume they will correct this.

Update
This is now marked as a Known Issue with a "workaround".

Corrected Image Code

Corrected code via the Known Issue. Hamster will display when clicked

Note the instructions. You not only have to change the -R folder to -h, BUT also have to change the folder before it on the linked image to the same folder the first image used. But Pete and the boys and girls are on the case.

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.

Blogger Feeling Lucky Widget (Random Post)

from phydeaux3

I wouldn't have thought many people would think something like this would be useful, but a recent post on Techcrunch goes ape over wordpress having a 'random post' widget now. I figured if wordpress has one, New Blogger should as well.

With that in mind, here is the Blogger Feeling Lucky widget. Since we are in the Google family, I thought using the 'feeling lucky' nomenclature was appropriate. It's a silly little widget that adds a link to a random post on your blog. It is available in one-click add a widget to your Layouts template, or for classic templates the raw code is available to add that works as well. Also, a slightly tweaked version of the code also allows FTP Blogger blogs to join in the fun. All the things you need to install are explained on the setup page, although it's pretty simple. Currently I have it installed under the sidebar search box, via the manual code provided for exact placement.

Blogger Feeling Lucky Widget Install Page

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

Notes

For those that may be interested, here's how it works. Nothing really earth shattering going on. In the initial page load, the scripts make a json call to the feed url. Here I'm only interested in getting the total number of posts in the blog, so the call is made to the summary feed (to keep load time minimal) and with only one entry returned. The total number of posts is returned in New Blogger in the openSearch:totalResults field, so take the total number of posts and then use standard means to generate a random number within that range. Then the link is created using that number as it's variable.

Now at this point we don't have a valid url yet, just a number. So when the link is clicked, another quick json call is made, using the random number generated as the start-index parameter to get that entry in the feed only, a quick parse of the results to grab that entries url, then good old document.location (Thanks to Pete changed to window.location and a few other small tweaks to keep the back button working) to switch to it.

Old Blogger did have a similar tweak by Mario Brhemenz, but like a lot of our Old Blogger stuff relied on an outside service (del.icio.us)to work. I don't know that I've seen one for New Blogger before.

I think everything works as it should, but if you find any issues lemme know.

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.

Blogger Archive Calendar

From phydeaux3

I had built an archive calendar for New Blogger and had it mostly finished around the end of January and put it up here soon after. I always intended to polish it off, and put up the instructions but I kind of got a little lazy on that. I've had more than one person commenting on it the last few weeks, so here it is. Finally. I think I have pretty much tested it out, so it should work ok (although who knows). Personally I have tested it in Firefox, Opera 9 and IE7, so it at least works in those browsers. An old version worked in IE6, so I assume this one does as well (if someone can verify that it would be nice). Safari, Konqueror etc, well you guys will just have to let me know (Not that I'll do anything about it, just nice to know).

As per my usual, the setup page is offsite at my googlepage. If you run into issues with the instructions or the script than let me know. Caveats : This is for New Blogger and Layouts templates only. Classic Templates aren't supported (at least not yet). FTP blogs can't use it. Private blogs can't use it. Also, the JSON calls I use are throttled at 100 entries each, and I didn't think it was worthwhile to check for more. So if you blog more than 100 posts in a month, this isn't for you.

Blogger Archive Calendar Setup

Is the main page, with supplemental ones for styles, and configuration options.

Styles Page
Settings Page

Optimize your Blogger title for better SEO

From gosublogger

Title's and meta tag's effect on serp is incredible , so what can we do to improve serp and seo for blogger blogs? The codes below will display the name of a particular entry without bringing the name of the blog in first position and this will affect our serp since titles are important for google spiders.Here're the codes :

• Goto Edit Html and find the codes below
  

  <title> <data:blog.pageTitle/> </ title>

• And change with this
  

  <b:if cond='data:blog.pageType == &quot;item&quot;'> <title> <data:blog.pageName/> | <data:blog.title/> </title> <b:else/> <title> <data:blog.pageTitle/> </title> </b:if>

• and save .Thats all , now wait for results ....
  

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.