Как установить виджет Instagram на свой сайт?

Как установить виджет instagram на свой сайт? Почему-то готового решения для внедрения от разработчиком социальной сети нет. Но это не повод отчаиваться – у instagram-а открыт API, поэтому можно написать своё маленькое приложение. Ну или просто использовать уже готовое, добрыми людьми подготовленное!

Готовых решение много, но далеко не все работают напрямую с instagram, минуя посредников в виде третьих сайтов. Для серьёзного проекта ставить виджет “уводящих” пользователей на другие сайты – не лучшее решение, но требующее определенных навыков и времени. Если вы этого не боитесь, то для вас подойдёт виджет inwidget.ru.

Если же вам покажется настройка “прямого” виджета от inwidget.ru слишком сложной задачей, то можно воспользоваться самым простым решением – stapico.ru/instagram-widget. Тут вам не надо будет получать токен, скачивать файлы на хостинг и т.д. Достаточно настроить отображение виджета и вставить код в нужно место шаблона сайта. Но повторю, такой виджет будет иметь “прослойку” между вашим сайтом и инстаграмом в виде сайта stapico.ru.

Настройка прямого виджета от inwidget.ru

Основная проблема – это получить TOKEN, вы можете его получать самостоятельно, вот таким путём:

1. Регистрируемся на https://www.instagram.com/developer/. Жмем кнопку “Регистрация твоего приложения”.
   
2. Как заполнять поля вроде как непринципиально. Я пошел по пути наименьшего сопротивления и ничего придумывать не стал
   

Дальше начинаются танцы с бубном (не очень понимаю, почему это делается через такие ухищрения):

Сформируйте вот такой URL: https://instagram.com/oauth/authorize/?client_id=[Client ID]&redirect_uri=[адрес сайта]&response_type=token – где [Client ID] выданный Client ID, [адрес сайта] – это ваш адрес сайта. Перед прохождением по ссылки автоматизируйтесь в Instagram. В строке браузера будет информация:

http://[адрес сайта]/#access_token=183494706.ddbf7558cc6e457481777333df6bc0f3 (это и есть ваш ID TOKEN).

На этом трудности все заканчиваются, дальше всё элементарно – скачиваем папку себе на сервер, устанавливаем права на папку, правим конфигурацию (ID TOKEN нужно получать из того аккаунта, фото которого хотите получать) и вставляем html-код себе на сайт.

У меня все действия заняли 10-15 минут. Что получаем на выходе? Аккуратный виджет, со ссылками напрямую на социальную сеть, с миниатюрами фотографий, счетчиками подписчиков и т.д. Осталось подогнать его внешний вид под дизайн сайта.

Всё ещё остались вопросы?

Создатель виджета выпустил обучающее видео

Автор

Андрей Воскобойников

Значок Инстаграм на сайт. Как поставить кнопку Инстаграм

На публичных страницах Facebook или на сайтах можно увидеть значок Инстаграм. Это виджеты или табы, как их иногда называют. Кликнув на них, можно попасть в галерею Инстаграм.

Если вы закрыли ваш профиль в клиенте, нужно отключить настройки конфиденциальности. Иначе в установке кнопки в соцсети/на сайте будет мало смысла.

Как установить виджет Instagram на страницу Facebook

Это можно сделать с помощью сервисов/приложений, их существует немало. Для примера возьмем Statigram. Он на английском языке, но разобраться несложно. Можно включить автопереводчик в браузере. Установить таб Инстаграм можно только на публичную страничку, но не на личную.

• Зайдите на statigr.am.
• Нажмите в верхнем правом углу «Sign in with Instagram» и авторизуйтесь в клиенте.
• В верхнем меню нажмите вкладку «Promote».
• В разделе «On Facebook» кликните справа «Create your tab», после чего вы переместитесь на Facebook.
• Если вы уже авторизованны там, появится окошко, где нужно выбрать страницу, на которой вы хотите установить таб, и нажать «Add Instagram feed tab». После этого под обложкой появится кнопка «We are on Instagram». Кликнув на нее, можно будет, не выходя из Facebook, посмотреть галерею. А кнопка «View on Instagfam» переместит на instagram.com.

Картинку значка можно изменить, например, установив знакомый всем логотип Инстаграм.

• Наведите курсор на значок и нажмите на карандаш, который появится в верхнем правом углу.
• Кликните «Редактировать настройки», потом «Изменить» напротив «Пользовательское изображение вкладки».
• Снова наведите курсор на значок и нажмите «Редактировать», загрузите картинку размером 111х74 px и объемом не более 1 Мб.

Примечание: если вы используете функцию direct в Instagram, то после установки таба на Facebook публикации через direct в галерее показываться не будут.

Кнопка на странице ВКонтакте

Раньше на публичных страницах ВКонтакте можно было устанавливать виджеты, но потом эту функцию убрали. Можно лишь установить приложение Instagram на свою личную страницу и разместить ссылку на него в меню слева.

[reklama] На публичной странице или в группе можно добавить ссылку на свой инстаграмовский профиль в раздел «Ссылки» справа. В качестве картинки будет показываться аватар. Если установить вместо него логотип Инстаграм, получится неплохая кнопка.

