Как создать виджет «Фото Инстаграм» без плагина

  Автор:
  16 комментариев
  14022
Как создать виджет фото инстраграм

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

К сожалению сам Instagram не предлагает кода виджета, пока, поэтому нужно приложить небольшие усилия по его созданию.

Для WordPress есть несколько плагинов. Но я расскажу виджете, который я создала для шаблона AB-Inspiration без использования плагинов. Это оказалось не простой задачей, и я перебрала много решений. Вот что в итоге получилось.

Внимание! Если Вы пользователь шаблона AB-Inspiration Вам не нужно редактировать коды. Вы можете просто прочитать эту статью для общего образования. В шаблоне уже встроен виджет Фото Инстаграм, и все что нужно это прописать в виджете Ваш логин и ID. Виджет встроен в шаблон с версии 4.0.

Итак, мы сделаем полноценный виджет с настройками. Это готовое решение. Я не буду подробно описывать все шаги. Этот код уже отработан на шаблоне AB-Inspiration. Его не нужно дорабатывать. Достаточно просто скопировать этот код, вставить в файл function.php, и настроить созданные виджет.

Код Виджета Фото Instagram

class instagram_widget extends WP_Widget {
    function instagram_widget() {
        parent::WP_Widget(false, $name = 'Фото Инстраграм');
    }

    /** Функция вывода виджета в боковой колонке */
    function widget($args, $instance) {
        extract( $args );
		$title = apply_filters('widget_title', $instance['title']);
		 $instid = $instance['instid'];
		 $instlogin = $instance['instlogin'];
		 $instwidth = $instance['instwidth'];
		 $instcol = $instance['instcol']; if ($instcol == '') $instcol = 12;	

                 echo $before_widget; ?>
                  <?php if ( $title )
                        echo $before_title . $title . $after_title; ?>
                  <?php
		// Переменные ID пользователя и колонки
		$userid = $instid;
		$photocol = $instcol;

		// Получение данных
		function fetchData($url){
		     $ch = curl_init();
		     curl_setopt($ch, CURLOPT_URL, $url);
		     curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
		     curl_setopt($ch, CURLOPT_TIMEOUT, 20);
		     $result = curl_exec($ch);
		     curl_close($ch);
		     return $result;
		}

$result = fetchData("https://api.instagram.com/v1/users/{$userid}/media/recent/?client_id=103a007d0f0541d6b93cf631b96c7273&count={$photocol}");
$result = json_decode($result);
?>

<?php /** Вывод изображений в виджете */ ?>
<div class="textwidget" style="padding-top:5px;">
<?php foreach ((array) $result->data as $post): ?>
<a class="group" rel="external nofollow" href="<?php echo $post->images->standard_resolution->url ?>"><img src="<?php echo $post->images->thumbnail->url ?>" style="width:<?php echo $instwidth;?>px; height:<?php echo $instwidth;?>px;" width="<?php echo $instwidth;?>" height="<?php echo $instwidth;?>" class="instag" alt=""></a>
<?php endforeach ?>

<?php /** Вывод кнопки "Посмотреть в инстраграм" */ ?>
<a href="http://instagram.com/<?php echo $instlogin; ?>" target="_blank" rel="nofollow"><div style="text-align:left;" class="sprite-instagram-badge"></div></a></div>

         <?php echo $after_widget;
    }

