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
- Go to the Twitter widget page and customize your widget.
- Once happy with the colours and layout, copy the JavaScript code.
- Get a FREE Drobox account and install Dropbox.
- Open your Dropbox ‘Public’ folder.
- Create a new text file, add <html><body> at the top
- Paste the Javascript
- Add </html></body> at the bottom and save
- Change the name and file extension of the text file to “twitter.html”
- Right click the file (Windows) and “Copy Public Link”
- 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)
- Go to Posterous and login.
- Click > Settings > Edit theme.
- Click > Advanced – and edit your custom HTML.
- Decide where you want your widget to appear – I added mine after {/block:NotSearchOrTag}
- Add the following code, but adapt the dropbox link, width and height to match your own widget:
- Click ‘Save, I’m done’
- Admire your new widget.
- Leave a comment here linking back to you site so I can also admire it.
(Update September 2012: Twitter have A New Twitter Widget that has blocked the ability to have a widget on Dropbox!)
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
@hedgewytch Well I’ve only just posted it 10 mins ago 🙂
@richardmackney Ahh sorry, so Facebook gets it first lol x
added code to theme for http://stationx.posterous.com with luck it will work for @stationx account
Awesome Gordon, looks great!
@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 😀
@tookiebunten awesome stuff. Loving the flickr widget on there 🙂
@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. 🙂
@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
@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
@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.
It didn’t work for me, it just generated a blank space, but no twitter widget :S
Hi Elisa, let me see the URL you have for the dropbox page and I’ll take a look
http://ed3.posterous.com/ that’s it! thank in advance 🙂
Elisa, have you got a link to your dropbox file? … like this one http://dl.dropbox.com/u/1542199/twitter.html
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
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.
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 !!
Facking awesome sir. Oh the link, with pleasure http://l00ny-bin.posterous.com/
@L00NY_BIN awesome!
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
@L00NY_BIN excellent! thanks for sharing 🙂
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!
Please paste the public link here. Cheers
http://dl.dropbox.com/u/14646874/twitter.htmlthe same file in the same dir but with txt extension:http://dl.dropbox.com/u/14646874/twitter.txt
@_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?
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.
OK, that’s a bit of a shame though. Good luck 🙂
follow all the instruction and nothing changes on my posterous page 🙁
Hi @JuliaDuhan I’ve just checked your site and it’s showing for me in Chrome 🙂
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
.@Ezakimak hey glad to help. Love your ‘world in pictures’ 🙂
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
@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
@richardmackney I used Mac’s Texteditor. Will try again. Thank you!
Got it now! I used Dreamweaver…Is it the iframe that generates those ugly scroll bars around the block? Kudos #twitter #posterous
@filmatu Yeah, try increasing the height on the iframe to cater for longer tweets 🙂
Thanks for a wonderful HOWTO that worked like a charm. http://jeff.henshaw.orgMuch appreciated,Jeff
@Dingo great! nice to see it working – some great photos on your site too
@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 🙁
Help, what’s wrong with this code?http://dl.dropbox.com/u/31913225/twit.html
@atwice808 it looks OK, it’s loading correctly. What do you think is wrong?
It looks fine in Safari but it doesn’t show up in Explorer or Firefox? Any way to fix that?
@atwice808 OK, add some opening and closing tags to your text file <html><body> insert javascript </html></body> let me know
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. 🙁
@atwice808 You need to place the iFrame code just after {/block:NotSearchOrTag} see point 14. above … let me know if it works
All good now! Thanks so much!
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).
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??
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??
Hi Richard, great post, thanks! I think I need to tweak a few colours, but otherwise it’s all working..http://davidgoodchild.posterous.com/
@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.
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 🙂
@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!
@davidrgoodchild superb! colours look great now 🙂
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?
@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?
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?
@thisisashaK try this http://www.dropbox.com/help/16
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.
well I tried everything but I can’t get it to work. Sigh. http://dl.dropbox.com/u/33899052/twitter.html
@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.
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/
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 🙂
Oooh! Will do!
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 🙂
@Chuqui excellent! try adding margin 0 to your new HTML file 🙂
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?
@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.
Am not too sure what i’m doing wrong, but I am confused. 🙁http://dl.dropbox.com/u/1364324/twitter.html
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.
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?
Hi Duane, I’m away at the moment with only an iPhone so will take a look when I get back. Cheers
It’s all good…got it figured out after dumping TextEdit and using a html editor. Brilliant work-around!
What html edit did you use? I have the same problem. 🙁 Sent from my HTC—– Reply message —–From: "Posterous" <
@Feryx Lim, I used Komodo Edit: http://www.activestate.com/komodo-edit. Good for Windows, Mac, and Linux. Hope it helps…
Very helpful indeed! Thank you 🙂 am going to try it now. Sent from my HTC—– Reply message —–From: "Posterous" <
Thanks! http://forestispre.posterous.com/
Great! Thank so much! http://roncristy.posterous.com/#
Thanks, Richard! Worked like a charm: http://learningbusiness.net/
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 (⌒▽⌒)
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?
@dsrjarman try changing the ‘live’ to ‘true’ does that do what you want?
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?
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/
Thanks for your help!http://blog.zndr.co.uk
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?
@twentythreetwo hi Karen, can you provide the link to the dropbox page and I’ll have a look.
Sorry! It’s http://dl.dropbox.com/u/34121235/EtsyMini.html
Oh, it’s OK, it seems to be working now! Thanks!
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.
Hi Karen, glad it’s working, It was working for me too 🙂
Thanks for this: http://www.50plus20.org/
So helpful!
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.
Hi lma, it would be the same process really. Add the BBC code to a dropbox HTML file and embed it on Posterous 🙂
Many thanks. I'll give it a try.
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 🙂
w00t! 🙂
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>
oh that was the & nbsp ; (without spaces) tag 🙂
@DigitalPolish you could try adding < p > & nbsp ; < /p > just above the iFrame code (remove the spaces 😉
Thanks that’s sorted it 🙂
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!
@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.
I want to add it under the header and above the nav bar , but it doesnt work… 🙁 Can u help please ?
I want to display the twitter stream like they did on this page -> http://www.lepost.frI‘m not very familiar with “coding”…. 🙁
Richard this worked! So thankful for your prompt response. I’ll get it in the right place and go from there. Thanks again.
I used your instructions to get my twitter widget. Really great!
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!
@jbarrettpoulsen hi, sorry for the delay! I’m guessing you got it sorted as it all seems to work and looks great 🙂
Yes I managed to get it working – not totally sure how! Thanks 🙂
RichardThanks for the instructions. http://michaellord.posterous.com/ Not quite sure it suits the theme I’m using but your instructions worked great
@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!
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!
Thanks so much! just saved me a lot of time and hasslehttp://mrgsblog.posterous.com/
got it on first round, although not sure if it looks good paperclip.posterous.com – many tks!
YAY! Works perfectly for http://blog.pranab.in! Thanks a ton!!!
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!!
@MackIslandGal brilliant! thanks for the thanks! and great snow pics!
How come it is not working with me? It shows a bunch of weird codes in a scrollbar instead. Any help please? 🙁
Could I have a link please
Okay Richard, I did it the first time, but now it isn’t coming up on my mrgsblog.posterous.com I changed the template twice and no matter where I post this code along with your string: http://dl.dropbox.com/u/1779007/twitter.html it just shifts stuff down. I would love to put it in the sidebar right under “search” Any ideas?
Hi I tried out your trick but only got a clickable link below the search box. Think Twitter has fiddled with the widget code again? You’d think they’d make all of Posterous Twitter-friendly, being as they own the damn place…
Yes, I think they have, I posted about the new widget here yesterday:
http://richard.mackney.com/a-new-twitter-widget/
However, I think the old code still works, looking at the dropbox URL:
http://dl.dropbox.com/u/1542199/twitter.html so you could just view the source code and change the username.
I totally get what you mean about Posterous not being twitter friendly!
Thanks for your reply. OK my widget is just… screwy: https://dl.dropbox.com/u/51217061/twitter.html
I understand why Twitter wants you to always hit their dot-com page but, sheesh what the heck?!!
Hmm, I just checked and it looks like you can not create any new scripts using the old code and the new twitter widget is not working under dropbox 🙁
Gotcha. Well, twas worth a try. Thanks.
At least you know Google Search works!
Thanks for your reply. OK my widget is just… screwy: https://dl.dropbox.com/u/51217061/twitter.html
I understand why Twitter wants you to always hit their dot-com page but, sheesh what the heck?!!
FWIW this is the page I’m trying to add it to: http://saburo.posterous.com/ You can see the “widget” in action right underneath the search bar on the right.
Did you mean create a new text file in dropbox???? or other like textedit…?
do i then drag that file to drop,,, ijust get jibberish no twitter, your link worked, so think its in my dropbox prep…. ????
and its there in the preview but not once i save it.
also want it in my post section, where would i fnd that in the code. any hints
thaks
It looks like twitter have now closed the ability to do this 🙁
okay… i’m a dummy. i’ve been trying to make this work for 3 days. is it official that this just doesn’t work?
It seems that Twitter have A New Twitter Widget that has now blocked the ability to have a widget on Dropbox!
Such a great tutorial. Even someone as clueless as me was able to easily follow along. One question though, I’ve tried adjusting the box size (by trial and error), but it always seems to come out the same size no matter what numbers I enter. Any help or recommendations would be appreciated. Here is a link to my page, so you can see what is going on:
http://thisisyourspace.posterous.com/10-great-reasons-to-buy-a-home
I”m looking for a way to add subscribe via email to my blog but can’t find a template that support this, can you help? Thanks
Hi, try the Jetpack plugin. This has email subscription: http://wordpress.org/extend/plugins/jetpack/