Как устанавливается кнопка Инстаграм на сайт

Вариант первый

• Зайдите на сайт instagram.com и авторизуйтесь.
• Нажмите на свой ник в верхнем правом углу и далее «Визитки».
• Выберите вариант кнопки (Select your badge).
• В окошке ниже появится код, его нужно скопировать и вставить в html на вашем сайте в то место, где должна быть кнопка Instagram.

Вариант второй

Можно воспользоваться одним из сервисов, например, все тем же statigr.am, о котором сказано выше. Только вместо раздела «On Facebook» нужно открыть раздел «Follow buttons», далее выбрать вид кнопки и скопировать код html для сайта.

 

Виджет для сайта или блога «Мы в Instagram» с кнопкой «Подписаться»

 Совсем недавно присоединилась к соцсети Instagram и стала искать виджет для сайта или блога «Мы в Instagram». Несколько сервисов, предлагающих такой виджет, просят ввести не только свой логин, но и пароль. (Интересно, зачем?) О хорошем сервисе, в котором можно быстро настроить, создать только по своему имени и получить готовый код для вставки на сайт виджета с кнопкой «Подписаться» читайте ниже.

Как добавить на сайт или блог виджет для сайта или блога «Мы в Instagram» со встроенной кнопкой «Подписаться»

2. Вписываем свое имя имя в Instagram (или хештег)

Нажимаем кнопку Показать превью.

С настройками по умолчанию виджет выглядит вот так:

3. Настроить виджет в сервисе можно ниже:

Название виджета — по умолчанию «Мы в Instagram»
Размер виджета — количество фотографий по горизонтали и вертикали 4. Также настраивается ширина виджета , отображение шапки, тени у рамки, отображение Вашего профиля (доступно, если ширина виджета будет от 260px), цвета фона фотографий, шапки виджета, рамки, и цвет кнопки «Подписаться». При настройке цвета или пропишите код, или просто выберите нужный цвет кружком.
5. После всех настроек снова посмотрите превью виджета 

«Мы в Instagram» и, если все устраивает, нажмите оранжевую кнопку Получить HTML-код 

6. Скопируйте готовый код.

7. На своем сайте вставьте код в виджет HTML.

На WordPress это виджет «Текст».

В блогах, созданных на платформе Blogger, нужно добавить новый гаджет HTML/JavaScript (Дизайн -> Добавить гаджет). И в поле «Содержание» вставить скопированный код. Затем нажать кнопку Сохранить.

Виджет для сайта или блога «Мы в Instagram» также, как и другие виджеты и социальные кнопки поможет Вам в продвижении и привлечь дополнительную аудиторию. А кнопка «Подписаться» позволит читателям стать Вашим подписчиком в Instagram.

Instagram Feed. Добавить Инстаграм виджет на сайт (2020)

• Виджеты
• Блог
• Tutorials
• Войти
• Зарегистрироваться

Instagram Feed Создать виджет

• Обзор
• Возможности
• Примеры
• Цены

• Виджеты Social
  • Facebook Виджет
  • Facebook Кнопка
  • Instagram Feed
  • Instagram Profile
  • Pinterest Виджет
  • Twitter Виджет
  • Иконки Соцсетей
  • Социальные Кнопки
  Video
  • Vimeo Виджет
  • YouTube Виджет
  Audio
  • Аудио Плеер
  • Подкаст Плеер
  • Радио Плеер
  • Фоновая Музыка
  Reviews
  • Airbnb Отзывы
  • All-in-One Reviews
  • Amazon Отзывы New
  • Apple App Store Reviews
  • Booking Отзывы
  • Facebook Отзывы Trending
  • G2 Crowd Отзывы
  • Google Отзывы
  • Instagram Отзывы
  • TripAdvisor Отзывы
  • Trustpilot Reviews
  • Yelp Отзывы
  • Слайдер Отзывов
  Chats
  • Facebook Чат
  • Telegram Чат New
  • Viber Чат
  • WhatsApp Чат
  • Онлайн Чат
  Forms
  • Конструктор Форм
  • Форма Обратной Связи
  E-commerce
  • PayPal Кнопка
  • Кнопка Звонка
  • Попап Конструктор
  • Таблица Цен и Тарифов
  • Таймер и Счетчик
  Tools
  • Age Verification
  • Cookie Consent
  • Coronavirus Stats
  • FAQ
  • Facebook Комментарии
  • Googl

Ставим Instagram на сайт и на wordpress

Многие видели на самых разнообразных сайтах блок вывода информации из instagram. Возникает вопрос, как на ресурсе, который не связан с кроссплатформенным мобильным приложением, появилось такое окно с фотографиями. И, самое интересное, как поставить нам модуль Инстаграм на свой сайт. Сейчас в сети много различных виджетов и плагинов, которые помогут осуществить задуманное.

Instagram и wordpress

Не все сторонние виджеты работают хорошо и без багов, но выхода нет – разработчики instagram собственный плагин не сделали.

