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

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

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

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

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

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

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

Код Виджета Фото Инстаграм

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");'));

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


.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» обязательные.

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

ID профиля в Instagram можно узнать по этому адресу: http://jelled.com/instagram/lookup-user-id. Введите в поле логин и нажмите нажмите GO. Ниже появится информация о вашем профиле в том числе User ID.

instagram

Этот User ID нужно вставить в поле виджета ID профиля в Instagram.

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

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

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

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

   5 голосов
Средняя оценка: 5 из 5
Вы находите данную статью полезной или интересной? Поделитесь ею, пожалуйста, с другими - просто нажмите на кнопки ниже:
Самые Важные Оповещения Блога + Четкий Комплект Ценных Подарков ДЛЯ БЛОГЕРОВ И ФРИЛАНСЕРОВ
Оставьте свой комментарий:
15 комментариев
  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. Николай

    Сервис http://jelled.com/instagram/lookup-user-id не работает.
    Где ещё можно 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. Оооо, большое спасибо за информацию! Всё по делу! Друзья просят меня зарегестрироваться в инстаграм, а я всё ленюсь, но думаю, что надо — уж больно много там народу сидит…

на Блоге
в Фейсбук
в Вконтакте