RSS
I was asked to share this technique....so here goes:
BuzzBoost by Feedburner gives you a snippet of JavaScript, built from any RSS or Atom feed, and you can paste this free code into the sidebar of your blog or page templates. The result is wholly integrated, not a widget that stands out or doesn't match.Please be mindful of any copyright issues concerning the content if it is not your own, but here's the gist of it:
- Grab the feed you'd like to import with a simple copy and paste. Look for the feed icon and right click and choose "copy link location" or "copy shortcut."
- Head over to Feedburner.com and create an account. This is where you'll manage your feed and snippet of code that republishes it.
- From the main Feedburner page paste the feed address in the field just under the words "Start FeedBurning Now. Type your feed or blog URL below" or on your account page look for "Burn a feed right this instant."
- Choose the default Feedburner address (or create your own in the space provided).
- Click Activate Feed.
- Choose "Skip directly to feed management."
- Choose "Publicize" from the tabbed row.
- Choose "BuzzBoost" from the left sidebar links.
- At this point you're given several formatting options via tick boxes.
You can always go back and change these settings later without having to change the code in your blog, so don't worry too much about getting it perfect. Most important are whether to replublish the feed as HTML (also known as Full Text) or Plain. Choosing HTML will retrieve links and thumbnails. Some feeds (like friendfeed.com) require HTML, some don't care. Play with the other formatting options such as whether or not to show things like date and author information, whichever you prefer. - Click the "Activate" button to see your results and get the javascript you need to republish the feed. Feedburner provides automatic insertion for Blogger or Typepad if you prefer. I like having more control in the design and like to install it myself, but am always sure to backup my template before I alter it. Blogger's use of widgets in the templates makes it a breeze to add any bit of HTML in the sidebar.
Feedburner also lets you further customize the output to seamlessly match your blog or website, and offers tips to help to help get you started. I've added the Cascading Style Sheet (CSS) code (seen below) to the header several times over, changing elements only to match the space where I drop the javascript:
< type="text/css">div.feedburnerFeedBlock {
margin-top: -10px;
font-family: Verdana, arial, sans;
font-size: 12px;
width: 100%;
background-color: #fff;
overflow:hidden; }
div.feedburnerFeedBlock p.feedTitle {
font-size: 100%;
font-weight: bold; }
div.feedburnerFeedBlock span.headline {
display: block;
border-bottom: 1px solid #aaaaaa;
margin-bottom: 10px;}
div.feedburnerFeedBlock span.main {
padding-top: 10px;}
div.feedburnerFeedBlock p.date {
margin-left: 0em;
font-size: 80%;
margin-right: 0em;
color: #aaaaaa ;}
div.feedburnerFeedBlock li {
text-indent: 0px ;
margin-bottom: 0px;}
div.feedburnerFeedBlock ul {
margin:0px;
padding-bottom:0px;
border-bottom:0px dotted #ccc;
list-style:none;}
div.feedburnerFeedBlock li a:link {
font-weight: bold;
text-decoration: none;
color: #40454b; }
div.feedburnerFeedBlock li a:hover {
font-weight: bold;
text-decoration: none;
color: #F96C84; }
div.feedburnerFeedBlock li a:visited {
font-weight: bold;
text-decoration: none;
color: #8B6969; }
div.feedburnerFeedBlock li a:active {
font-weight: bold;
text-decoration: none;
color: #F96C84; }
< /style > If you're going to start playing with CSS I do recommend going through the tutorials at W3Schools and then using Firefox and their Web Developer Plugin. It really does help you learn about deciphering source code or web pages and to identify those elusive elements that some publishers use when applying CSS.
I hope you've found this useful, and will be glad to answer any specific questions you may have in the comments.
update 6/29/08: In addition, to all remove images from the block add the following between the Style tags:
div.feedburnerFeedBlock img {
display:none; }
15 comments:
Thank you for this. It has been very helpful in me learning the ropes of BuzzBoost.
David
You're welcome, David, I'm glad you found it useful. :)
Thank you. You would be surprised how hard it was to find an example style sheet for buzz boost
To alter the feedtitle you have:
div.feedburnerFeedBlock p.feedTitle
I think it should read this:
div.feedburnerFeedBlock p.feedTitle a
well it worked for me. Cheers
Thanks, Alex!
THANK YOU THANK YOU THANK YOU!!!!!!!!!!!
Hello genius!
Jeez I wish I could get this far. Thank you for posting you own code, it was more informative than anything else I've found on the topic the last few days. I don't at all get how to identify the different ID's or whatever they are. I want to have 3 individual font colors, one for each 'thing' on 3 different lines, a separator between each of the articles, but no wide spaces between the stuff. Would the good Lenox happen to know anything about this?
Thanks either way. :-)
If you want the headline, the article and the date to appear different colors just do something like this:
div.feedburnerFeedBlock span.headline {
color: #aaaaaa ;}
div.feedburnerFeedBlock li a{
color: #bbbbbb ;padding-top: 10px;}
div.feedburnerFeedBlock p.date {
color: #cccccc ;}
Hope this helps!
is it possible to get more info? such as publish date? or # of comments?
You can select an option at FeedBurner's Buzzboost setup to show the publish date, but I don't think there's an option for comments. Some feeds will show the number of comments, depending on the source.
I'm stumped! Do you know how I can apply distinctly separate styles to two different BuzzBoost feeds that exist on the same page?
Here is my (work-in-progress)page:
http://www.preventtruthdecay.com/index_new9.htm
I want to leave everything as is, but want the feed for "CURRENT HEADLINE" at the top to be 38 pixels large.
It seems like such a simple task, but I've tried everything, with no luck.
Any help would be greatly appreciated!
PTD, you might try wrapping one of the scripts in it's own css declaration using "td style" or "div style" to differentiate between the two. Good luck!
I can't wait to see if I can figure this out when I get home! I have been looking to insert my blog as a column on my website's homepage. The BuzzBoost feed doesn't match the color scheme of my site and I was trying like hell to modify it. But the BuzzBoost help page wasn't very helpful.
What do you use to generate that jumble of tags on the right (above the calendar)? I think that's a cool way to display them. Thanks!
I can't wait to see if I can figure this out when I get home! I have been looking to insert my blog as a column on my website's homepage. The BuzzBoost feed doesn't match the color scheme of my site and I was trying like hell to modify it. But the BuzzBoost help page wasn't very helpful.
What do you use to generate that jumble of tags on the right (above the calendar)? I think that's a cool way to display them. Thanks!
Hi Animaltronyx, I'm using Compender's A Simple Blogger Tag Cloud Widget, glad you like it!
Post a Comment
Comments on this blog are held for moderation. All comments, except for personal attacks or spam, are welcome and remain the intellectual property of the original author. Please feel free to contact Marianne for assistance.