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

| Скачать исходники |

1. Что мы планируем сделать

Работать наш плагин будет с шорт-кодом [instagradam]. Этот шорт-код можно добавить где угодно в вашем основном контенте на странице: в шаблон страницы, в редактор сайта и т.д.

В результате выполнения данного шорт-кода должны отображаться 10-15 картинок с кликабельными ссылками. Основа плагина — лента публикаций, доступ к которой будем получить с помощью функционального API WordPress.

В "сыром" виде обеспечение такой функциональности выглядит следующим образом:

/*
  theluxurystyle --- http://distilleryimage8.s3.amazonaws.com/c4c876f4780a11e2a15422000a9f19a4_5.jpg
  loveobe --- http://distilleryimage3.s3.amazonaws.com/0c2d3b20781911e2b92122000a9e0727_5.jpg
  jaredleto --- http://distilleryimage8.s3.amazonaws.com/21d07bce781c11e2adc122000a1f9ace_5.jpg
  balloop --- http://distilleryimage11.s3.amazonaws.com/4fe04e66781411e2890222000a1fb0b2_5.jpg
  pinkshosho --- http://distilleryimage10.s3.amazonaws.com/abaef1b4781b11e2a2ce22000a1fa411_5.jpg
*/

2. Получаем клиентский ID и доступ к аккаунту

Этот шаг обязателен для каждого нового плагина. Зарегистрируйтесь в Instagram для получения параметров client_id и client_secret. Название у плагина должно быть простым (к примеру, johnsplugin).

3. Информация о плагине

Здесь надо указать описание основной информации и свойств плагина, таких как: название, url, номер версии и автор плагина.

/*
Plugin Name: Instagradam
Plugin URI: http://wp.tutsplus.com/
Description: A simple and fast Instagram shortcode plugin. Please use [instagradam] to pull main feed!
Version: 1.0
Author: Adam Burucs
Author URI: http://burucs.com/
*/

4. Регистрируем шорт-код

Здесь будет задано значение шорт-кода [instagradam], который работает на основе функции instagradam_embed_shortcode:

// register shortcode
add_shortcode( 'instagradam', 'instagradam_embed_shortcode' );

5. Определяем основную функцию в шорт-коде

Здесь описываем ключевую операцию, которую выполняет плагин. Параметры $atts и $content должны быть определены так, как в данном примере, но в этом уроке мы эти параметры не используем:

// define shortcode
function instagradam_embed_shortcode( $atts, $content = null ) {
 
    // ...
 
}

6. Задаем переменные

Нам нужна вспомогательная переменная для обеспечения вводных данных функции и вывода результатов с использованием функционального API. Этими переменными являются $str и $result:

// define main output
$str    = "";
// get remote data
$result = wp_remote_get( "https://api.instagram.com/v1/media/popular?client_id=3f72f6859f3240c68b362b80c70e3121" );

7. Справляемся с ошибками в ленте

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

Если же вы получили ошибку, то на странице должна срабатывать эхо-функция: Something went wrong: ...

if ( is_wp_error( $result ) ) {
    // error handling
    $error_message = $result->get_error_message();
    $str           = "Something went wrong: $error_message";
} else {
    // processing further
    // ...
}

8. Еще немного переменных

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

// processing further
$result    = json_decode( $result['body'] );
$main_data = array();
$n         = 0;

9. Цикл, часть 1

Этот цикл будет собирать все пользовательские имена и картинки предварительного просмотра, которые нам нужны. Лично я анализирую основную ленту, чтобы сделать из нее выборку тех картинок, которые меня интересуют. Не забываем об этом шаге, равно как о возможности модификации этих параметров в Instagram в будущем, для чего нам может понадобиться внесение изменений в строку:

$d->user->username and $d->images->thumbnail->url

// get username and actual thumbnail
foreach ( $result->data as $d ) {
    $main_data[ $n ]['user']      = $d->user->username;
    $main_data[ $n ]['thumbnail'] = $d->images->thumbnail->url;
    $n++;
}

10. Цикл, часть 2

А тут мы создаем HTML-код, который содержит картинки и ссылки на файлы в основной ленте Instagram. Ссылки будут открываться в новом окне, что задано параметром target="_blank". Заметьте, что в конце основной строки есть пробел: это для базового отделения файлов и ссылок:

// create main string, pictures embedded in links
foreach ( $main_data as $data ) {
    $str .= '<a target="_blank" href="http://instagram.com/'.$data['user'].'"><img src="'.$data['thumbnail'].'" alt="'.$data['user'].' pictures"></a> ';
}

11. Самое простое

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

return $str;

12. Проблемы с SSL

В некоторых случаях функция wp_remote_get может работать некорректно, потому эту проблему мы можем решить путем вставки данного кода перед основным блоком нашего шорт-кода:

// fix SSL request error
add_action( 'http_request_args', 'no_ssl_http_request_args', 10, 2 );
function no_ssl_http_request_args( $args, $url ) {
    $args['sslverify'] = false;
    return $args;
}

13. Полученный в итоге код

В итоге весь код будет следующим:

/*
Plugin Name: Instagradam
Plugin URI: http://wp.tutsplus.com/
Description: A simple and fast Instagram shortcode plugin. Please use [instagradam] to pull main feed!
Version: 1.0
Author: Adam Burucs
Author URI: http://burucs.com/
*/
 
    // fix SSL request error
    add_action( 'http_request_args', 'no_ssl_http_request_args', 10, 2 );
    function no_ssl_http_request_args( $args, $url ) {
        $args['sslverify'] = false;
        return $args;
    }
 
    // register shortcode
    add_shortcode( 'instagradam', 'instagradam_embed_shortcode' );
     
    // define shortcode
    function instagradam_embed_shortcode( $atts, $content = null ) {
        // define main output
        $str    = "";
        // get remote data
        $result = wp_remote_get( "https://api.instagram.com/v1/media/popular?client_id=3f72f6859f3240c68b362b80c70e3121" );
 
        if ( is_wp_error( $result ) ) {
            // error handling
            $error_message = $result->get_error_message();
            $str           = "Something went wrong: $error_message";
        } else {
            // processing further
            $result    = json_decode( $result['body'] );
            $main_data = array();
            $n         = 0;
 
            // get username and actual thumbnail
            foreach ( $result->data as $d ) {
                $main_data[ $n ]['user']      = $d->user->username;
                $main_data[ $n ]['thumbnail'] = $d->images->thumbnail->url;
                $n++;
            }
 
            // create main string, pictures embedded in links
            foreach ( $main_data as $data ) {
                $str .= '<a target="_blank" href="http://instagram.com/'.$data['user'].'"><img src="'.$data['thumbnail'].'" alt="'.$data['user'].' pictures"></a> ';
            }
        }
 
        return $str;
    }

Как выглядит результат

А вот как выглядит результат работы плагина на практике. Именно его и обеспечивает шорт-код, о котором мы сегодня вели речь:

Источник: WP.tutsplus.com

Вам понравился материал?

Добавить комментарий

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.

5 комментариев

сначала новые
по рейтингу сначала новые по хронологии

хорошее, практичное решение, но, увы, у меня не сработало. Поменял id на свой, добавил код в functions.php, но шорткод из примера ничего на странице не выводит.

андрей

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

У меня получаетса только такое
И ето не мой инстаграм
Можеш помочь?

Sergey Makarov

Можно ли брать для публикации фотографии интересующих вас людей?

В данном уроке рассмотрен вариант вывода картинок только из фида вашего профиля. Все остальные доработки - по вашему желанию.