Add Twitter to Posterous using Dropbox

January 21, 2011 By 126 Comments
Add Twitter to Posterous using Dropbox Social Posterous

One of the current issues with Posterous is the lack of support for JavaScript. One way to add widgets to your site is to host the JavaScript on another site and display it on Posterous using an iframe.

Some people don’t have the web space to host widgets, but not everyone realises that Dropbox can be used to host web pages.

HOW TO:
Add a Twitter Widget to Posterous using Dropbox

  1. Go to the Twitter widget page and customize your widget.
  2. Once happy with the colours and layout, copy the JavaScript code.
  3. Get a FREE Drobox account and install Dropbox.
  4. Open your Dropbox ‘Public’ folder.
  5. Create a new text file, add <html><body> at the top
  6. Paste the Javascript
  7. Add </html></body> at the bottom and save
  8. Change the name and file extension of the text file to “twitter.html”
  9. Right click the file (Windows) and “Copy Public Link”
  10. My public link now looks like this: http://dl.dropbox.com/u/1542199/twitter.html (view the source of this page to see the code)
  11. Go to Posterous and login.
  12. Click > Settings > Edit theme.
  13. Click > Advanced – and edit your custom HTML.
  14. Decide where you want your widget to appear – I added mine after {/block:NotSearchOrTag}
  15. Add the following code, but adapt the dropbox link, width and height to match your own widget:
  16. Click ‘Save, I’m done’
  17. Admire your new widget.
  18. Leave a comment here linking back to you site so I can also admire it.

Related:

Related posts

Filed Under: Blog Tagged With: ,
About Richard Mackney

