tumblr themes, tumblr directory, tumblr fandom
Marking your Twitter feed (or any imported feed)
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...
...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:
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.
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.
Tags: feeds, tagsasclasses, theme
Replies to This Discussion
-
Permalink Reply by topherchris on -
Hi all, this is the first tutorial I've ever written in a public setting for anything ever. If anybody has any comments or questions, or is looking for further clarification or examples, here's the place to ask.
-
Permalink Reply by Jamie Martin on -
GAY GAY GAY GAY GAY GAY GAY GAY GAY GAY GAY GAY
-
Permalink Reply by topherchris on
-
That's not valid xhtml or css. Try again.
-
Permalink Reply by Jamie Martin on
-
#topherchris
homosexuality: 100%;
}
<html><div class="topherchris"><?php include("dumbarticle.php"); ?></div></html>
-
Permalink Reply by topherchris on
-
You are awesome, man.
-
Permalink Reply by Patrick Keefe on -
Thanks, man. I've been annoyed by that too. This has been very helpful.
-
Permalink Reply by N. Ortolano on -
I'm a bit new to Tumblr and Twitter. I want to incorporate Twitter into my Tumblr, but I'd prefer it to show up as a regular post. I update a lot from my iPhone and it's a lot easier to update quickly via SMS than from an email. When I try incorporating Twitter, the feeds page tells me I'm not posting a valid feed. What the hell am I doing wrong?
-
Permalink Reply by topherchris on
-
Hmm, probably a small thing. (Also, holy crap is Twitter slow right at this moment...)
The RSS feed for my updates is the following: http://twitter.com/statuses/user_timeline/777926.rss
Does yours look something like that?
-
Permalink Reply by N. Ortolano on
-
Ah, I saw what was happening. It was partially my fault, and partially the fact that my updates weren't showing up on Twitter. Both problems have been sorted now.
Thanks!
-
Permalink Reply by Jesse on -
Where does this code go? I'm new to css.
Is there a certain place i should insert
.twitter_com:before {
font-weight: bold;
content: "[Twitter] ";
}
-
Permalink Reply by topherchris on
-
Howdy. Go to "Customize" from your dashboard, and then hit the "Advanced" tab. You should be able to paste that into the "Add Custom CSS" box.
However, many themes are different and handle things in different ways. Let me know if that works or not.
© 2009 Created by topherchris on Ning. Create Your Own Social Network