     /** Обновление данных */
    function update($new_instance, $old_instance) {
		$instance = $old_instance;
		$instance['title'] = strip_tags($new_instance['title']);
		$instance['instid'] = strip_tags($new_instance['instid']);
		$instance['instlogin'] = strip_tags($new_instance['instlogin']);
		$instance['instwidth'] = strip_tags($new_instance['instwidth']);

	$instance['instcol'] = intval( $new_instance['instcol'] );
		return $instance;
    }

/** Данные по умолчанию */
    function form($instance) {
    $defaults = array(
      'instcol' => '8',
      'instwidth' => '129',
      'title' => __( 'Фото в Инстраграм', 'inspiration' )
					);
	$instid = isset( $instance['instid'] ) ? esc_attr($instance['instid']) : '';
	$instlogin = isset( $instance['instlogin'] ) ? esc_attr($instance['instlogin']) : '';
        $instance = wp_parse_args( (array) $instance, $defaults ); ?>

        <p>
          <label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:'); ?></label>
          <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $instance['title']; ?>" />
        </p>

         <p>
          <label for="<?php echo $this->get_field_id('instlogin'); ?>"><?php _e('Логин профиля в Instagram:'); ?></label>
          <input class="widefat" id="<?php echo $this->get_field_id('instlogin'); ?>" name="<?php echo $this->get_field_name('instlogin'); ?>" type="text" value="<?php echo $instlogin; ?>" />
         </p>

         <p>
          <label for="<?php echo $this->get_field_id('instid'); ?>"><?php _e('ID профиля в Instagram (Узнать ID можно <a href="http://jelled.com/instagram/lookup-user-id" target="_blank">здесь</a>:'); ?></label>
          <input class="widefat" id="<?php echo $this->get_field_id('instid'); ?>" name="<?php echo $this->get_field_name('instid'); ?>" type="text" value="<?php echo $instid; ?>" />
         </p>

         <p>
	 <label for="<?php echo $this->get_field_id( 'instwidth' ); ?>"><?php _e( 'Количество в ряд:', 'inspiration' ); ?></label>
	 <select name="<?php echo $this->get_field_name( 'instwidth' ); ?>" class="widefat" id="<?php echo $this->get_field_id( 'instwidth' ); ?>">
	 <option value="81"<?php selected( $instance['instwidth'], '81' ); ?>><?php _e( 'Три в ряд', 'inspiration' ); ?></option>
          <option value="129"<?php selected( $instance['instwidth'], '129' ); ?>><?php _e( 'Две в ряд', 'inspiration' ); ?></option>
	 </select>
	 </p>

	 <p>
	 <label for="<?php echo $this->get_field_id( 'instcol' ); ?>"><?php _e( 'Количество изображений:'); ?></label>
	 <input class="widefat" id="<?php echo $this->get_field_id( 'instcol' ); ?>" name="<?php echo $this->get_field_name( 'instcol' ); ?>" type="text" value="<?php echo $instance['instcol']; ?>" />
	</p>
        <?php
    }

}
add_action('widgets_init', create_function('', 'return register_widget("instagram_widget");'));

Стиль кнопки  «Посмотреть в Instagram»