Sharer of thoughts and Photography from an iPhone while touring the UK in a Caravan and drinking Beer. Co-creator of @fishmedia and two small fry.

  • hedgewytch

    Why oh why didn’t i see this before I started building with WordPress ;(and why aren’t your posts appearing in my Posterous subscriptions list? I keep missing out

  • Richard Mackney

    @hedgewytch Well I’ve only just posted it 10 mins ago :)

  • hedgewytch

    @richardmackney Ahh sorry, so Facebook gets it first lol x

  • Gordon Tant

    added code to theme for http://stationx.posterous.com with luck it will work for @stationx account

  • Gordon Tant
  • Richard Mackney

    Awesome Gordon, looks great!

  • Richard Metzler
  • tookie bunten

    @RichardMackney great post. I’ve taken your example and have ran with it. I now have a twitter, flickr and vimeo widgets on my posterous page http://tookiebunten.com great stuff and thanks for sharing :D

  • Richard Mackney

    @tookiebunten awesome stuff. Loving the flickr widget on there :)

  • tookie bunten

    @RichardMackney All from your instructions. I'm just playing follow the leader. Expect a few more how do you do that questions having now had a good poke about your sight. All that facebook liking and trending stuff. Very interesting. Your site is a great example on how flexible posterous can actually be. More than just email posting. :)

  • Richard Mackney

    @tookiebunten I’ve noticed your flickr badge needs to open the images in a new window. Try changing the source code in your dropbox for the source code here … http://dl.dropbox.com/u/1542199/flickr-badge.html

  • tookie bunten

    @RichardMackney cheers I hadn't even thought to try & click on a link. Just chugged I got it to work. I'll change it when I get home. Thanks for the help :) Sent from my iPhone

  • tookie bunten

    @RichardMakney thanks for the javasctipt wizardry. I've made the changes to the dropbox file and just waiting for them to filter through to Posterous. It seems to cache stuff. So hopefully you'll see the changes soon :) Thanks again.

  • Elisa Diaz

    It didn’t work for me, it just generated a blank space, but no twitter widget :S

  • Richard Mackney

    Hi Elisa, let me see the URL you have for the dropbox page and I’ll take a look

  • Elisa Diaz

    http://ed3.posterous.com/ that’s it! thank in advance :)

  • Richard Mackney

    Elisa, have you got a link to your dropbox file? … like this one http://dl.dropbox.com/u/1542199/twitter.html

  • Elisa Diaz

    Yes I do :S This is what my code look like:{/block:NotSearchOrTag} <iframe src=”http://dl.dropbox.com/u/24221001/Twitter.html”></iframe>I copied it from the HTML editor. But it’s the same you suggested us to use, but the problem remains :S

  • Richard Mackney

    Hi Elisa, the Twitter.html file does not have any code in it. If you want to email me richard@mackney.com I can help further rather than on here.

  • Elisa Diaz

    Hi, Richard you were right, I tried a couple more times and I got it right, it was my mistake, thanks a lot for your help, it is a great widget !!

  • L00NY BIN

    Facking awesome sir. Oh the link, with pleasure http://l00ny-bin.posterous.com/

  • Richard Mackney

    @L00NY_BIN awesome!

  • L00NY BIN

    Just made a tweak to the height value as I was getting a scroll bar, this seems to be the case if the number of tweets requested &/or size goes over the specified height. To fix this I just increased the height by 150px in the html file & widget coding. This has now got rid of the scroll bar and also allows for long tweets to be shown #win

  • Richard Mackney

    @L00NY_BIN excellent! thanks for sharing :)

  • Кира Deep

    Hello! I’ve tryed to do that. I’ve copyed Public link but when i want to browse it – dropbox shows me an 404 error. So if i upload twitter.txt it loads it.help, please!

  • Richard Mackney

    Please paste the public link here. Cheers

  • Кира Deep
  • Richard Mackney

    @_kiradee interesting. it either doesnt exist, or has got confused! can you just change the extension of the txt file to html and see if it loads?

  • Кира Deep

    Richard Mackney, it’s because of special restrictions of dropbox for russian users.So, i changed my hosting back to tumblr and happy)No problems, javascript enabled (for especial hits counters) + i’ve added Disqus comments.But thanx a lot to u.

  • Richard Mackney

    OK, that’s a bit of a shame though. Good luck :)

  • Lucy Effendy

    follow all the instruction and nothing changes on my posterous page :(

  • Richard Mackney

    Hi @JuliaDuhan I’ve just checked your site and it’s showing for me in Chrome :)

  • Ezakimak

    Hello Richard,Just wanted to say a massive THANKS for this post. So helpful and easy to follow. What a great workaround!x10,000 internets to you sir!http://ezakimak.posterous.com/Have a great day!Ezakimak

  • Richard Mackney

    .@Ezakimak hey glad to help. Love your ‘world in pictures’ :)

  • Filmatu

    Hello Richard,Can you see why my widget code is not rendering well? I have created atext edit document, changed the file name and extension and uploaded to public folder on dropbox but none…http://dl.dropbox.com/u/12343836/twitter.htmlThank youÁlvaro

  • Richard Mackney

    @filmatu it looks like you need to make the text file in a text editor/notepad rather than Microsoft Word as that is turning the text into a HTML page

  • Filmatu

    @richardmackney I used Mac’s Texteditor. Will try again. Thank you!

  • Filmatu

    Got it now! I used Dreamweaver…Is it the iframe that generates those ugly scroll bars around the block? Kudos #twitter #posterous

  • Richard Mackney

    @filmatu Yeah, try increasing the height on the iframe to cater for longer tweets :)

  • Jeff Henshaw

    Thanks for a wonderful HOWTO that worked like a charm. http://jeff.henshaw.orgMuch appreciated,Jeff

  • Richard Mackney

    @Dingo great! nice to see it working – some great photos on your site too

  • Richard Mackney

    @littlemissmegsy as far as I know, Google read the address of the page the gadget is on to display the members. As it is hosted on Dropbox it’s giving the wrong address. We can only hope that Google create a workaround :(

  • Hello, thanks for visiting! :)

    Help, what’s wrong with this code?http://dl.dropbox.com/u/31913225/twit.html

  • Richard Mackney

    @atwice808 it looks OK, it’s loading correctly. What do you think is wrong?

  • Hello, thanks for visiting! :)

    It looks fine in Safari but it doesn’t show up in Explorer or Firefox? Any way to fix that?

  • Richard Mackney

    @atwice808 OK, add some opening and closing tags to your text file <html><body> insert javascript </html></body> let me know

  • Hello, thanks for visiting! :)

    Thank you! It worked! Now, is there a way to make the box line up with everything else? It’s flushed all the way to the left. So sorry…I’m not very good with coding. :(

  • Richard Mackney

    @atwice808 You need to place the iFrame code just after {/block:NotSearchOrTag} see point 14. above … let me know if it works

  • Hello, thanks for visiting! :)

    All good now! Thanks so much!

  • girodilento

    Just got this going on my own site – thanks for the tutorial. Haven’t quite got the sizing right but it’s ok for now: http://girodilento.com/ – it’s in the footer and I don’t think I can put it on the side with this theme (shame).

  • Asha K.

    Hey Richard, I just followed all these steps, and for some reason I keep getting this when I click on the link from my dropbox. It just comes up as code. Am I doing something wrong?? https://dl-web.dropbox.com/get/Public/twitter.html?w=a7426e21Help! I added the opening and closing tags too, still just comes up as code. I’ve tried it now in both safari and firefox, could it be the version of both browsers I am using??

  • Asha K.

    Hi Richard, I followed all these steps, but I am having problems. Whenever I click on the link from my dropbox it just comes up as code, not the widget. I have tried using firefox and safari and still no luck. Here is the link:https://dl-web.dropbox.com/get/Public/twitter.html?w=a7426e21Could it be the versions of both browers I am using??

  • David Goodchild

    Hi Richard, great post, thanks! I think I need to tweak a few colours, but otherwise it’s all working..http://davidgoodchild.posterous.com/

  • Richard Mackney

    @girodilento it is a shame, there would be a way to float it in a div on the right with a bit of playing. Nice site BTW.

  • Richard Mackney

    Hi @thisisashaK I’m not sure your Dropbox link is the correct public link. It also sounds as though you are seeing code because you are not editing the source in a text editor?Get the Dropbox link working and let me know so I can have a look :)

  • Richard Mackney

    @TheKaliumKid that looks awesome! glad to help. It’s so much easier not to have to go into the Posterous admin when designing! Also try hosting your CSS elsewhere with FTP so you can quickly change styles when testing!

  • Richard Mackney

    @davidrgoodchild superb! colours look great now :)

  • Asha K.

    OK so I tried it all again, I copied and pasted my twitter widget code into a text edit doc, added the tags at the top and bottom, and saved it as a .html. I then uploaded it to the ‘public’ folder in my dropbox and that is the code I get. https://dl-web.dropbox.com/get/Public/newtwitterwidget.html?w=088b3ddfIs there something I am doing wrong? I even tried it with and without the html tags just as trial and error, but nothing changed. I don’t know how else to get the dropbox link working?

  • Richard Mackney

    @thisisashaK when I use that link I am getting denied access and the URL doesn’t quite look how it should (should be like http://dl.dropbox.com/u/1542199/twitter.html ) so I’m wondering if you are grabbing the public URL?

  • Asha K.

    hmm im a little confused then. How do I get a link like the one everyone else is posting? I am following all the same steps. After uploading my .html file to the public folder in my dropbox, i click on it. Is there something else I am supposed to do instead?

  • Richard Mackney

    @thisisashaK try this http://www.dropbox.com/help/16

  • Asha K.

    oh! Now I get what I did wrong! Here is my link, http://dl.dropbox.com/u/33899052/twitter.htmlLet me know if that works when you click on it.

  • Asha K.

    well I tried everything but I can’t get it to work. Sigh. http://dl.dropbox.com/u/33899052/twitter.html

  • Richard Mackney

    @thisisashaK getting there :) … now the dropbox link works. Now when I view the source of your new page, I can see there is a lot more code than you need. You need to edit the source of that page. At the moment “Cocoa HTML Writer” is converting your twitter script into a viewable page. Ideally you would just edit it with a basic text editor and make sure that the source code only contains the twitter script.Hope that works. Don’t give up.

  • pia roxas

    Thanks for this! A very lucid, simple-to-follow, super helpful tutorial. Got it to work, but still ironing out size settings. Thanks again! :) http://piamanila.posterous.com/

  • Richard Mackney

    pia roxas, Thank you! it’s looking good, you may benefit from setting the margin to 0px; in the body of your new HTML file :)

  • pia roxas

    Oooh! Will do!

  • Ricardo Barra

    Hi Richard,Thanks a lot for this tutorial. Now I have my Twitter widget at http://placerdigital.net and I’m ready to go for the Flickr and Facebook widgets!Regards from Chile :)

  • Richard Mackney

    @Chuqui excellent! try adding margin 0 to your new HTML file :)

  • Asha K.

    Hey Richard, its me again! Following back up to your last comment on my Code problem, how do I get my code into a viewable page?

  • Richard Mackney

    @thisisashaK open Cocoa HTML Writer and view the source. There will be a lot more code in there than what’s required. Alternatively, start again with a basic text editor rather than a HTML editor. Hope this helps.

  • Feryx Lim

    Am not too sure what i’m doing wrong, but I am confused. :( http://dl.dropbox.com/u/1364324/twitter.html

  • Jeroen Fossaert
  • Duane Morelli

    Hi Richard, tried it and I get a blank space with a scroll bar with code if you highlight it. The Dropbox file is at: http://dl.dropbox.com/u/29150714/twitter.htmlAny thoughts? I used TextEdit on a Mac.

  • Duane Morelli

    Hi Richard, I tried but all I’m getting is a blank space with a scrollbar. If you highlight the area to the left, there’s nothing but code. The Dropbox file is at: http://dl.dropbox.com/u/29150714/twitter.html. Any thoughts?

  • Richard Mackney

    Hi Duane, I’m away at the moment with only an iPhone so will take a look when I get back. Cheers

  • Duane Morelli

    It’s all good…got it figured out after dumping TextEdit and using a html editor. Brilliant work-around!

  • Feryx Lim

    What html edit did you use? I have the same problem. :( Sent from my HTC—– Reply message —–From: "Posterous" <

  • Duane Morelli

    @Feryx Lim, I used Komodo Edit: http://www.activestate.com/komodo-edit. Good for Windows, Mac, and Linux. Hope it helps…

  • Feryx Lim

    Very helpful indeed! Thank you :) am going to try it now. Sent from my HTC—– Reply message —–From: "Posterous" <

  • Forest Anderson
  • Kiran Balegar
  • Ron Cristy

    Great! Thank so much! http://roncristy.posterous.com/#

  • Ted Major

    Thanks, Richard! Worked like a charm: http://learningbusiness.net/

  • Steven Villaverde

    Sweet. Such a nice & simple tip. Looks easy now looking back, although used it for adding an analytics tracking snippet. Anyhow, just felt compelled to drop by to say thanks. Have a good one. Cheers mate (⌒▽⌒)

  • David Jarman

    Took a little while, but I think I’ve got it – many thanks Richard:http://www.davidjarman.info/I tweaked the widths: the iframe is about 15px wider than the widget as the widget wasn’t centred. I was missing the edge of the widget getting a horizontal scroll bar.I’ve edited the code in the Dropbox file to try and get the tweets to loop (‘true’) but they don’t seem to be doing so… any thoughts?

  • Richard Mackney

    @dsrjarman try changing the ‘live’ to ‘true’ does that do what you want?

  • David Jarman

    Doesn’t seem to. I wonder if I should have ticked ‘poll for new results’ when first creating the widget. I can’t see that variable in the text – might it be the ‘version’ number?

  • Adrienne Scissons

    I was having the same issues as @Feryxlim and @thisisashaK in that I could not seem to get the public dropbox link to display the widget (was stuck on displaying the raw code). Once I used an actual HTML editor (Komono worked perfectly – thanks @dgmorelli!) the rest of the steps were very easy and I was able to get it working right away. Here’s my blog: http://thedailypursuit.com/

  • Alexander Wilson

    Thanks for your help!http://blog.zndr.co.uk

  • Karen

    Hi Richard, can’t see what I’m doing wrong here, but it works in Explorer but not Firefox. http://www.twentythreetwo.com/, can you spot the problem?

  • Richard Mackney

    @twentythreetwo hi Karen, can you provide the link to the dropbox page and I’ll have a look.

  • Karen
  • Karen

    Oh, it’s OK, it seems to be working now! Thanks!

  • Karen

    I’ve checked on all browsers but it appears that mine isn’t working on Firefox 7.0.1 only, must just be that version as it works on older versions.

  • Richard Mackney

    Hi Karen, glad it’s working, It was working for me too :)

  • John North

    Thanks for this: http://www.50plus20.org/

  • DC Buppie

    So helpful!

  • lma

    Thank you for this. Do you know how I can install BBC learning widget into my posterous spaces. It would be useful for my students.

  • Richard Mackney

    Hi lma, it would be the same process really. Add the BBC code to a dropbox HTML file and embed it on Posterous :)

  • lma

    Many thanks.  I'll give it a try.

  • PilgrimChris

    I have just discovered this site thanks to @tookiebunten even though we follow each other on Twitter Richard lolI will be hoping to implement a lot of your tips on my own posterous blog :)

  • Richard Mackney

    w00t! :)

  • digitalpolish

    Hey! This is great… My blog felt naked without my Twitter feed. After switching to another browser (Safari wouldn’t play ball, re-pasting the link (I put a link to you twitter feed on my site at first!) and changing the dimensions my widget is now up an running on my blog. My only problem is I can’t create a gap between the section above me widget. I’ve tried using the   tag but don’t really know what I’m doing. Any suggestions? Cheers!My blog is: http://http://digitalpolish.posterous.com/Here's the HTML: {block:LinkCategories} {% if curlinkcategory.title == “Links” %} {Label} {block:Links} {Label} {/block:Links} {% endif %} {/block:LinkCategories} {block:LinkCategories} {% if curlinkcategory.title == “Follow” %} {Label} {block:Links} {Label} {/block:Links} {% endif %} {/block:LinkCategories} </aside> <iframe src=”http://dl.dropbox.com/u/4111304/twitterpost.html”></iframe>

  • digitalpolish

    oh that was the & nbsp ; (without spaces) tag :)

  • Richard Mackney

    @DigitalPolish you could try adding < p > & nbsp ; < /p > just above the iFrame code (remove the spaces ;)

  • digitalpolish

    Thanks that’s sorted it :)

  • Michael Smith

    Richard, would love your assistance on this. Followed your tutorial through, can’t get the widget to produce. Here’s my site: http://www.kishwaukeeyouth.com Here’s my dropbox link: http://dl.dropbox.com/u/15936241/twitter.html I am moving our youth website to Posterous. We use Twitter for, among other things, a phone tree service during camps/retreats. It’d be great to for this workaround to happen, thanks for your help!

  • Richard Mackney

    @fighterkites if you look at the source code of your dropbox file you’ll see that it contains a lot of HTML. You’ll need to go into the ‘view source’ section of Cocoa HTML Writer to paste the code – or try notepad. Hope this helps.

  • @Yniim

    I want to add it under the header and above the nav bar , but it doesnt work… :( Can u help please ?

  • @Yniim

    I want to display the twitter stream like they did on this page -> http://www.lepost.frI‘m not very familiar with “coding”…. :(

  • Michael Smith

    Richard this worked! So thankful for your prompt response. I’ll get it in the right place and go from there. Thanks again.

  • Paul Carmody
  • Σωτήρης Νικολόπουλος

    I used your instructions to get my twitter widget. Really great!

  • James Barrett-Poulsen

    HI Richard, thanks for the great post. I think I followed the instructions, but like some other people here I get a blank space when I insert the code. Can you see what I might have done wrong?http://dl.dropbox.com/u/4242236/twitter.htmlThanks so much!

  • Richard Mackney

    @jbarrettpoulsen hi, sorry for the delay! I’m guessing you got it sorted as it all seems to work and looks great :)

  • James Barrett-Poulsen

    Yes I managed to get it working – not totally sure how! Thanks :)

  • Michael Lord

    RichardThanks for the instructions. http://michaellord.posterous.com/ Not quite sure it suits the theme I’m using but your instructions worked great

  • Richard Mackney

    @ml13ml Hi Michael, tweaking the frame height may be a good idea. I like the stuff on your site, your cad drawings of mobile interiors interests me greatly!

  • Don Setor

    I don’t seem to get it I’ve pasted the code in Custom HTML but can’t see any changes. I think I’ve rather messed up my posterous. Help please!

  • James Gorcesky

    Thanks so much! just saved me a lot of time and hasslehttp://mrgsblog.posterous.com/

  • Mark Povey
  • papercliphk

    got it on first round, although not sure if it looks good paperclip.posterous.com – many tks!

  • Pranab Chatterjee

    YAY! Works perfectly for http://blog.pranab.in! Thanks a ton!!!

  • Mackinac Island Gal

    Thank you so much for this post! http://mackinacislandgal.posterous.com/Also thank you for continuing to answering everyone’s questions. I found your replies to some of the comments to be incredibly helpful for trouble-shooting, and with a couple of little tweaks was able to get my twitter feed up. Was even able to get up a flickr widget on top of that :) Thx!!

  • Richard Mackney

    @MackIslandGal brilliant! thanks for the thanks! and great snow pics!