By enabling Thinglink for your website you can easily tag any image on your website or blog! This is how you can do it:
1. Copy the code below
2. Paste the code to the HTML document of your website/blog
Place it on the template of your blog or website so that it is visible on all pages. It is best to put it near the bottom, as close to the </body> tag as possible, but not after it. See detailed instructions for most common platforms below:
- WordPress
- Blogger
- Tumblr
- Drupal
- Joomla
- Other platforms (including Bandzoogle, Typepad and Google Sites)
How to tag images?#
Tagging images with ThingLink is easy:
1. Make sure you are logged into your ThingLink account.
2. Navigate to your website/blog or ThingLink dashboard to start tagging.
3. To tag an image ...
- Hover over any of your images
- Select Edit image icon in the upper left hand corner of the image to enter the editing space
- New tags can be added by clicking anywhere on the image
- Tags can be enriched with and/or a hyperlink
- Existing tags can be modified by clicking on them
- After you finish tagging an image, click Save.
Well done! Hovering over the image will now display the tags to your visitors. Happy tagging!
How to embed images?#
Embedding a ThingLink image is a breeze:
1. Hover over any ThingLink image, e.g. on your dashboard.
2. To embed the image ...
- Select Embed image icon in the upper left hand corner of the image
- Copy the single line embed code by clicking on Copy to clipboard
- Paste the embed code to your HTML document (website/blog)
- NOTE! Embedding will not be possible if the site/service you embed your image to does not support HTML script tags.
Tips and Gotchas#
If you are downloading images using AJAX, or otherwise modify the DOM after the ThingLink embed code has been loaded (e.g. resize the images on the fly), you can refresh the tags by calling
__thinglink.rebuild();
If you call it without arguments, it will rebuild all the images on the page. You can also pass an URL, if you are rebuilding just a single image and happen to know which one that is. For example
__thinglink.rebuild('http://example.com/pics/picture.jpg');
If you resize an image, you can reposition exiting tags on the new spots by calling
__thinglink.reposition(image);
Parameter "image" can be an img DOM element. If it is left empty, tags on all rendered images get repositioned.
Sometimes you may wish to have the tags on your images stay always visible. To achieve this add the following line to your ThingLink mass embed code (below the line that says __tlid = '...'):
__tlconfig = { makeNubbinsSticky: true };