Thinglink functionality is based on an image tagging API. The API
itself is not public at the moment, but there is a JavaScript helper
library, which makes it very easy for anybody to embed Thinglink
images onto their site.

The embed code comes in two flavours: the single image embed code,
and the mass embed code. Physically, they are the exact same
JavaScript library, but depending on the arguments you pass, it will
function in either mode.

The single image embed code is what you get when you hover over a Thinglink image and select Embed image. It looks something as follows (feel free to try this one out):

The size limitation of 130-by-130 pixels is usually enough to weed out
uninteresting images. However, if there is a
particular need to include or exclude images from being Thinglink-ed,
you can use a couple of special CSS classes:

alwaysThinglink - the image is always Thinglink-ed, no matter its
size

neverThinglink - the image is never Thinglink-ed, no matter its
size or other qualifications

You can force tags to open inside the images by checking Keep tags inside images on the embed code page.

You can further modify the code to fit your needs by modifying the vOverflow and hOverflow attributes in the __tlconfig variable of your embed code. To allow tags to appear above the images set "vOverflow":true and to allow tags to appear on the sides of the images set "hOverflow":true .

When one of your users wants to share your Thinglink-ed image they are given a special URL that points to your web page. The special URL contains a string "#tl=", which lets Thinglink know which image on the page the user has shared. Thinglink script automatically scrolls at the proper image, but if your site does not use scrolling (for example when your images are all shown in a lightbox) then you may override it by adding the following JavaScript into your page, prior to loading the Thinglink JavaScript.

The __thinglink object exposes a number of functions for your disposal:

openEditor(img) opens the editor popup.

openShare(img) opens the share dialog.

The img parameter should be a DOM object pointing at the image. For example, with jQuery you could state:

<img id="myimage" src="http://myimages.com/1.jpg">
<a href="#" id="popup">Pop up the share window</a>
<script>
$('#popup').click( function() {
__thinglink.openShare( $('#myimage')[0] ); // Find the image, take the DOM object from jQuery, pass it to openShare()
return false; // Don't do the default action of the link, which would be to open '#'
});
</script>

This would open the embed dialog whenever the user clicked on the Pop up the embed window link.

A website can have a perma-URL defined to be shared on social services using Thinglink functionality. This is expecially handy for blogs, which have dynamic URLs or on pages that have the image appearing inside an iframe, like for example on Facebook.

In addition to the fields below, there is a common “ts” element which is the timestamp of the event.

Event

Event fields

Description

Hover on tag

event

String literal "tagHover"

scene

ID of the scene

tag

ID of the tag

image

The DOM object which triggered this event

Click on tag

event

String literal "tagClick"

scene

ID of the scene

tag

ID of the tag

image

The DOM object which triggered this event

Note that “tagHover” events are filtered and asynchronous; they occur a few hundred milliseconds after the hover has occurred (to keep network communication from interfering with the appearance of the tag). Also they are only fired once every few seconds to filter out very jittery users or browsers. Filtering occurs on a per-tag basis.