Add FriendFeed to the Top of Your WordPress Blog

Oct 2, 2008 -

Adding Friendfeed Feed to WordPress Content

I wanted to include my Friendfeed activity to my WordPress blog, but I wanted it to be a bit more prominent than a sidebar widget. So I put it at the top of my blog’s content on the main page. Here’s how I did it.

First I added the Friendfeed code normally used for a WordPress sidebar text widget to my index.php file.
Here’s what it looks like in my current theme’s index.php file.

That takes care of the code for your html. Now, to dress it up a little, I added the following CSS to the bottom of my theme’s style.css file.

/* Stylesheet - style.css */ /* friendfeed css */


.friendfeed.widget a {

   text-decoration: none !important;

   color: #c97e00 !important; // change this to match the color of your theme's link (a) color

   border: 0px !important;

}
.friendfeed.widget a:hover {

   text-decoration: underline !important; // my theme underlines the link on hover

   border: 0px !important;

}
.friendfeed.widget {

   width: 90% !important; // I wanted my feed to be 90% of the width of my main content

   background-color: transparent !important;

   border: none !important; // I did not want a border around my feed

}
.friendfeed.widget .logo {

    display: none; // This turns off the friendfeed logo at the top of the feed

}
.friendfeed.widget,

.friendfeed.widget div,

.friendfeed.widget span,

.friendfeed.widget img,

.friendfeed.widget table,

.friendfeed.widget tr,

.friendfeed.widget td {

  background-color: transparent !important; // this removes friendfeed's terrible white color

                                                           // background. Borrowed this from a now unknown source

}
.friendfeed.widget .feed .entry {

   font-size: 12px !important; // font size for entry

}
.friendfeed.widget .feed .entry .info {

   font-size: 8px !important; // font size for time and comment links

}

.friendfeed.widget .bottom { font-size: 8px !important; // font size for feed's bottom links background: none !important; border-top: 1px solid #794822 !important; }

And that’s how I did it.

Kanal Arıza

Thank you soooo much!!!

share flag

spam
offensive
disagree
off topic

Rob

Francesco, I'm assuming you're using this in your CSS for the bottom of the widget:

.friendfeed.widget .bottom {
font-size: 8px !important;
background: none !important;
border-top: 1px solid #794822 !important;
}

I'm no CSS expert, but maybe you could drop the font-size to 0. Google font-size and see what the options are.

Francesco Minciotti

Thanks for the useful tips.
However, I can't get rid of the bottom. I really don't like it: any idea on how to kick it out of the door?

Guiberube

Thank you soooo much!!!
Specially for the css part to remove the white color.

Glad I could help, Scott. This has been a very busy post recently!

scott

Thanks for this - the css example is perfect.
:)

Looks like the code tags aren't working here. You can get this code at your Friendfeed page. These is a variable in the code: num=4, where 4 is the number of Friendfeed items you want to display. This can be any number you wish.

I place this code within the content divs and right before the Loop. This keeps the feed at the top all the time.

Sorry for the code display problems. I'll look into it.