Плагин “Instagram” для wordpress является самым простым способом установки на сайт:

1. Регистрируемся в инстаграме.
2. В браузере заходим в свою учетную запись инстаграма.
3. Авторизуемся на своем сайте в панели вордпресс под учетной записью администратора.
4. В поиске wordpress виджеты находим плагин instagram, он должен быть первый в списке.
   Автор: WebDorado, а точное название плагина – “Instagram Feed WD — Instagram Gallery for WordPress”.

5. Устанавливаем его и активируем.
6. Теперь в админ панели справа внизу появился пункт WD instagram feed.
7. Заходим туда в раздел фиды.
8. Нажимаем на кнопку sign in with instagram и следуем инструкции. В конце не забываем сохраниться.
9. Возвращаемся в меню фиды и выбираем понравившийся внешний вид плагина.
10. В появившихся полях выбираем всё по своему желанию.
11. После этих настроек получаем шорткод. Этот код вставляем в нужное место на сайте или в сайдбар.

Теперь на сайте появится виджет instagram. Настраивать его можно много раз любыми способами. Если этот плагин не понравился, то можно попробовать вставить другой, настройки везде похожие.

Виджет для сайта с использованием сторонних сервисов

Установить instagram виджет для сайта без Blogger, WordPress или LiveJournal можно следующими способами:

1. Установка через сайт inwidget.ru

Для начала потребуется найти хеш-ключ с названием “CLIENT ID”. Вначале заходим в инстаграм под своим логином через браузер. После этого требуется зарегистрировать свой сайт в https://instagram.com/developer. Заполняем все обязательные поля. Получаем необходимый хеш-код.

Скачиваем бесплатный Instagram виджет для сайта здесь.

Открываем файл /inwidget/config.php и меняем все данные на свои.

Вставка виджета на сайт происходит с помощью специального кода:

<!– По умолчанию –>
<iframe src=’/inwidget/index.php’ scrolling=’no’ frameborder=’no’ style=’border:none;width:260px;height:330px;overflow:hidden;’></iframe>.

Эти параметры можно менять по желанию на любые свои:

• width – размер виджета по ширине (стандартно 260px);
• inline – число фото в одной строке (стандартно 4 шт.);
• view – общее количество отображаемых фотографий (стандартно 12 шт., максимально 30 шт.);
• toolbar – отображение аватарки и статистики (переменные true/false).
• preview – качество фото, их размер (значения small, large, fullsize)
• lang – предпочитаемый язык (параметры ru/en).

Можно экспериментировать с разными значениями неограниченное количество раз. Такой способ не самый простой, но он обеспечивает работу виджета без вмешательства третьих сайтов.

2. Instagram на личный сайт с помощью сервиса instagramm.ru

Очень простой в использовании ресурс. Необходимо заполнить поля «Имя» или «Хештег». Первое используется для показа только своего профиля, а второе для всех фото с выбранным тэгом. Далее требуется выбрать название и размер виджета. Размер имеет значения от 1×1 до 10×10. После этого можно выбрать ширину плагина, фон, цвет шапки и рамки, если необходимо.

Теперь можно посмотреть, как будет выглядеть виджет и в конце получаем готовый код для вставки на сайт.

Виджет можно скачать бесплатно здесь.

3. Простая установка через Stapico

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

Единственным минусом такого способа является использование этого сервиса как третьего сайта. Это означает, что перед переходом в инстаграм будет вначале перекидывать на сервис Stapico.

Виджет от Stapico бесплатный.

Использование Instagram на сайте

Установка виджета Instagram хорошо работает в таких направлениях:

• продажа косметики;
• продажа своих дизайнерских украшений;
• туризм;
• распространение товаров для дома и интерьера;
• свадебный бизнес;
• доставка еды и напитков;
• продажа разнообразной одежды;
• распространение мебели.

Требуется создавать интересный и вовлекающий контент, чтобы плагин на сайте давал максимальную пользу для бизнеса.

Для повышения эффективности от использования виджета Instagram можно делать следующее:

1. Разместить фотографии клиентов, использующих продукт компании так, чтобы при нажатии на картинку появлялось окно с качественным изображением товара/услуги и информацией, где можно купить.
2. Не лишними будут фотографии компании «за кадром». Это поможет создать более крепкие и доверительные отношения с клиентами, они увидят, как устроена и работает ваша компания, интернет-магазин.
3. Можно поздравлять своих покупателей и партнеров с разнообразными праздниками с помощью картинок. Так создаётся приятная и комфортная атмосфера.
4. Видеоролики, которые доступны в Instagram, ещё более наглядно и разносторонне преподносят продукт.
5. С помощью виджета можно рекламировать новый товар, который будет доступен в скором времени.

Организовать вывод информации из instagram на сайте можно разными способами, и сделать это просто. Требуется лишь немного усилий и базовых знаний, и яркий контент с Инстаграма добавит плюсов вашему интернет-ресурсу.

---

softolet — интернет-сервисы для бизнеса.
Ссылка на материал обязательна!

Оцените текст:

[Всего: 8   Средний:  2/5]