Tuesday, December 4, 2007

Photobucket tips


I implemented a new feature of blogger on the sidebar called slideshow. Like most features from Blogger it isn't quite finished, but i figured out how to get it to work, despite that there are no help files or blogger employees answering questions on the support forum.

This will be a convenient way for me to display new photos before I put them into their final album or use them in a post. If you hover over the slide show a back/pause/forward buttons will display. You can also double click on the photo to enlarge it, but it will not show the extra photobucket things like EXIF, Tags, or the other albums. To see that, go directly to the photobucket account using the link in the sidebar. The sidebar slideshow is in the "SS JQsLife" subalbum.

Blogger SlideShow Layout Element

Some photo hosting sites have widget features that generate a bunch of HTML/embed/javascript code, which can easily be botched up. For those using the layout feature of the new blogger, then can simply add the slideshow element to the sidebar. it appears that if you use Picasa from Google it may work, but if you use another photo server their is no place to enter your album information.

I use photobucket and the trick is to use the media rss feature with the Other provider. In photobucket go to the subalbum of your choice and look in the lower left for the rss feed, which is similar to your photobucket URL, but prefixed with "feed" and suffixed with "feed.rss". Copy this link. Select Other in the drop down box, paste this into the feed.

That's it, no fooling with javascript, no redoing your slide show and repasting, its done on blogger. Now simply add or delete photos in the subalbum and your photo slideshow will dynamically be updated via the rss feed.

Photobucket Tags

Usually when we think of tagging we think of tagging the whole entity (photo or post). In photobucket tagging refers to a portion of the image. When you tag a photo, a small square appears in the center of the photo and it can be resized and repositioned to tag a portion of the photo. Multiple tags can define multiple areas in a photo.

You can find the tagged photos by clicking on the tag list on the album page. When you are on a tagged photo you can use it in one of two ways. You can hover over a tag in the tag list under the photo and the rectangle will highlight over the area of the photo. You can also hover over an area of the photo and a bubble will open with the name of the tag.

One very popular use could be to identify people in group photos. Clicking on their tag will highlight them in the photo. Hovering over them will open a bubble with their name.

There is new embed code that will appear for a photo that has been tagged which is supposed to allow it to be shown in a blog. I have not worked with this yet.

Photobucket Descriptions

Now you can add multi-line descriptions to your photos. The best way to take advantage of these new description or tag features is to check the desired photos in the album page and then click TAG SELECTED at the bottom. This will show multiple medium size photos that can be tagged, described, or re-titled. You may want to shorten your title and include the detail in the description.

Posting Photos

Blogger allows using hosted photos by putting in the URL (photobucket Direct Link) of the photo. But when you click on the photo it will show you just the enlarged photo only.

With a little editing of the HTML, you can show the photobucket page which will show you other interesting things like the album, EXIF, Tags, Title and new multi-line description. Photobucket has another form of URL called Email & IM, this points to the Photo page, but if you use it in blogger it won't show the photo unless you edit the HTML.

There are two links in the HTML, one is HREF= that points to where you will be taken if you click on the photo and SRC= that points to where the photo is. So if you use the Email and IM link then you can jump to the page with the photobucket info with the HREF=. But the SRC= has "?action=view&current=" that needs to deleted for the photo to show up properly in the Blogger Post.

Another item you may want to adjust in the HTML is the <img style="width: nnn px;" where nnn is the width of the photo.

Sharing Photobucket Albums

This feature displays the most current photo and then has a link to the photobucket album. This is done by selecting the Share button. The code generated tends to be too wide, so the table width needs to reduced and an additional parm needs to be added to the SRC= for the photo "width=narrower" to allow for margin of the photo. This photobucket feature does not seem worth the trouble.

The same thing could be accomplished by using the Blogger Post Photo feature with the Photobucket Direct Link (rather than the Email & IM Link mentioned above) and then changing the HTML for the HREF= by deleting "xxxxx.jpg" where xxxxx is the name of the photo. Clicking on the photo will then take you to the album page.

Sharing Photobucket SlideShows

A photobucket slideshow can be viewed at the photobucket site or using the Share feature it can be added to a post on Blogger. The first step is to select the Create Slide Show button to the left and then drag photos into it. This is different from the Blogger Layout Feature in that it is statically defined. Changing the slide show means going to Photobucket, generating a new slideshow and its code and making a new post. This slideshow can have custom frames, watch for this option to the left of the slide show window.

Sometimes this slideshow can be too wide for your blogger post. There also should be a way to find the slideshow URL so you can send the reader to Photobucket to see a specific slideshow, where they will also have the option to see your other slide shows.

Photobucket Summary

