среда, 11 января 2012 г.

Вставляем интерактивные скриншоты...






ну что, понравилось? Это фишка доступна через службу Thinglink
Как ею пользоваться - вкратце здесь

Далее приведу "перепост" для более чёткого представления о чём это собственно:

Как делать фотографии и скриншоты в блоге интерактивными

Одна из моих любимых фишек социальных сетей это возможность легко сделать отметку на фотографии. Чаще всего мы отмечаем кого-то из знакомых, но время от времени используем эту возможность для обозначения других интересных объектов. А что делать, если надо поделиться изображением без использования соц.сети или сделать нестандартные отметки? Скажем, сразу со ссылками. В данном случае на помощь приходит сервис Thinglink. О его плюсах и минусах мы и поговорим сегодня.

Как это выглядит

Центр помеченных областей указывается посредством черно-белых «мишеней». При наведении на область всплывает подсказка, причем она может быть текстом, аудио или ссылкой. А также, если эта ссылка ведёт на Амазон или Facebook, то она будет сразу правильно оформлена.
Технология работы

С сайта загружается javascript-файл, который наносит данные отметки на изображение. К сожалению, данная технология ограничивает применение. Например, вы не сможете сразу вставить данное изображение с отметками на форум. По этой же причине я не смог вставить в пост активную картинку, пока наш программист не внёс в сайт необходимые дополнения.
Как это работает


После загрузки изображения вам предложат зарегистрироваться. Сделать это удобней всего через facebook. После этого вы наносите отметки и посредством вставки кода или ссылки на изображение продвигаете вашу картинку «повышенной информативности» в люди.


Стоит обратить внимание, что хранить изображения можно на сервисе, но тогда вы быстро упретесь в лимит. В начале он равен 10 картинкам, а за каждого реферала его поднимут еще на десять. Только зачем упираться в этот лимит? Ведь можно делать отметки на картинках из Flickr или любого места в интернете. Кроме того, есть готовые модули для большинства CMS (wordpress, drupal и так далее). Так что вы можете размещать картинки и делать на них отметки сразу у себя на сайте.
А что потом?


В настройках вашей картинки вы можете дать право посетителям оставлять на ней свои отметки. Кроме того, люди могут добавить к себе на сайт ваше изображение (embed image) или просто поделиться им с друзьями (share image). Всё это будет отображено в разделе статистики вашего профиля, также как и количество просмотров или кликов.
Подведу итог использования этого приятного сервиса Thinglink…
Плюсы:

  • Простота загрузки изображения и нанесения отметок
  • Большое количество сервисов для интеграции
  • Удобная статистика
  • Бесплатно

Минусы:

  • Не везде можно встроить изображение
  • Наличие лимита
Thinglink

И вот, зайдя на этот сайт, оказалось, что для блоггера существует даже виджет, который я незамедлительно установил и попробовал закинуть фотку (см. ниже) и добавил немного интерактивности в эту фотку, добавив несколько точек с описаниями и ссылками на звук, фотку и видео в различных вариантах.
Кстати, интересно придумывают эти все службы - регистрироваться через facebook - хочешь/не хочешь а ВЫНУЖДЕН будешь на этой социальной сети зарегиться лишь бы входить в эти все службы не задумываясь о паролях и логинах. и вот что интересно - все твои файлы раскиданы по всему интернету!!! Твои видео на youtube, звук, который я для этой фотки записал - он на SoundCloud, в который я вошёл так же через тот же facebook, а фотки теперь могу выкладывать через Flickr - на который никогда бы без особой необходимости и не подписывался бы, если бы не сервис, который в блоггер встроено у меня теперь через только что добавленный виджет.

Для того, чтобы у тебя по этим точкам не просто поясняющие тексты всплывали или ссылки, а чтобы как бы ВНУТРИ всплывающих надписей у тебя картиночки подгружались бы и видео тоже не в отдельном окне, а ВНУТРИ как бы крутилось, то тебе, естественно надо чтобы видео на youtube было бы загружено, а картинки на Flickr - любые другие службы или ссылки - только в виде ссылок. И ещё, если у тебя вставляется ссылка на "твоё" видео с ютюбы, то НА ЭТАПЕ редактирования тэгов надо чтобы обязательно "появилась" под ссылкой надпись с "зелёной галочкой", типа всё хорошо означающее, что редактор тэгов "распознал", что это именно видео, а это именно картинка - "галочка" про это так и будет писать, что мол тэг распознан как ютюбовское видео или как фликровская картинка, так вот, внимательнее на ссылку ютюбовскую смотри, вот, когда ссылку на ютюбовский фильм добавляешь в таком виде:
"галочка" появляется…, а когда в таком виде:
которая у тебя получается, если ты правой клавишей щёлкнешь на проигрывателе в ютюбе и по правой клавише выберешь пункт меню "Копировать URL", то почему то нет!!! Значит надо эту ссылку преобразовать к этому виду:
Исключив вот эти буквочки из ссылки: feature=player_detailpage&
Если кто не знаком как ссылку на фото "достать" из Flickr, то вот скриншот:
а вот как убедиться, что ссылка будет показываться ВНУТРИ всплывающего окошка, видите, тэг галочку зелёным как бы раскрасил, "признал" типа за своё....:


Что интересно, если ты на сайте ThingLink под своим аккаунтом откорректируешь свои тэги и свои точки, то автоматически всё это откорректируется и в твоём же блоге, надо только будет эту страницу из блога перезагрузить...
Ах да, чтобы вставить эти точки, надо перейти во вкладку "Изменить HTML" и вставить тот код который у тебя появится, если ты нажмёшь EMBED на сайте ThingLink под своим аккаунтом, что-то типа :

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuZ4fPeASTBeR1Gaj3kk4mdT3HTosiQYJ5DSg5QfPGFtbi1-_E7KWqEvhBrG5oXFjnlNfyU1hPKPlUd5bKCEYfRaQ4BK9SzReD-eKblIJsbrjbc7GRdhWRqB8NwiwIYeTsZf3Ym9NuKyk/s1600/IMG_7787_.jpg" width="560" class="alwaysThinglink"/><script src="https://www.thinglink.com/jse/embed.js#213628570369523714"></script>

Этот код вставь на свой сайт или вот как я в это место на блоггере, и тогда у тебя появится вот такое:

Комментариев нет:

Отправить комментарий