Quite a while ago we added support for oEmbed in both 23 Video and 23 Photo Sharing. This makes it easy to turn a URL from either service into a piece of HTML which is can be embedded into a web site or a blog. For example, this makes it easy to embed video into a WordPress blog post by simply pasting a link to a video into your editor.
I won’t dig too deeply into the technical stuff since there isn’t much to say: oEmbed allows a URL or a link to be turned into a full piece of HTML in a structured fashion. On 23 Photo Sharing the oEmbed endpoint is http://www.23hq.com/23/oembed and on 23 Video it is http://your.domain.com/oembed.
Now, from WordPress 2.9 and onwards you can use oEmbed in your blog posts. For example, you can put in http://www.23hq.com/steffen/photo/5672108 into your editor and have it be displayed not as a link, but as a photo scaled to fit your design. For administrators of WordPress sites this trick is also a way to control which content can safely be embedded into posts — even if you don’t allow <embed>, <object> or , <img> tags in posts.
To set this up, you’ll need to add a little piece of code to your WordPress installation; for example in the bottom of .wp-includes/media.php. For 23 Photo Sharing this line is:
wp_oembed_add_provider(‘http://www.23hq.com/*’, ‘http://www.23hq.com/23/oembed’ );
For 23 Video the code line varies with the domain you’ve chosen for your video site, but something like this would do the trick:
wp_oembed_add_provider(‘http://tv.dmi.dk/*’, ‘http://tv.dmi.dk/oembed’ );
After this a video from the site you’ve set up is embedded simply by inserting a link into your blog post.
A few days ago, we asked you to test the new comments section we’d been working on. Now, we’ve made about nine or ten extra tweaks based on the feedback and the new comments section is online on 23 Video. The upgrade includes better spam protection, it features buddy icons from Gravatar, it is faster — and (at least to our fingertips) it feels a lot better. And then there’s integration with Facebook Connect.
Connecting and posting to Facebook
I don’t want to bore anyone the details of Connect (and if you’re familiar with the interwebs, this probably isn’t the first you’re hearing of it…), but it is basically a way for Facebook users to use their profiles elsewhere on the web. In this case, Connect will let users link their Facebook profiles to comments posted on a 23 Video site. This means that they won’t need to key in their name and contact information, that they’ll have their buddy icons posted alongside their comment — and, most importantly, users can re-post their comments on their Facebook walls.
When a user re-posts a comment to Facebook, we’ll even attach your video for playback directly on the user’s wall in order to drive more traffic back to your video site.
We’ll reveal a few more Facebook tricks over the coming weeks, so there’s no link to activate the feature under Distribution yet. If you want to use it on your site though, go to http://your.domain.com/distribution/facebook-app to set it up.
And also… the default buddy icon
When there’s no icon to show for a commenter, we’ll display a simple, default buddy icon. The default icon will change over the coming days (it’s a little generic for our tastes), but you can also set up your own default icon. Simply upload a (quadratic) file called no-buddy.gif under Design → Files to add a little of your own flavour.
I’ve fallen into a bit of a black hole of development these past few days. Usually, we’re pretty focused on bringing you guys new features, but this week I’ve dedicated way too much time to make an existing 23 Video feature bet…. Well, I was going to say ‘better’, but let’s settle for ‘different’ for now.
I’ve never loved how comments work on 23 Video. Feature-wise they’re pretty awesome — you’ll get three different kinds of spam-protection, content monitoring, post-editing, notifications and more. But comments on 23 Video and Visualblog have always felt — well — wrong. In fact, the comment feature on 23 Photo Sharing just feels better, so I wanted to duplicate some of that feeling. (And, I’ll admit it, add a few extra features just to have something to tell the PR people upstairs: “No no no, the code monkeys aren’t wasting time down here. We’re building the future!”)
After days of tweaking, I still only have a prototype. It does all the same stuff you’ll know from 23 Video: You’ll still be writing your name and email alongside the comment; there’s still different spam-protection mechanisms in the browser; and there’s still a spam filter on the back-end. You can still get notifications and you can still delete a comment after it’s been posted. I’ve removed comment editing though, and there’s no threading or quoting.
There’s some new goodies as well: To lessen the burden of handling spam, users are now asked to complete a captcha to submit a comment flagged by the spam filters. We’ll be displaying user icons from Gravatar alongside comments. And it integrates with Facebook Connect. So you can log in using Facebook to avoid filling in name and email, and you can post a comment to your wall on Facebook.
So far, it’s all just a prototype — none of these improvement have made it into 23 Video yet. Before we go that far, I wanted to ask you: How does the new comment form feel to you?
Try out The Comment Form Prototype and post your impressions here. (And please, please, please. Don’t just try to comment. Try to break it.)
This weekend we released some new features on 23, the biggest of which (literally) concerned the design of the photo pages. The other notabvle improvement in the go-around, however, was Twitter and microblog integration. You’ll find the control panel for these features under Options -> Status Updates. Using this panel you can connect to Twitter or to Ping.fm.
Now, here’s a short intro to microblogging with 23…
Posting automatic status updates
Over the past few months we’ve had short status updates listed in the header of user accounts. These messages are automatically generated from photos uploaded publicly, i.e. “Steffen has uploaded 7 photos to the album New York”. To have these messages posted to Twitter or any other connected microblog, simply set Auto-post 23 status to microblog to Yes when you connect the blog.
Now, whenever you upload a public batch of photos to 23, we’ll update your network with a suitable message and a short link back to the album, the tag or whatever.
Microblogging a photo with your own message
When you’ve set up Twitter or Ping.fm you’ll find a link to Microblog this photo in the sidebar next to every public photo. Click the link, write your message, and click the Update button. That’s all.
Posting photos to Twitter from your mobile phone
We’ve been allowing users to upload photos via email and then auto-blogging those incoming photos for a while now. This feature has been expanded to include microblogs as well: Simply send a photo and it’s caption to your secret email address and we’ll manage the distribution for you.
To set up this feature, first connect your 23 account to a microblog. Then browse to Settings for mail upload and add a new address. To complete the set-up click the Edit link, select Public and check the box next to Twitter and/or Ping.fm. After you’ve clicked the Save button you’ve got yourself a simple email-to-23-to-microblog chain.
But Twitter is *so* 2008 and I like (insert name here) better…
We thought you’d say that — which is why we’ve added support for Ping.fm. Ping.fm let’s you distribute your status updates to more than 30 social networks such as Facebook, Jaiku, Friendfeed, LinkedIn and Identi.ca. This means that you’ll never be limited to Twitter or any other altmodisch, over-crowded service.
When you’ve signed up for Ping.fm, simply connect 23 to Ping and then Ping to your favorite site — and you’re good to go.
That’s about it for now. We’ve been quite busy today building a tool which would fit perfectly on to this list, but we’ll keep that to ourselves for now. Until then, don’t forget to follow 23 on Twitter.
Mashfot is a nice soup of stuff about photography — illustrated with photos from 23 and something called flickr.
We wanted to write a quick plug for Migratr, which is a very basic tool for moving photos between 23 and some secondary and lesser known photo-services such as Flickr, Picasa and SmugMug. It’s Windows-based, extremely simple to use, and it allows transfers in all directions between the supported sites. So that’s just one more reason to try out 23.
If you want to know more, check out Download.com’s review of the application.
At 23 we’ve chosen to allow programmers to access our service by writing a few lines of code, and we’ve also chosen a scheme for doing this which overlaps with other photo sharing sites. This approach means that 23 can most often be supported in 3rd party application quite easily — in fact we’ve written about this before.
One example of such an application is the one written by Michele Campeotto and released in an open source fashion. This led us to try a simple experiment over the weekend: Could we rewrite an existing application to support 23 in five minutes or less. Sure! In fact, a bit of search-and-replace was enough for us to be able to release a The 23 Uploader for Linux: If you’re on a Linux system, try it out by downloading this file. Installation notes are provided in the readme file, but it’s basically just a matter of typing in a single command.
The larger point of this post? It illustrates that even the lowly programmers behind 23 can rip off and re-fashion an existing application to his own needs. So why shouldn’t you be able to do so — or at least urge smarter people than yourself to do so? If you know of a great tool for editing, sharing, uploading or sending photos, you should take charge and call on them to support 23 as well.
It’s Friday afternoon and it’s time to relax. And what’s better than playing around with some nice JavaScript code on an evening of?
This week Google launched a new service called Google AJAX Feed API, which allows you to download any public Atom or RSS feed using only JavaScript. Google handles all the complexity of retrieving and parsing the data for you.
This means that you can take any feed from 23 and add a few lines of code to your web page to show the photos from the feed in any manner you see fit. (In fact, you could already do this by getting data directly from 23, but that’s hardly the point right now…)
An example: A neat slideshow of photos tagged 23, loaded through the feed API.
This is were you say: Hm, I can already do that with 23. Why bother? I cooked another example to demonstrate a badge of four recent comments to your photos, which utilizes an rss feed with content not ordinarily available through badge form.
Please note: The code in these example is particularly dreadful — it’s only quick and dirty demo after all. We’re discussing if it would make sense to add a little extra information to the rss feed (a is the case on filicio.us for example). Let us know if you have a great idea for a feature to pursue in this manner…
As a follow-up and an answer to a comment to the previous post, let me just write a note about randomizing and caching.
Basically, our caching strategy mean that the badge photos won’t be different on every page update, even if you choose to randomize in the badge setup guide. The data which produces the JS object — upon which the badge is programmed — is cached for 30 minutes — and accordingly, this means that the badge ought to be reproduced randomly every half hour.
The problem is that producing the more advanced datasets for the JS objects requires some doing on our server, and if a 23 badge were put on a busy site this might be an issue for us — that is, if we hadn’t cached the data.
That doesn’t mean that you can get a random-every-time effect though. You’ll just have to randomize data through JavaScript instead. This will do the trick:
<script type="text/javascript"
src="http://www.23hq.com/resources/um-style/general.js">
</script>
<script type="text/javascript"
src="http://www.23hq.com/TheRatRace/script/data.js?mode=basic">
</script>
<script type="text/javascript"
src="http://www.23hq.com/TheRatRace/script/functions.js">
</script>
<script>
function rnd(myArray) {
var i = myArray.length;
if ( i == 0 ) return false;
while ( --i ) {
var j = Math.floor( Math.random() * ( i + 1 ) );
var tempi = myArray[i];
var tempj = myArray[j];
myArray[i] = tempj;
myArray[j] = tempi;
}
}
var i = 0;
var tmpArr = new Array();
for (photo_id in photos) tmpArr[i++]=photo_id;
rnd(tmpArr);
var tmpArr2 = new Array();
for (i in tmpArr) tmpArr2[tmpArr[i]] = photos[tmpArr[i]];
photos = tmpArr2;
display23['linkToAccount'] = 0;
display23['size'] = 'standard';
display23['layout'] = 'horizontal';
display23['photoinfoTaken'] = 0;
display23['photoinfoTags'] = 0;
display23['photoinfoAlbums'] = 0;
display23['photoinfoWords'] = 0;
writePhotos(4);
</script>
This example uses TheRatRace’s photos − and also take a look a his web page which uses the 23 badge in a very cool fashion!
Allrighty, based on the previous post and the lack of documentation on how to go about cooking your own css for the 23 badge, here are a few guidelines.
Firstly, there are two ways of approaching the styling; the non-styled version of the badge will produce aa very slim potion of html whereas the styled version (either horizontal or vertical) is <table>’d. Depending on your styling needs choose the one for you…
Let’s start with some examples of the html output — first, the non-styled version:
<div id="photos23">
<a id="prev23" style="display: none;" href="javascript:jump(-numberOfPhotos);">«</a>
<span id="display23content-1">
<a href="http://www.23hq.com/user/photo/2075" target="23hq">
<img src="http://www.23hq.com/user/photo/2075/quad100" border="0">
</a>
</span>
<span id="display23content-2">
<a href="http://www.23hq.com/usern/photo/2073" target="23hq">
<img src="http://www.23hq.com/user/photo/2073/quad100" border="0">
</a>
</span>
(...)
<a id="next23" href="javascript:jump(numberOfPhotos);">»</a>
<a href="http://dev.23people.net/steffen">See all my photos</a>
</div>
And then, the styled version:
<table id="photos23" style="(...)">
<tbody>
<tr>
<td rowspan="2" align="left" width="15">
<a id="prev23"
style="font-size: 18pt; text-decoration: none; display: none;"
href="javascript:jump(-numberOfPhotos);">
«
</a>
</td>
<td align="center">
<span id="display23content-1">
<a href="http://www.23hq.com/user/photo/2075" target="23hq">
<img src="http://www.23hq.com/user/photo/2075/quad100" border="0">
</a>
</span>
</td>
<td rowspan="2" align="right" width="15">
<a id="next23"
style="font-size: 18pt; text-decoration: none;"
href="javascript:jump(numberOfPhotos);">
»
</a>
</td>
</tr>
<tr>
<td align="center">
<span id="display23content-2">
<a href="http://www.23hq.com/user/photo/2073" target="23hq">
<img src="http://www.23hq.com/user/photo/2073/quad100" border="0">
</a>
</span>
</td>
</tr>
<tr>
<td colspan="3" align="center">
<a href="http://www.23hq.com/user">See all my photos</a>
</td>
</tr>
</tbody>
</table>
For now, let’s content ourselves with handling the non-styled version, which is could be done by using these selectors in a stylesheet:
/* Entire box of the 23 badge */
#photos23 {}
/* All links, both image and other */
#photos23 a {}
/* Previous and Next links */
#photos a#prev23, #photos a#next23 {}
/* Bounding box around all images */
#photos23 span
/* All photos */
#photos23 span a img
So for example, if you’d want to…
a) Scale the photos to 280px in width
b) Make the prev/next links very large and non-underlined
c) Make the ‘See all my photos’ link very small and orange.
d) Place a fat green border around the photos when moving the move over. and..
e) Place the navigation links somewhat nicely around the first image.
.. do like this:
<style type="text/css">
#photos23 {
width:330px;
}
#photos23 a {
color:orange;
font-size: 10px;
display:block;
}
#photos23 a#prev23, #photos23 a#next23 {
color:blue;
font-size:22px;
text-decoration:none;
}
#photos23 a#prev23 {
float:left;
margin-left:-45px;
margin-top:40px;;
}
#photos23 a#next23 {
float:right;
margin-left:30px;
margin-top:40px;;
}
#photos23 span a img {
width:280px;
border:3px solid white;
}
#photos23 span a:hover img {
border:3px solid green;
}
</style>
Well, let’s try it out:
#photos23 {
width:330px;
}
#photos23 a {
color:orange;
font-size: 10px;
display:block;
}
#photos23 a#prev23, #photos23 a#next23 {
color:blue;
font-size:22px;
text-decoration:none;
}
#photos23 a#prev23 {
float:left;
margin-left:-45px;
margin-top:40px;;
}
#photos23 a#next23 {
float:right;
margin-left:30px;
margin-top:40px;;
}
#photos23 span a img {
width:280px;
border:3px solid white;
}
#photos23 span a:hover img {
border:3px solid green;
}
display23['linkToAccount'] = 1;
display23['size'] = ‘standard’;
display23['layout'] = ‘nonstyled’;
display23['photoinfoTaken'] = 0;
display23['photoinfoTags'] = 0;
display23['photoinfoAlbums'] = 0;
display23['photoinfoWords'] = 0;
writePhotos(3);
We’d love to hear from people with a bit more imagination who have given this a go — either if you have tweaked the styled script a bit (as jens has) or given it the entire css 23 garden touch-up.
Other people include:
 | The Visual Sharing Company |
We create tools allowing individuals and organizations to unleash the power of visual sharing.