Carter Cole LinkedInCarters Twitter PageCarter Cole on Facebook Carter Coles RSS

Sunday, January 24, 2010

tweets inline any webpage with Blackbird Pie - Twitters new embedding service


RE: @venturebeat i totally wrote this service way before them so lame twitter stole my idea :( but … than a minute ago via DISQUS

its a pretty simple service called Blackbird Pie you just paste in tweet url and boom embed code is ready... so ends my development on this but i may stell make my conversation embed code... we will have to see

Heres the original... i readdy did make it first (look at the dates)

Everyone is going nuts for twitter... everyone has an account and everyone seems to be tweeting... and something that i noticed was that news stories are staring to have more and more screen shots of interesting or news worthy tweets and not including links to the original tweet... i think this is kinda lame because we cant see where it came from and taking a screenshot of tweet to just include it in a post is a waste of time in my opinion. So i went looking for an easy way to embed tweets into websites and surprisingly i came up empty handed :( thats where being a programmer has its advantages... i looked up the twitter API and got to work. i wanted something that would still look like a tweet so mimicked the layout of tweets from a stream and had it do some neat stuff like pull the users profile link text and colors so it was styled correctly and such and now when cool people like @mattcutts tweet about you you can show off the tweet without even having to take a screenshot

thats one of the reasons i think witter is so cool... its like you can just reach out and talk to companies and celebrities to interact with people who you probably would have never met. so after that way cool demonstration above heres the code
<script src=""></script>
its that easy! tid is the tweet id from the tweets url like the one aboves url is the part after /status/ is what you want. thats the unique id for that tweet and should be the tid=someidhere parameter that tells the javascript which one to pull...

please dont forget to tweet this like id like to get some good visibility on this gadget so we can stop seeing screenshots of tweets Original post on Easily embeding tweets

i also added some other cool features into it:

tid= is a required parameter for which tweet to pull but you can also use

width= is an optional parameter for how wide the div that is written should be

showreply=t is an optional parameter that adds a reply link so you can respond to the embedded tweet (also accepts showreply=true)

bgclr= is an optional parameter that is the background color of the tweet div. default is white so use bgclr=transparent to turn it off or to another color

showbdr=f is an optional parameter that turns top and bottom borders off (also accepts showbdr=false)

here is an example of the different parameters being used:

and then there was code...
<script src=""></script>

i intended this gadget to be used for people writing webpages and blogs and you usually have the ability to write a <script> but if you dont you can use the iframe version (for things like google sites)
heres an example:

and again the code:
<iframe src="" height="66" scrolling="no" frameborder="0" width="570"></iframe>
it takes all the same arguments as javascript version but you pass the parameter &iframe=t and use an iframe tag instead of script... id also recommend turning off borders and scrollbars. the default tweet height is about 66 but you may have to adjust as iframes cant resize themselves (note &iframe=true works too)

i had a few challenges when coding this... i wanted to make it super small and efficient without having to load a bunch of external javascript of css so i used code to emulate the a:hover pseudo-class and used all inline CSS. i also compressed the code with Google's Closure Compiler to get the javascript as tiny as possible. also twitter api returns the tweet text plain so i hacked up some regex i found so it would properly display the @username and #hashtag as well as whatever urls happen to appear. last problem i had was making the time messages that say like "about and hour ago" but an article i found had a good idea to steal some js from the twitter gadget so i borrowed and modified a small snippet of that so my time codes looked like twitters... i hope you find it useful and enjoy!

you may also like my script to embed all tweets about an url too

14 remarks:

Post a Comment

Link to this post if you found it usefull

tweets inline any webpage with Blackbird Pie - Twitters new embedding service