.sprite-instagram-badge { margin-top:10px; width: 137px; height: 24px; background: url(//badges.instagram.com/static/images/ig-badge-view-sprite-24.png) no-repeat 0 0; }
.sprite-instagram-badge { background-image: url(//badges.instagram.com/static/images/ig-badge-view-sprite-24@2x.png); background-size: 160px 178px; }
.sprite-instagram-badge:hover { background-position: 0 -60px; }
.sprite-instagram-badge:active { background-position: 0 -120px; }

Стиль изображений


.instag
{
margin-bottom:3px;
border:1px solid #eaeaea !important;
background:#fff;
padding:3px;
-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
box-shadow: 0 0 5px#eee;-moz-box-shadow: 0 0 5px#eee; -webkit-box-shadow:0 0 5px#eee}

Cтиль изображений Вы можете поменять на свой вкус.

Значение стиля изображений:

  • margin-bottom:3px — отсутп снизу
  • border:1px solid #eaeaea !important; — граница вокруг изображений
  • background:#fff; — фон между изображением и границей
  • padding:3px; — отступ от изображения до границы
  • -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; — закругления углов границы
  • box-shadow: 0 0 5px#eee;-moz-box-shadow: 0 0 5px#eee; -webkit-box-shadow:0 0 5px#eee — тень вокруг границы

Создание виджета «Фото Инстаграм» без плагина

Вставка кода в файл function.php

  1. Скопируйте код выше
  2. Зайдите в админку блога — Внешний вид — Редактор
  3. Найдите файл function.php
  4. Вставьте скопированный код в этот файл в самом конце
  5. Сохраните файл

Вставка стиля в файл style.css

  1. Скопируйте код стилей
  2. Зайдите в админку блога — Внешний вид — Редактор
  3. Найдите файл style.css
  4. Вставьте скопированный код в этот файл в самом конце
  5. Отредактируйте код на свой вкус (как Вы хотите, чтобы отображались изображения)
  6. Сохраните файл

Настройка виджета «Фото Инстаграм»

  1. Перейдите в раздел Внешний вид — Виджеты
  2. В списке виджетов должен появиться новый виджет «Фото Инстраграм»
  3. Перетащите этот виджет в боковую колонку
  4. Настройте виджет «Фото Инстраграм»
  •  Заголовок
  • Логин профиля в Instagram
  • ID профиля в Instagram
  • Количество изображений в ряд (2 или 3 на выбор)
  • Количество изображений (указывается произвольно)

instagram2

Поля «Логин профиля в Instagram» и «ID  профиля в Instagram» обязательные.

В поле Логин впишите логин в Instagram, который Вы используете для входа в аккаунт.

ID профиля в Instagram можно узнать следующим образом:

  1. Открываем необходимый профиль на Instagram, нажимаем правой кнопкой мыши на странице. В открывшемся меню кликаем на вкладку — «Просмотр кода страницы» или «Посмотреть исходный код» (можно одновременно нажать комбинацию кнопок Ctrl+U).
  2. На странице исходного кода открываем поиск по странице. Для этого жмем клавиши Ctrl + F. В поиск введите значение — profilePage_ и нажмите Enter. На странице будут найдены несколько значений (может быть 2 или 3). Возле этой фразы через нижний дефис будет указан ваш id пользователя Инстаграм (на данный момент состоит из 10 цифр).

Остальные поля заполните по-желанию.

Если Вы находите эту информацию полезной, не забудьте поделиться статьей с друзьями в социальных сетях. Нажмите на кнопки «Поделиться» над или под статьей.

Другие статьи на тему «Фишки без плагинов«. Все эти фишки встроены в шаблон — конструктор AB-Inspiration. Если Вы создаете свой блог на обычном шаблоне, Вам нужно очень много всего встроить в шаблон, чтобы он превратился в бизнес блоге. Эти статьи помогут Вам самостоятельно настроить любой шаблон. А если Вы пользователь шаблона AB-Inspiration Вам будет интересно узнать, как устроен Ваш шаблон :)

 


Создать сайт для заработка с нами — легко и быстро!

За помощью обращайтесь в нашу службу поддержки 24/7

 

Нужен качественный хостинг для сайта на WordPress?
Рекомендую, проверенные годами, хостинг Timeweb:
Надежный проверенный годами хостинг для сайта на WordPress
а также, хостинг Beget:
Хостинг Beget
Как создать виджет «Фото Инстаграм» без плагина

   6 голосов
Средняя оценка: 4.3 из 5
Находите эту информация полезной и интересной? Тогда смело жмите на кнопки соцсетей и поделитесь этой информацией со своими друзьями и знакомыми:

Анфиса Бреус

Анфиса Бреус - специалист по Wordpress с 2007 года. Создатель и разработчик шаблона "AB-Inspiration" для самостоятельной и профессиональной настройки сайтов на WordPress для бизнеса. Основатель клуба "Мастер WordPress" и автор эксклюзивных курсов по WordPress. Фрилансер. Спикер.

Подпишись на меня в Telegram! Только важные новости и лучшие статьи
Оставьте свой комментарий:

Комментарии на Блог
16 комментариев
  1. Марина Удовенко

    Спасибо, Анфиса! Все очень просто и здорово! *THUMBS UP* (в заголовке лишнюю букву надо убрать!)
    А как сделать кнопку «Посмотреть в Инстаграм» под фото ?
    И почему то у меня 2 фото в ряд не захотели вставать, пришлось сделать по 3 в ряд. Но это не смертельно *DANCE*

    • Марина,
      1. Кнопка «Посмотреть в Инстаграм» уже прописана в коде. Чтобы она отобразилась в виджете вставьте следующий код в файл стилей
      .sprite-instagram-badge { margin-top:10px; width: 137px; height: 24px; background: url(//badges.instagram.com/static/images/ig-badge-view-sprite-24.png) no-repeat 0 0; }
      .sprite-instagram-badge { background-image: url(//badges.instagram.com/static/images/ig-badge-view-sprite-24@2x.png); background-size: 160px 178px; }
      .sprite-instagram-badge:hover { background-position: 0 -60px; } .sprite-instagram-badge:active { background-position: 0 -120px; }

      Также Вы можете с помощью стилей регулировать стиль отображения изображений. За стиль отображения изображений отвечает класс instag.
      Пример использования:

      .instag {margin-bottom:3px; border:1px solid #eaeaea !important; background:#fff; padding:3px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; box-shadow: 0 0 5px#eee;-moz-box-shadow: 0 0 5px#eee; -webkit-box-shadow:0 0 5px#eee}

      В статье выше написано чуть подробнее про стили.

      2. У Вас не отобразились по 2 в ряд скорее всего из-за размера. У Вас узкая боковая колонка. В коде указано 2 размера — в зависимости от того сколько изоражений в ряд Вы выбираете. На выбор 81px — если 3 в ряд, и 129px если 2 в ряд. Измените в коде эти значения, на те, что подходят для Вашей боковой колонки.

  2. Анфиса! Вы знаете, чем еще хорош Ваш шаблон? Вы все время даете дополнительные уроки к нему. Я еще не зарегистрирована в сети Инстограм. И, честно говоря, от Вас о ней узнала. Когда начала работать с Вашим шаблоном, то уроки по Инстограм пропустила. Теперь вот вернусь и все настрою. Фотографии ведь есть, сама делаю и буду выкладывать. Спасибо большое за статью!

  3. Марина Мышелова

    Анфиса, вы прям профессиональный мотиватор. Еще недавно я вообще мало чего понимала в настройке блога, но когда дело коснулось того, что нкжно делать свой сайт, пришлось многому научиться))) а сейчас я лоалю себя на мысле, что отдыхпю тогда, когда ковыряюсь со своим сайтом, а теперь уже и с чужими. Все они сделаны на Вашем шаблоне. Но, вот появилась серия статей Фишки без плагинов и стала задумываться сделать блог на другом шаблоне. Очень интересно попробовать свои силы. Спасибо?

  4. Алекс

    Ссылка «посмотреть в инстаграм» ведет на профиль, а не на конкретное фото.

    • Алекс, все верно. Кнопка-Ссылка под изображениями ведет на профиль. Сами фото ведут тоже на профиль, но если Вы установите всплывающее окно (как это сделано в шаблоне AB-Inspiration) изображения будут открываться на блоге во всплывшем окне.

  5. Николай

    Сервис не работает.
    Где ещё можно ID узнать?

  6. Святослав

    А код то не рабочий. Выдаёт ошибку. Увы!!!

    • Святослав, протестировала еще раз. Все работает отлично. Напишите, на каком этапе именно не работает? Какую ошибку выводит? В какой шаблон пытаетесь встроить? Какие плагины дополнительно используете? Все это может конечно влиять на код. Могут быть несовместимости. Попробуйте для начала, прежде чем утверждать, что код не рабочий, установить его на дефолтный шаблон WordPress, например twenty fifteen, при этом отключите все плагины. На дефолтных все работает. Затем подключите один за другим плагины. Если все работает значит дело не в плагинах, а в том шаблоне, в который вы пытаетесь встроить код. Если вы все же хотите именно тот шаблон, нужно искать несовместимость.

  7. Святослав

    Попробую сделать так, как Вы говорите. Спасибо.

  8. Владимир

    Добрый времени суток!
    Пытался использовать Ваш код для Виджета, но возникла проблема. Код не выводит изображений. Заголовок появляется, кнопка View on Instagram появляется. А элемента, который должен содержать изображения нет в коде страницы ( при просмотре инструментом разработчика в браузере Chrome).Пытался переключать на разные аккаунты Instagram, пытался отключать все плагины и ставить дефолтную тему twenty fifteen, пытался менять кодировку файла с ANSI на UTF-8. Все равно результат тот же. Выяснил, что у меня не отрабатывает часть кода виджета:

    data as $post): ?>
    <a class="group" rel="external nofollow" href="images->standard_resolution->url ?>»><img src="images->thumbnail->url ?>» style=»width:px; height:px;» width=»» height=»» class=»instag» alt=»»>

    Спасибо!

    • Владимир, не могу сказать почему у вас не получилось. Нужно смотреть блог. Вышлите, пожалуйста адрес блога куда вы устанавливаете код. Я сейчас проверила код, он рабочий. Устанавливала на дефолтную версию wordpress.

  9. Оооо, большое спасибо за информацию! Всё по делу! Друзья просят меня зарегестрироваться в инстаграм, а я всё ленюсь, но думаю, что надо — уж больно много там народу сидит…

  10. У меня не вышло — кнопа отображается в виджете, а картинок нет.

Ваш адрес email не будет опубликован. Обязательные поля помечены *