Citer v0.9.2 - Easily Citing the Web
Citer is a simple bookmarklet for embedding Tweets on your blog or website with semantically rich data.
Why not just make screenshots of tweets, you say?
I’ve seen a lot of website owners/authors using screenshots of tweets as quotations. As insignificant as that might seem, it’s just wrong.
I recently wrote a post: So you’re quoting a tweet? Please don’t do it with a screenshot explaining why it makes me sad to see this.
Citer is the outcome of the need to produce better connections to twitter posts and do it easily. Future versions will go beyond just quoting tweets…
Bookmarklet
Drag the above bookmarklet to your bookmark toolbar, or right-click and choose ‘bookmark’ or ‘add to favorites’.
When you want to quote a tweet on twitter, for those of you who might not have noticed, clicking the date of the tweet brings you to the individual, permalink post page – Use the bookmarklet from here.
Features
There are a few options to get you started.
Some of the options include:
- Html4 or 5 – because you still might not be ready to make the jump
- Microdata – using the new Microdata specification, you can add some much needed semantics and interoperability
- External or Inline Styles – I would highly recommend not using inline styles mainly because it may give some strange results – It’s a much better idea to create your own stylesheet for these especially if you’re going to use it on a regular basis. Here’s an example stylesheet that’s used in the example below
- Include User Design – because that’s what makes a twitter post unique. The user design is done in inline styles.
- Self-Updating – I’ll be making plenty of updates which will automatically be reflected in the bookmarklet.
Example Tweet (using html5, external styles, microdata and user design)
This is an example of what Citer created, embedded into this post:
I am performing on the Jersey Shore tonight, so please only refer to me by my Jersey Shore nickname: "The Solution".
Conan O'Brien
Example Code (using html5, external styles, microdata and user design)
This is the code that Citer produces from the above example. At first it might seem like a lot of code, but there is a lot going on with the user’s design…
<article class="citer"
style="background:url('http://a2.twimg.com/a/1277506381/images/themes/theme15/bg.png')
repeat scroll 0% 0% transparent;" itemtype="http://data-vocabulary.org/Person" itemscope>
<div>
<blockquote style="font-family: georgia; color: rgb(51, 51, 51);"
cite="http://twitter.com/ConanOBrien/status/15053038046">
I am performing on the Jersey Shore tonight, so please only refer to me by my
Jersey Shore nickname: "The Solution".
</blockquote>
<p>
<a style="color: rgb(0, 132, 180);" rel="bookmark"
href="http://twitter.com/ConanOBrien/status/15053038046">
<time datetime="2010-05-30T16:57:53">Sun May 30, 2010</time>
</a>
</p>
<hr>
<p>
<a style="color: rgb(0, 132, 180);" itemprop="url" href="http://twitter.com/ConanOBrien">
<img itemprop="photo"
src="http://a3.twimg.com/profile_images/728337241/conan_4cred_bigger.jpg"
width="73" height="73">
</a>
</p>
<p>
<span itemprop="nickname">
<a style="color: rgb(0, 132, 180);" href="http://twitter.com/ConanOBrien">ConanOBrien</a>
</span>
</p>
<p itemprop="fn">Conan O'Brien</p>
</div>
</article>
Example Tweet (using html4, internal styles, no microdata with user design)
This is an example of what Citer created and embedded into this post. This is the most tag soup-like in the code and contains a lot of padding definitions to compensate for styles you’ve probably already set.
If you find your embedded tweet is a little funky, just let me know.
The one bonus of using this method is that it looks good in some feed readers, where as the above examples can look a bit strange…
I am performing on the Jersey Shore tonight, so please only refer to me by my Jersey Shore nickname: "The Solution".
Conan O'Brien
Example Code (using html4, internal styles, no microdata with user design)
This is the code that Citer produces from the above example:
<div style="padding: 1em 2em; display: block;
margin: 0pt 1em;
background-image: url('http://a2.twimg.com/a/1280858668/images/themes/theme15/bg.png');
background-color: rgb(62, 83, 129);">
<div style="padding: 2em 2em 3em; background-color: rgb(255, 255, 255);">
<blockquote style="margin: 0pt 0pt 0.2em; border: 0pt none; font-style:
normal; font-size: 2.4em; font-family: georgia; color: rgb(51, 51, 51);"
cite="http://twitter.com/ConanOBrien/status/15053038046">
I am performing on the Jersey Shore tonight, so please only refer
to me by my Jersey Shore nickname: "The Solution".
</blockquote>
<p style="padding: 0pt;">
<a style="text-decoration: none; color: rgb(0, 132, 180);"
rel="bookmark" href="http://twitter.com/ConanOBrien/status/15053038046">
Sun May 30, 2010
</a>
</p>
<hr style="margin: 1em 0pt; height: 1px;">
<p style="padding: 0pt; line-height: 0pt;">
<a style="color: rgb(0, 132, 180);" href="http://twitter.com/ConanOBrien">
<img style="float: left; margin: 0pt 1em 1em 0pt; width: 48px; height: 48px;"
src="http://a1.twimg.com/profile_images/728337241/conan_4cred_bigger.jpg"
width="73" height="73">
</a>
</p>
<p style="padding-top: 0.6em; line-height: 1em;">
<span>
<a style="font-size: 2.4em; text-decoration: none; color: rgb(0, 132, 180);"
href="http://twitter.com/ConanOBrien">ConanOBrien
</a>
</span>
</p>
<p style="line-height: 0pt;">Conan O'Brien</p>
</div>
</div>
Updates and Feedback
This is a very beta version and I would love to get as much feedback as you can provide. The details on submitting bugs or features are in the footer of the app.
There is a running list of features that I am going to work into Citer and hopefully they’ll come quickly. And soon enough I’ll be expanding this to outside of Twitter.
I’m hoping you can put this to use.
Steal this code
All the code is licensed under a GNU General Public License v3 and is free to use and distribute. The bookmarklet is packed so take a look at the un-minified version
If you put it to good use, please let me know.
Enjoy!