Photobucket is one of several possible photo hosting sites, others include Picasa, Flickr, and Webshots. Photobucket allows an unlimited number of photos to be stored in public or private albums. The free service limits the size to 1024 x 768 pixels. Ifranview is a great tool to view your photos, crop, or resize them. Picasa incorporates local viewing of photos with an integrated connection to the hosting site. Flickr allows you to post your copyright preference and have other users comment on them but has a limited number of photos on its free service.


Status: Third Draft - Last Updated 12/17/07 3 am
See draft of next set of Photobucket Tips here on my new Popular Technology Blog.

32 comments:

Little Wing said...

You are so smart!
You figured that all out without any support forum!
You are Brilliant!!!!!!!

JQ75 said...

Thanks LW... I owe it to experience, as I said in a previous post, you can be engaged or in chair. And I find being engaged in my work so much more interesting.

I posted this solution on the support forum and already got a thank you from someone who was very frustrated with it not working right. Some of our discussions have prompted me to expand this post and add more tips.

Anonymous said...

Thank you, Thank you, Thank you!

If it wasn't for your tip, it would have taken me forever to figure out how to make MY photobucket album show up in the slideshow, and not as a post.

Thanks again, and God Bless!

Judith said...

Hi there! I found my way to your blog from the Blogger help forum too. It was my first time creating slideshow (in Photobucket)and I had the same experience. Using RSS feed I managed a couple of times to get it in the sidebar, but the pictures were much too wide. I made a new slideshow with thumbnail size pictures hoping it would work, but I haven't been able to post it in the sidebar at all since. I just get "unable to load".

I'm probably doing something stupid. Do you really have to paste in that enormous long link from the RSS?

I am so grateful for folks like you. When are Blogger going to get on to it for goodness sake!

Anonymous said...
This comment has been removed by a blog administrator.
JQ75 said...

Anon, you are welcome.

Judith, the photobucket feature on the Blogger slideshow layout feature does not work, there is no method to tell it your album name.

However the the Other feature allows an RSS feed. The RSS feed has the advantage of containing your album name so it works. So using the OTHER feature you will see a FEED box and you do indeed paste the entire RSS URL into that box.

JQ75 said...

(hee)^4,

I see you finally broke down and paid for proxify, but your cryptic wit makes it so easy to know who you are.

Now follow your own advice and get a life and move along.

Judith said...

Thanks for your response jq75. I tried the RSS feed over and over again, using Other as source, but I still keep getting "feed can not be loaded". The RSS link is on the sub-album page with stills as well as the slideshow, and I wonder if it is trying to load them all. If I double click on the slideshow and get it going on its own page, there doesn't seem to be an RSS link on that page.

When I look at the link, I do not see exactly "feed" for prefix and "feed.rss" for suffix, but something rather different. I can't repeat it here - Blogger won't allow it. Maybe I'm getting something different from you, but I read your instructions carefully. Or maybe my particular template won't accept it.

Not to worry, I have settled for my Flickr badge in my sidebar, which I put in via the HTML/Java layout element.

Applied Signs and Display said...

Thanks a million for the Slideshow tip, that was bugging me...

GoKnight said...

Thanks so much! This was a very helpful post! I wouldn't have thought of just pasting the feed and using other. If it's from Photobucket, you're kind of boxed into thinking you need to use the Photobucket option! Brilliant lateral thinkin!

Anonymous said...

