web analytics

Rob Westbrook

Rob Westbrook

Rob Westbrook

Adding Friendfeed Feed to WordPress Content

October 2, 2008, by Rob, category blog

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.

7 Comments

  1. Rob |

    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.

    Reply
  2. 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.

    Reply

So, what do you think ?

Follow

Get every new post delivered to your Inbox

Join other followers:

%d bloggers like this: