Photo Tagging API : Easy plugin for your websites and blogs

Flickr, Facebook and now Orkut. One by One everyone has implemented the photo tagging feature into their social network. Initially introduced by Flickr, extended by Facebook and finally Orkut was forced to implement it too.

Last night I tried to look into it to found out what does it take to make one and I was able to comeup with something like this. Probably a little different from the one’s implemented by others in the sense that you just have to do the first click and then the second click, and you are done. No mouse-press and drag thing needed.

Now without much of a talking, lets first see a demo of how it works and then probably I will write a few words on how to implement the same:

Note: How it works? Unlike Facebook and Orkut, I have implemented this in a little different manner. You just need to click once, and then no need to keep your mouse pressed. Freely move to the another place and click again and thats it, you have selected your photo tagging area and ready to tag it.

Feel free to play with the demo here.

Drawbacks: However the drawback of this phototagging API is that if someone has tagged the photo using a monitor which have a different screen resolution than yours, then probably you might not see the tag exactly at the right place. This bug exists in Facebook too, haven’t checked with Orkut yet.

Feel free to leave a comment or two.

Also feel free to discuss any flaws which you may find in the implemented API above. I am completely open for suggestions for improvement.

Happy Photo Tagging.

  • manish

    i dont understand why is there a problem with different screen resolution. the x,y co-ordinates of the selected area is taking with reference to the image 0,0. so if ur showing the same image size then why will there be a problem.

  • Sowmya

    Great work buddy!

  • Hi Manish,

    Well probably your doubt is understandable, and this brings me to the conclusion that I am not taking the pixels relative to image (0,0), and probably even facebook isn’t.

    Thanks a lot for reminding me on that (though it should have come by common sense). Probably you can already see some tags being shifted by a few pixels.

    Added this to my to-do list. Thanks buddy 🙂

  • manish

    ok. if want there are many pre built scripts for this purpose. you can check out http://www.ajaxrain.com if u already havin’t. Just for information.

    anyways nice and interesting blog u have. keep blogging. 🙂

  • wow, nice link man. I guess if one goes around he will get loads of such websites providing everything ready to you 😛

    Thanks buddy.

  • manish

    hey,

    i want to ask something. i created a simple app in tomcat to upload an image and then display it back in the browser. the server is tomcat 6. the image upload part is working fine. and the image is getting saved in the new directory. but when i want to display the image in the browser it doesn’t show anything. but after restarting tomcat 6 the image appears. have you seen this problem before. or do u have a solution for this.

    • First of all I should admin that I haven’t worked a great deal with tomcat, just some basic JSP coding I did long back.

      Anyways, can you let me know a few things. When you upload the photo are you uploading it using a hidden iframe or are you submitting the whole page. For eg. Are you trying to upload the image and show it to the user instantly without reloading the page??

  • manish

    i am upload the photo using a simple post form.. and i am showing the photo to the user after reloading the page.

  • Hmm, well in that case I am not too sure what’s going wrong. After upload did you tried the following:

    1. Ofcourse the page doesn’t shows the image. Did you tried viewing the source of the page and see if the image url is correct in their ?

    2. If you see the image url in the page, try to take that out and post in the browser to check if it displays the image or not. If it doesn’t then probably I will trying to make a script my side and replicate your problem.

    However try to check these 2 things and lemme know.

  • Marc

    The demo leads to an 404 error

    Greetings from germany
    Marc

  • OOPS! That occurred due to changed made in the backend directory structure which I forgot to update in the blog. Should be fine now.

    Thanks for pointing this out 🙂

  • Hi Abhi,
    I just wounder how u manage to do all this….its really a gr8 start and gud luk for moving ahead..

  • Abhinav have you wokred on something like image uploader similar to facebook

    • Hi Vipin,

      Well never made the exact clone of what you find in facebook uploader, but yes once worked on a java applet based application, which will gather all mp3 file info on your hard disk and sync with the server databases.

      Unfortunately never carried this forward as I stopped working on that project. But I am sure the logic behind facebook uploader is similar to the one i used to gather mp3 stats.

      Regards,
      Abhinav

  • We’re trying to develop a proprietary member/group content tagging feature for WordPress and BuddyPress (ala Facebook Photos but for full-length embedded sports games). We have money for this project. Is it something you’d be interested learning about? Shoot me a message to learn more: chrism at yoursports.com.

    Chris McCoy, Founder
    YourSports.com

  • sheen

    caN you please check the download link, its redirecting to WP TOOLBAR Plugin :s