29.11.2013

Как добавить Instagram в свой блог

Привет!
Сегодня я участвую в Клубе друзей, организованном Гришиной Еленой, чему очень-очень рада!


Меня очень привлекает возможность интеграции между различными сервисами и соц. сетями. Это очень упрощает жизнь, гораздо приятнее, когда все в одном месте. Открываешь один сайт и сразу можно посмотреть всю интересующую информацию.


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


Несколько раз озадачивалась поиском способа трансляции картинок из инстаграма. Наконец-то, нашла его, и хочу поделиться этим с вами.

Для этого нам понадобится Web.stagram.

1. Заходим на сайт. Входим в личный кабинет: вводим логин и пароль для инстаграма.

2. Выбираем вкладку Tools
Здесь мы видим 2 окошка с кодом. Копируем код из первого окошка. Страничку не закрываем, она нам еще понадобится.


3. Переходим в свой блог и открываем вкладку Дизайн.
Выбираем Добавить гаджет и находим в открывшемся списке HTML/JavaScript.


Кликаем на гаджете Изменить, вставляем в основное окошко скопированный код с Web.stagram. 

4. Далее снова возвращаемся на Web.stagram и заполняем форму под кодом.


Parts Type можно выбрать, что вы хотите транслировать в блог. Если все фото со своей странички, то оставляем @username. Если вы хотите показывать какие-то определенные фото (трансляция процесса изготовления или еще чего-нибудь), то можно придумать для них свой хэштег, но такой, чтобы ни у кого его больше не было (зачем вам чужие фото в блоге =) ) и выбрать @hashtag.
В зависимости от того, что вы выбрали, во втором окошке пишем свой ник или хэштег.

Thumbnail Size Здесь можно задать размер отображаемых фото от 20 до 250 px.

Layout Здесь мы задаем количество фоток по диагонали и вертикали. Хоть и есть приписка, что максимум может отобразиться 20 фоток, у меня отображается только 17. Выбирайте количество, которое будет гармонично смотреться у вас с блоге.

Border of each photo Этим пунктом можно задать границы для фото.

Background color Здесь можно задать цвет фона, на котором будут отображаться фото. Можно ничего не писать.

Space of each photo Здесь можно задать расстояние между фотографиями.

5. Preview Кнопка предварительного просмотра.

5. Заполнив форму и подредактировав все, как нравится, после просмотра, нажимаем Generate code. Высвечивается окошко, копируем код и вставляем в гаджет из п. 3.

На картинке мой код

6. Самому гаджету можно дать название, а можно и никак не называть. Сохраняем.

7. Перемещаем гаджет туда, где хотим видеть картинки. Сохраняем все изменения и смотрим, что получилось.


Мне очень нравится результат!

Надеюсь, этот урок был полезным и интересным!
Подписывайтесь на мой блог!

