ThingLink — сервис для создания интерактивных картинок

Приветствую читателей сайта Вебтун. Уже несколько дней я собираюсь вам рассказать про один занятный сервис, но к сожалению из за нехватки времени откладывал это на потом. И вот наконец то, у меня появилась свободные минуты. Сегодня мы поговорим о сервисе под названием ThingLink, который позволяет создавать интерактивные картинки, а именно можно добавлять подписи, ссылки, звуки, ролики, фликрокартинки к любой точке на любой картинке вашего сайта.

Работает это так:
На сайт добавляется небольшой скрипт. Сбоку в верхнем левом углу картинки появляются точки, означающие наличие тегов (для пользователей) и/или возможность их добавить (для хозяина картинки). Если навести мышь на картинку, то появляется панель инструментов и уже добавленные на картинку теги, обозначаемые точками. Если мышь с картинки убрать, то остаются только точки в левом верхнем углу, остальные излишества исчезают. Каждый тег может включать подпись и (опционально) ссылку. По умолчанию, кто попало добавлять теги не может, только вы сами. Для этого нужно открыть в соседней вкладке сервис Thinglink и залогиниться. При желании можно открыть возможность теггинга той или иной картинки для всех.



Сейчас я вам расскажу и наглядно покажу, как создать интерактивную картинку или фотографию и в дальнейшем опубликовать её на сайте.
Для того что бы начать пользоваться этим сервисом необходимо зарегистрироваться, по крайней мере вам об этом напомнят после загрузки изображения. Можно регистрироваться в ручную, пройдя типичный процесс регистрации. Ну а я предпочел для себя авторизацию через свой facebook аккаунт, так проще и быстрее.

После авторизации вы увидите что загрузить изображение можно тремя способами:

1. Разумеется можно загрузить картинку со своего компьютера.
Но имейте в виду, что место для хранения картинок органично. Вначале можно загрузить в Thinglink не более 10 изображений. Есть возможность увеличить свой лимит на загружаемые картинки. Имеется так называемая реферальная программа.
Если кто то зарегистрируется в сервисе Thinglink перейдя с вашей картинки, вы получите возможность загрузить дополнительные 10 изображений и так далее.

2. Добавить изображение из Flicker.
Вы можете импортировать последних общедоступные картинки любого пользователь Flickr. Для этого следует просто ввести имя пользователя, и вы увидите список из 20 последних изображений. Вы сможете выбрать одно или несколько изображений для импорта в Thinglink.

Используя этот метод загрузки изображений у вас нет ограничений на количество картинок.

3. Загрузить со стороннего сервера или веб сайта.
Все, что от вас требуется сделать, это вставить URL-адрес изображения в поле и нажать на кнопку "Tag this image".


Поддерживаются наиболее распространенные типы изображений - PNG, JPEG, GIF и BMP. Максимальный размер изображения составляет 5 МБ. Изображения больше чем 1280x1280 масштабируется.

Давайте попробуем вместе создать интерактивную фотографию.
Для примера я буду использовать фотографию этой замечательной кошечки.

Я буду использовать третий способ описанный выше, а точнее картинка будет хранится на сайте Вебтун.
Вставляем Url картинки в поле и жмем на кнопку "Tag this image"

Получим пере собой вот такое окошко для редактирования:

Нажмите в любом месте на изображении для создания тегов. Для примера я добавил пять меток. В конце нажмите на зеленую кнопку "Done"

При нанесении меток обратите внимание, что имеется поддержка большого количества сервисов для интеграции.


Если воспользоваться возможностями интеграции ThingLink и сервиса Soundcloud.com, то можно ещё и пристегнуть к картинке музыкальный файл! Таким образом, вы сможете создать музыкальную открытку или оставить словесные комментарии.

В настройках вашей картинки вы можете дать право посетителям оставлять на ней свои отметки.

После того как вы разметили отметки на картинках. (Если вы вебмастер) Вы должны должны вставить в шаблон вашего сайта примерно такой код:

<!-- Embed code for: Personal images -->
<script type="text/javascript">
__tlid = '214815518232674305';
setTimeout(function(){(function(d,t){var s=d.createElement(t),x=d.getElementsByTagName(t)[0];
s.type='text/javascript';s.async=true;s.src=('https:'==document.location.protocol?'https:':'http:')+'//www.thinglink.com/jse/embed.js';
x.parentNode.insertBefore(s,x);})(document,'script');},0);
</script>

Для того что бы интерактивные картинки работали на всех страницах вашего сайта рекомендуется вставлять этот код перед тегом

</body>

Если у вас блог на Wordpress, Blogger или Tumblr вы можете воспользоваться уже готовым плагином.

Используя опцию "embed image" у людей есть возможность добавлять вашу интерактивную картинку к себе на сайт. Кто хочет сможет поделится ею с друзьями используя опцию "share image".

Это еще не всё. Зайдя в свой аккаунт вы обнаружите что так же имеется раздел статистики в котором вы сможете смотреть количество просмотров вашей картинки или кликов по меткам. Думаю, что со статистикой вы разберетесь без моей помощи.

Удачи.