Marking your Twitter feed (or any imported feed)

[topherchris]

I import my Twitter feed into my tumblr at topherchris.com, but it's always bugged me a little that my "tweets" look like regular posts. I want them to look different, to be marked in some way so readers can easily discern if they're reading a Twitter post or a blog entry.

For more on feed importing: The Feeds page in your tumblr dashboard opens up an infinite number of possibilities -- from importing the content your other blog, to your latest Diggs, to anything that has a feed. (Although, please don't go crazy with this feature. Just because you could make a totally complete lifestream of your entire online activities with microscopic granularity doesn't mean it would be interesting to read.)

I've messed a good amount with Yahoo Pipes to tweak the Twitter RSS feed for tumblr so the tweets come in with some added text, like "topherchris twittered: " for example. Indeed, do a search for this kind of thing at Pipes and you'll see lots of people have tried this with varying success rates. That's got a whole other slew of problems, though, and just isn't very elegant.

I'm here to tell you there's an easier way. Forget tweaking RSS feeds... yuck. If you're comfortable editing your theme, then this is really pretty cool. (And if you're not comfortable editing your theme, that's okay. We'll try to help!)

The fine people at tumblr have done a very cool thing by creating a "{TagsAsClasses}" theme variable. The normal use of this variable would be to output any tags you've added to a post (under "show advanced options" when adding a new post) -- but tumblr didn't stop there. They instead did something awesome.

When you're importing feeds, this {TagsAsClasses} variable outputs the source of the feed. This means that adding this variable to your template will suddenly output "twitter_com" for my twitter feed. Tumblr's official list of theme variables has it all right there, even using Twitter as one of their examples.

As those official docs indicate, this variable is especially useful for classes -- that is, CSS class names. So if you do something like...

<div class="{TagsAsClasses}">{Body}</div>

...in your theme, you'll have your imported feeds individually marked up with unique class names.

What's this mean? It means that you can then add a little bit of CSS to the top of your theme to style this feed text however you want. You can do simple CSS stuff like changing the color or giving the text a border. But what if you want to actually add some extra text in there?

CSS2 to the rescue! You can use a a pseudo-element. I added a new CSS rule that looks like this:

.twitter_com:before {
font-weight: bold;
content: "[Twitter] ";
}

The ":before" is the key thing to notice there. Using the "content" attribute is asking the browser to output some text before the "twitter_com" class, which we set in the code above. Go look at topherchris.com to see this.

So there you have it. This isn't rocket surgery, and it's not a hack. This is exactly what tumblr probably had in mind when they added this new theme variable and populated it with the source of your imported feeds -- but it's so clever, and opens up so many possibilities, that it's definitely worth taking a look at.

[Iris Chamberlain]

What you want to do is set "{TagsAsClasses}" AS a class for each TYPE of post (text, photo, video, audio, etc). So if you do a search for "div class="normal-text"", this is the first type of post you'll encounter. Change that text to "div class="normal-text {TagsAsClasses}"". Repeat this for each kind of post.

[Guido Rosso]

Thanks for this! I got it working pretty well using custom CSS classes for imported feeds. Check it out at http://www.guidorosso.com/

[Debby Kilburn Kurti]

Thanks for the good tips here. I've gone through the steps and almost have this tweaked how I want it. I am importing about 7 feeds (flickr, 3 twitter, gabcast, youtube, wordpress) and would like each entry to identify where it is from and who posted it. In the dashboard it does show this:

I can't seem to get that to display on the actual public page however. I did the tweak you listed and at least on Twitter and Flickr it shows as << Posted via Twitter >> or << Posted via Flickr >>. Didn't seem to work for Wordpress & I haven't tried the other ones yet. What I'd like is a tag line above each entry that says something like "Imported from Twitter / debbyk". Any tips?

Public page is at http://k2family.tumblr.com.

Thank you!

Debby

[Justin McMurray]

Thanks for this. Am trying it now so fingers crossed it will work on my custom theme. On slightly different note, I am v keen to find out if I can create a custom RSS feed of a 'daily tweet digest'. Given I want to send my Tumblr to Facebook, I don't want to bombard them with loads of simultaneous individual tweets given that Tumblr only grabs the feed every hour or so. A single daily post of tweets would answer my problems. Playing around with Yahoo Pipes has been less than fruitful (cldn't get to work). Any other suggestions (for non-techie)!?