65 комментариев:

  1. Здорово! Пользуюсь Инстаграмом, но не знала, что можно вот так запросто транслировать)) Спасибо за урок!))

    ОтветитьУдалить
    Ответы
    1. Спасибо за приятный комментарий! Рада, что полезно.

      Удалить
  2. Оля,спасибо за пост! Очень полезная информация, думаю что в скором времени пригодится!)

    ОтветитьУдалить
  3. у меня тоже идет транслирование фоток в блог, но я делала мне кажется иначе, проще...на страничке TOOLS ниже есть Instagram Gallery for your Blog / Website. там нужно ввести данные и просто нажать зеленую кнопку - сгенерировать код. который потом просто добавить в свой блог.

    ОтветитьУдалить
    Ответы
    1. Алена, мой пост именно об этом.

      Удалить
  4. Ой, как здорово, я тоже обязательно попробую!!! Спасибо большущее, Ольга!

    ОтветитьУдалить
    Ответы
    1. Как я рада, что пост полезен! Будем развиваться вместе.

      Удалить
  5. Спасибо, очень полезно:)

    ОтветитьУдалить
  6. Спасибо огромное! Такая классная штука) Очень пригодилась!

    ОтветитьУдалить
  7. Оля, спасибо, уверена. многим будет полезен твой урок!

    ОтветитьУдалить
  8. Беру на заметку, Оля, спасибо!

    ОтветитьУдалить
  9. Олечка, огромное спасибо! это очень важный материал!!

    ОтветитьУдалить
    Ответы
    1. Этот комментарий был удален автором.

      Удалить
  10. Привет! Спасибо большое!)))) Воспользовалась и теперь у меня тоже есть трансляция из Инстаграма :) http://v-teni-krasnogo-klena.blogspot.ru/

    ОтветитьУдалить
    Ответы
    1. Привет!!!!! Пожалуйста! Классные фото!

      Удалить
  11. Спасибо большое! надо попробовать!)

    ОтветитьУдалить
  12. Спасибо большое, Ольга! Очень полезная рекомендация, которую я уже применила в своем блоге!

    ОтветитьУдалить
  13. Оля а у тебя есть блогловин?

    ОтветитьУдалить
    Ответы
    1. Нет. Все, что есть, можно найти в блоге справа=)

      Удалить
  14. Ольга, спасибо! Очень полезно! :) Пригодилось!

    ОтветитьУдалить
  15. Большущее спасибо!!!

    ОтветитьУдалить
  16. Вот это классно) я ради такого прям аккаунт в инстаграм заведу :)))
    спасибО!

    ОтветитьУдалить
    Ответы
    1. =) Да, инстаграм - классный, он того стоит=)

      Удалить
  17. очень мне помогли , спасибо огромнейшее!:))

    ОтветитьУдалить
  18. Спасибо огромное! Ольга, а вы не знаете как таким же образом добавить гаджеты Фейсбук и ВКонтакте?

    ОтветитьУдалить
    Ответы
    1. Пожалуйста! Как с фейсбуком быть, я не знаю, а на контакт вот http://vk.com/developers.php?o=-1&p=Like.

      Удалить
  19. Спасибо большое, все получилось с первого раза.
    Очень благодарна Вам за все подробности!

    ОтветитьУдалить
  20. У меня почему то код не генерируется( нажимаю зеленую кнопку и тишина(

    ОтветитьУдалить
    Ответы
    1. Может быть Вы не все графы заполнили? Попробуйте еще раз!

      Удалить
  21. Сейчас буду пробовать, спасибо!))

    ОтветитьУдалить
  22. Получилось) А там будут только последние фото транслироваться или рандомно?

    ОтветитьУдалить
    Ответы
    1. Классно, пожалуйста! Только последние фото.

      Удалить
  23. Спасибо! Решила завести блог! а т.к. в основном я в инстаграм, то урок оказался очень полезным! спасибо!

    ОтветитьУдалить
    Ответы
    1. Рада, что помогла. Только мне пишет, что Ваш блог удален.

      Удалить
  24. Ольга, спасибо Вам большое, очень помогли! Я вообще отношусь к категории людей, кто с компьютером "на Вы", но Ваш урок написан просто суперпонятно, за что еще раз огромное спасибо! :)

    ОтветитьУдалить
  25. Отличное объяснение! Очень помогли! Спасибо!)))

    ОтветитьУдалить
  26. Ольга, спасибо большое за урок! Вот только у меня не отображается кнопка Follow , написано "Не удается преобразовать DNS-адрес сервера" и грустная морда. http://as-if-by-magic-ivy.blogspot.ru/

    ОтветитьУдалить
    Ответы
    1. Хм, странно. У меня на Вашей страничке вообще браузер ошибку какую-то пишет вместо Follow.

      Удалить
    2. Разобралась, там в коде слеша не хватало почему-то. Спасибо!

      Удалить
    3. Олеся, спасибо за подсказку! У меня тоже была такая проблема.

      Удалить
  27. Ольга, спасибо за пост! Всё понятно, быстро получилось присоединить инстаграм к блогу

    ОтветитьУдалить
  28. Ольга, Вам точно нравится, как оно получилось? Обрезает же по краям

    ОтветитьУдалить
    Ответы
    1. Да, мне нравится. Где обрезает? Смотрю на фотки в виджете и в инстаграме на сайте, они одинаковые.

      Удалить
  29. Очень понравилась ваша статья! Как думаете, можно ли использовать инстаграм для продвижения бизнеса или блога? В интернете мало нашел статей - вот только эту - Продвижение в инстаграм

    Может у кого-то опыт есть?

    ОтветитьУдалить
  30. Ольга, спасибо!!! очень полезный пост!

    ОтветитьУдалить
  31. Оля, спасибо большое, все получилось)))

    ОтветитьУдалить
  32. Cпасибо большое, все очень понятно объяснили!)

    ОтветитьУдалить
  33. thank you , was very helpfull .
    In case you want dinamic photos changes , u can use service http://intagme.com/
    Good luck :)

    ОтветитьУдалить
  34. Спасибо большое за этот пост!!!! У меня все получилось и я очень рада :) мимими)))))

    ОтветитьУдалить
  35. Этот комментарий был удален автором.

    ОтветитьУдалить
  36. Дуже дууже Вам дякую за допомогу :) Тепер блог виглядає значно краще :)

    ОтветитьУдалить