Just starting my first blog (I'm a little slow) but it took me about 10 seconds to add this.
THANKS!!

Judith said...

After wittering on and on I'm now back to tell you that I've done it! Seems I just hadn't customised my links on Photobucket, so I was trying to load the wrong feed. Knew it would be some little thing. Well, I may not be the sharpest tool in the box, but I do persevere, and without your help in the first place, it would never have happened. Thanks JQ, once again.

Kellie said...

Thank you so much for figuring out how to get the slideshow to work.

A D said...

You helped me get my slide show on the side bar, however, why won't the names I labeled the pics come up on either slide show or the album.
See, I am making a blog page for our entire family. Most of us don't know each other or who everyone belongs to so I labeled the pics but it doesn't show. It doesn't help much to have the pics when it does't show who they are. Can you help me? Or do you think I would be better off doing something like this with MySpace?

Anonymous said...

How do you get rid of all the junk below the slide show from photobucket? When I place my slideshow as new HTML/Java Script it shows up cleary on my blog, but, has "Photobucket" and "Get Your Own" and "View Show" under it-yours doesn't have any of that junk. :)

JQ75 said...

To all who said thanks, your welcome and thanks for letting me know I helped.

ad... I don't know that myspace would do it any better. Hopefully Blogger will improve their support for the popular hosting sites and this could be easier. You could try using the photobucket slide show, either by embedding it into blogger (see Sharing Photobucket SlideShows above) using the Share tab at photobucket to generate the HTML code or by building a slide show and just linking to it. The former is likely to require HTML tweaking and the latter is easier but requires leaving your blog to see it.

Anon Jan 05, it sounds like you used the Sharing Photobucket SlideShows method. I haven't looked real close at this HTML to see if that part can be altered or if it is part of the Adobe Flash version it generates. I used the Blogger SlideShow Layout Element described above, it is a new and different layout element not the HTML/Java script element and not using photobucket's slide show. I could take a closer look if you send me your URL.

JQ75 said...

Good news Anon Jan 05, I took a closer look and it is very simple.

The HTML code generated for a slide show contains a <DIV> <EMBED> then three anchor <A> tags followed by the closing </DIV> .

The three <A> anchors contain the three buttons, delete them so the </EMBED></DIV> are at the end and the buttons will be gone.

Or if you like you can leave the last anchor so readers can view the show at the photobucket site and navigate to your other photos or slide shoes.

Emme Jay said...

Thanks so much. I would have never figured this out. I spent 2 hours trying to figure it out and once I read your tips, it only took 2 min. to get it done. THEY SHOULD PUT YOU ON THE PAYROLL!!!

Emme Jay said...

Thanks so much JQ. It took me 2 hours trying to figure this thing out. After reading your tips, I was done in 2 minutes. THEY SHOULD PUT YOU ON PAYROLL!!!! Thanks again

Anonymous said...

OMG! You are the man! I took out all those < a > things and it worked-I was even able to change the SIZE. Seriously-genius! Thanks so much!

Little Wing said...

See jq75?
I have been telling you, you are brilliant!
These readers of yours know it also!!!!!!

KimDoll said...

Okay, I must be doing something wrong. Can someone please tell me what it is?

I have a slideshow saved in photobucket.

I add a slideshow page element in blogger.

I change the source to Other.

I copy the Share URL from photobucket.

Paste it into Feed in Blogger.

Every time I get "feed could not be loaded"

KimDoll said...
This comment has been removed by the author.
JQ75 said...

Kim, its a little confusing there are two slide shows, Blogger's described under Blogger SlideShow Layout Element and photobucket's which is static and described under Sharing Photobucket SlideShows.

If you create a slide show in photobucket, it generates HTML (not a feed) and you use the HTML/Javascript Layout Element not the Blogger SlideShow Layout Element.

Blogger's feature is easier to use and dynamically responds to changes you make in the photobucket subalbum. You don't need to use photobucket's slideshow, you use a the feed URL on the lower left of the page.

JQ75 said...

I noticed that there are two feeds listed now for photobucket. The public feed and the album feed. The public feed will show all albums, but the album feed will show the specific sub album.

From a practical view, using a specific sub album allows you to use the other sub albums for other purposes and not have them show up in the slide show.

Anonymous said...

Hey Thanks for the tip on how to add the slideshow. I was going to pull my hair out! It finally worked because of your advice!

PUTOT said...

Thanks for sharing. It really helps! :)

God Bless...

Jefe said...

Judith, what do you mean "customize links" on photobucket. I keep getting the feed will not load message too, even though I am using the "other" tab. Anyone? Thanks

Stuti said...

hi,
I wish to add different slideshows as sidebars on the different blogpages.However,the slideshows on the sidebar of my homepage appear on each of my blog page.Is there anyway to restrict the sidebar content to one page only and then add some other content on sidebar of other page?

JQ75 said...

Kim, as I think about what I said, you may have some trouble with Photobucket's slide show in your sidebar, even with using HTML/Javascript. I am doing some more work on PhotoBucket's Slideshow. See my newest info on that here and an example of its use on my new blog here.

Candice and Putot you are very welcome, thanks for letting me know I helped. I see this post gets a lot of hits in my stats.

To all others looking for help, look at all of my photobucket tips (inluding this one) here.

Jefe, look at my response to Kim here and above, also look through my other photobucket tips.

JQ75 said...

Suti Kalra, if I understand your question, you'd like to have one slideshow for your home page and different ones for your different post pages.

Blogger has one template that serves both the main page and the post pages. Only a few things act differently on the main page vs post pages. If there is a way to do this it would take some complex coding using Blogger's proprietary Layout Element (Widget) Coding.

If you had different blogs you could have different slideshows for each blog (since each blog has its own template), slideshows come from a subalbum, so by putting photos in different subalbums you can have different slideshows.

If you use a photobucket's slideshow as I mention above, you can include different slideshows in different posts. My newest photobucket tip explains how to edit the photobucket HTML for inclusion in the post.

Dear Break Up Diary said...

Hi , What can I do if there is no feed url code/link ? Im looking for it in my subalbum but there is nothing on the left side only on the right side but there is direct link no feed url . Whatshould I do to create a slideshow on blogger ?