Pandora Sidebars for Your Blog

Tonight we’re rolling out a really easy way to integrate your Pandora stations and favorite songs into your website or blog. For an example of what this looks like click here and look in the sidebar on the right-hand-side. You can add this kind of sidebar to your page by inserting just two lines into your homepage or blog template.
Let’s say that you’d like to share the stations you’re creating with everyone that visits your blog or personal homepage. We thought it would be cool if it was really easy to add these items to your page. To that end, we’ve created this new kind of feed to compliment our existing RSS feeds.
These new feeds are JavaScript includes that you can place into your blog or homepage template with one simple step. There are two different feeds. The first generates a nice looking list of all your stations. Your site visitors will be able to click to liste and it will always stay up to date with your most recently created stations. The second feed lists the songs your discovering on Pandora; choose from a range of styles including a compact version as well as a beautiful version that shows off the song album art. Your site visitors can click through to learn more about the song, listen to a sample, buy the track from iTunes, buy the album from Amazon, or create a new Pandora station from the song.
Creating the embedding code is really easy. Just visit this page: http://www.pandora.com/feeds#blog, pick a style, enter your Pandora username (your email address) and click the “Generate HTML” button. Copy the code that’s generated to the sidebar portion of your blog and you’re done.
For all the CSS hackers out there, you’re welcome to customize the display style with CSS. Each element has been given a unique id to make it easy for you to assign custom styles.
Update 3/13: We released a new version tonight that should make things work better in a wider variety of settings. In particular we’re using CSS that is a bit more explicit about what should be displayed and how. We’ve also updated the mechanism we use for opening new windows that should fix some problems with popup blockers. Thanks for your help and feedback on all of this these last few days.

Pandora

The Pandora Team http://www.pandora.com/

38 thoughts on “Pandora Sidebars for Your Blog

  1. Hi. I loved the site and the idea of Pandora. Really cool stuff. You should try to make some kind of link of the songs to a songs database like AMG All Music Guide, with all the discographie, biographie and so on. There are great music bands playing in my station that I’ve never heard of.
    Hugs from Brazil !

  2. With a little bit of CSS you can make these look pretty much any way you want. When you generate the include for your page you’ll get two lines back. The first is a CSS include, the second is the a JavaScrip include. To really customize the look, simply use the JavaScript include with the CSS include and then write your own CSS to control the presentation. You should be able to make it look just about any way you’d like.
    Tom
    CTO @ Pandora

  3. Sadly LiveJournal, MySpace, MSN Spaces, and the hosted version of WordPress don’t at this time don’t have a mechanism to support these kinds of includes. Until they open their platforms up a bit, there’s not a lot we can do on these services. On the other hand, TypePad, Movable Type, Blogger and self-hosted WordPress should all work great with this techniques.
    Drop us a note here or an email as you start putting a sidebar on your blog. We’d love to see them!
    Tom
    CTO @ Pandora

  4. this has nothing to do with this blog i just wanted to say
    WOW
    hats off to PANDORA and all the people making this website possible! i am truly amazed at the variety of songs available. i love hearing new bands and songs so this is absolutely perfect. my friend told me about it yesterday and i am already hooked. would be even better if this was a downloadable program instead of a website. something you could minimize to the system tray. but still.. wicked
    Melanie

  5. This is such a neat idea. The only thing is, when I select (for the Favorite Songs list) the white box with no cover art and generate the html for it, it makes a white box with the songs AND cover art. =( Not that big a deal I guess.

  6. What a wonderful idea! I added it immediately to my new blog. It would be even better if there were some way to make 5 random favorites appear, instead of just the last 5 songs marked as favorite…

  7. Hi there, this is really cool to play around with. However in stations.js were the stations are generated in an unordered list, an unfinished p-tag is placed within each list element (li-tag). This is a bit annoying so could you please remove that from the script? List elements shouldn’t be paragraphed so please don’t complete the tag instead. :)
    Thanks for a great service.

  8. When are you going to make an affiliate program? Currently I have my own “favorites” list that I have to alter by hand which links to itunes and makes me money from my music review website. I would rather use pandora’s generated lists because it will stay current with what I’m currently listening to and that is simply awesome. But then I don’t make money anymore.
    Any chance Pandora will have an affiliate program soon?

  9. Yes, I love you guys. I am tempted to simply attempt at loving a new gender as it is not male or female it is simply known as Genome.
    This is AWESOME, I added it to my site yesterday, so much easier than emailing the stations around.
    Now… a question, as I have already put it to them… why dear Tim, don’t you contact the boys over at Blogger and you two hop in bed for a little while and see what happens (I mean that in a hypothetical way – so if that reaaallly happens then no details please).
    So when are you coming back to NY, please please come back soon, it’s just an Acela train ride from your last leg in DC.
    Thanks again for making my desk days more enjoyable guys.

  10. Thanks, it’s very nice addition for building the Pandora (blog)sphere :-)
    When can we have the html code to display the current song played on our radios? (even better with a link to the public page where you can listen to the sample and go back to listen the hosting radio).
    Keep up the good work!
    Cheers – Cooli.

  11. i like the idea of having pandora on sidebar, but it doesnt excercise the idea well, i was expect a basic player on sidebar, kind of like myspace’s player, with pandora stations. hope that could happen in future :)

  12. Can you please make a player that plays one channel and will work on myspace? Something small and stylish but still effective.. Tons of people would use this, I know.

  13. There seems to be an error between Pandora’s HTML embedding and the social network, Ning.
    Ning heavily uses drag-and-drop modules that your members can customize on their profile, however it seems that if you post the HTML generated link into a text box and then drag it from the center to a sidebar, that as soon as it touches the sidebar you arrive at a pure white page with a non-css’ed version of your Pandora radio station/bookmarks that just continues to load endlessly.
    I will also write Ning support as well.
    Thank you.

  14. there is a MAJOR problem with this.
    when you put this on your blog and someone goes to one of your stations to listen to it, the player opens and then they are IN YOUR ACCOUNT.
    not cool.
    they can change your stations, change your password, etc.
    i can’t believe you have it set up that way.
    you should be able to post your station on your blog but NOT have to be signed in for people to hear them.

  15. do you think you could make a html gadget that plays a specific station someone chooses in the way of a traditional html radio gadget where you just click the play button to listen that people can add to their site.
    size:150px by 20px

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s