search
Carter Cole LinkedInCarters Twitter PageCarter Cole on Facebook Carter Coles RSS
Showing posts with label gadget. Show all posts
Showing posts with label gadget. Show all posts

Sunday, January 24, 2010

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

UPDATE: TWITTER HAS MADE THEIR OWN

RE: @venturebeat i totally wrote this service way before them http://j.mp/bQjwjt so lame twitter stole my idea :( but … http://disq.us/dm2zkless 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="http://cartercole.com/embedtweet.asp?tid=6610422429"></script>
its that easy! tid is the tweet id from the tweets url like the one aboves url is http://twitter.com/mattcutts/status/6610422429 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="http://cartercole.com/embedtweet.asp?tid=8062317551&width=550px&showreply=t"></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="http://cartercole.com/embedtweet.asp?tid=8117878735&iframe=t" 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

Sunday, September 27, 2009

Embed your Google profile into sites with this cool badge

so i love my google profile and want to be able to share it everywhere so ive added some updates to my script that drops the icons from the profile.

you can now embed a large badge on your site with one line of code (i got the idea from here but mines better :)

so to embed this: [326 x 122]


all you need is one line of code:
<script src="http://cartercole.com/gpicons.asp?user=[username]&type=2"></script>

Thursday, September 24, 2009

google profile icon gadget | show off your social bookmarks

so I love Google and one of the cool things i have found now is Google profiles (if you haven't made one yet get on that). i wanted to be able to put my string of social bookmarks into a page. the explanation is below but heres the code to use the script along with some examples

you may also be interested in the other widget i made to embed a google profile badge

Carter Cole

<script src="http://cartercole.com/gpicons.asp?user=[user]&width=[100]&limit=[5]"></script>

Matt Cutts <script src="http://cartercole.com/gpicons.asp?user=mattcutts"></script>

Tim O'Reilly (limit = 5) <script src="http://cartercole.com/gpicons.asp?user=timoreilly&limit=5><"/script>

Jeff Huber (width = 100) <script src="http://cartercole.com/gpicons.asp?user=jhuber&width=100"></script>

i also did css classes on each element (you may need the css !important)

image class = "google-profile-img"

anchor class = "google-profile-link"

wrapper div = "google-profile-gadget"

i think one of the best features is the links and reader uses your profile links see?

i have all my profiles linked to from there but i wanted to be able to embed them into pages(like google reader did). rather than trying to fight and get the data from google i decided to go about the problem myself. First i thought i was going to have to do parsing and checking to find the right favorite icon but then i found that google had done my work for me(thanks). you can do this...

http://www.google.com/s2/favicons?domain=[domain]

http://www.google.com/s2/favicons?domain=wellsfargo.com

http://www.google.com/s2/favicons?domain=seomoz.com

http://www.google.com/s2/favicons?domain=pipes.yahoo.com

so then i made a asp page to spit out some js to write the icons...
there are 3 optional parameters
  1. user=username (this is the last part of the profile url)
    http://www.google.com/profiles/Carter.Cole
    (if you dont set a user it uses mine)
  2. limit=number (this sets the number of icons that the script should spit out) [default is 100]
  3. width=number (this is used to make the icons show up in a block) [its the div width that holds the icons]

please let me know if you have any questions / comments / concerns id love to hear from you