Instagram закрывает API. Что делать?

Зачем вообще что-то делать? Ну закрывает и закрывает. Во-первых, это случится только в середине 2016-го года. Во-вторых, ну перейдут пользователи со сторонних приложений на фирменное. Что такого?
IMG_20151120_091136
А я отвечу: Это катастрофа. Дело вот в чем.

  1. Instagram, скажу честно, прекрасное приложение для мобильных быстрофоток. Всегда с собой, всегда доступно в сети, легко закинуть то, что наснимал и снабдить комментарием. В любой момент можно посмотреть, что туда нафигачили друзья, как откомментировали. Однако, мне больше всего нравилось вот что. Стоило поставить специальный плагин, и моя лента инстаграма появлялась на сайте. Т.е. не нужно было заморачиваться с местом для хранения, с закачкой на сайт, с подгонкой размеров и т.д. Да и с подпиской удобно. Не нравится блог, но любопытно следить за фотками? На здоровье! Следи сколько хочешь, из Instagram даже не заходя на сайт.
  2. Убирание API — это натуральное кидалово. Т.е. люди сделали приложения, работающие с Instagram. Раскрутили эти приложения, параллельно раскручивая и сам сервис. А теперь, когда Инстаграм стал известным и популярным, он тупо в одностороннем порядке делает эти самые сторонние приложения нерабочими. Я считаю это подлостью. Пользоваться услугами подлецов не хочу.

Но все-таки, хочется иметь на сайте галерею, куда так же удобно было бы загружать фотографии, т.е. сразу с мобильника без лишних заморочек. Сфоткал, закинул, добавил краткое описание и забыл.

6

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

Ставлю задачу

Начнем с постановки задачи:

  1. Выйти из Инстаграма.
  2. Сделать возможным легко добавлять фотографии со смартфона на сайт, в отдельный раздел.
  3. Оставить возможность обрабатывать фотографии на смартфоне.
  4. Оставить возможность набирать подписчиков на ленту фотографий, как это было в Инстаграме. Желательно, чтобы и подписчики могли выкладывать там свои фото.
  5. Оставить возможность лайков и комментариев к фото.
  6. Добавить возможность добавлять фото со стационарного компьютера без лишних заморочек.
  7. Добавить возможность добавлять сразу несколько фото в один пост.

Вот пишу эти строки, а сам даже не знаю, как все это провернуть. Да и не факт, что получится всё или получится вообще, но я попробую.

С чего начать?

Поскольку сайт на WordPress, то первое, что приходит на ум, это сделать новый тип записей и выводить их ленту на отдельной странице с отдельным дизайном (в виде галереи).

Чем плох такой подход? Только одним: иные типы записей не поддерживает официальное мобильное приложение WordPress. Шах и мат, однако.

Идём другим путём.

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

Как это сделал я?

Создаю новую рубрику — Фотоальбом.

1

2

Навожу на нее в разделе рубрик, и в статусной строке браузера появляется вот такая строчка. Меня в ней интересует tag_ID и его значение (в моем случае 10).

3

4

Пишу в рубрике «Фотоальбом» пост с заголовком «Создаю антиИнстаграм», проверяю на главной. Да, он выводится в общей ленте.

5

Теперь иду в редактор шаблона и ищу все места и файлы, где есть вывод ленты блога. Нужно указать параметр, никогда не выводить там рубрику с ID 10. У меня таких файлов нашлось целых 4.

В каждом этом файле ищу строки такого типа

<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

и заменяю на вот такие

<?php $query = new WP_Query('cat=-10'); if( $query->have_posts() ) :
	while( $query->have_posts() ) : $query->the_post();
?>

У нормальных людей это должно работать, но не у меня. Дело в том, что в качестве главной я поставил статичную страницу, а ленту вывожу плагином Posts in Page. Так что в ленте архивов и в ленте рубрик пост исчез, а на главной остался.

Ищу на странице шоткод

[ic_add_posts showposts='3']

и добавляю в него cat=’-10′

[ic_add_posts cat='-10' showposts='3']

Сохраняю. Ура! Пост из рубрики Фотографии больше не отсвечивает на главной. Так… а на какой он должен отсвечивать? Ну конечно на странице Фотографии, которая уже создана, и на которую выводится лента моего Instagram.

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

[ic_add_posts cat='10' showposts='20']

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

На первой картинке понял, что всё не так удобно, как хотелось бы. Во-первых, нужно писать заголовок, во-вторых, текст под картинкой, в-третьих, нужно лезть выбирать рубрику.
Значит, долой заголовки, долой обязаловку с текстом, а рубрика по умолчанию теперь Фотоальбом. Ставится в настройках блога в пункте Написание.

Вторую фотографию публикую сразу, ничего не добавляя.

Печаль… Запись в админке есть, без заголовка и текста, как и планировал, но плагин ее не вывел. Плохо.

Идём другим путём. Создаем копию файла шаблона category.php и обзываем его (в моем случае) category-10.php (по ID категории, которую будем сюда выводить).

В нем уже есть строки, что добавлял выше. Убираю минус, получаю вот это

<?php
$query = new WP_Query('cat=10');
if( $query->have_posts() ) :
	while( $query->have_posts() ) : $query->the_post();
?>

Впрочем, как раз тут вполне годятся стандартные:

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>

Лучше пусть будут они.

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

Итак, теперь лента открывается со всеми публикациями Фотоальбома, но картинок там нет, и вообще всё выглядит ужасно.

7

Добавляю еще фоток с телефона.

Теперь, надо заставить выводить в ленте этой категории только минатюры первых картинок каждого поста. Если вдруг картинки нет, то и выводить вместо нее ничего не нужно. Для этого нужно написать функцию. Я взял готовую и переработал под эту конкретную задачу. Вставил ее в functions.php в самый конец.

<?php/* ===========ВЫВОД КАРТИНКИ В ФОТОАЛЬБОМЕ=========== */

//Вывод первой картинки с поста
function post_first_prev(){


  global $post, $posts;
  $first_img = '';
  ob_start();
  ob_end_clean();
  $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
  
  $first_img = $matches [1] [0];
  if(empty($first_img)){
   $first_img = "noimage";
//Если картинки нету, выводим noimage
  }
  
  $first_img = preg_replace('/(.*?)(\.jpg|\.png|\.gif|\.jpeg|\.bmp)/i', '\1-150x150\2', $first_img);
//Добавляем к названию файла картинки -150x150
//Это значение берем из настроек сайта, раздел Медиафайлы, "Размер миниатюры". У меня это 150 х 150
  
  return $first_img;
}

?>

Вместо вывода контента, вставил в category-10.php такой код:

<?php $query = new WP_Query('cat=10'); if( $query->have_posts() ) :
	while( $query->have_posts() ) : $query->the_post();
?>

<?php $img_t = post_first_prev(); ?>

<?php if($img_t != 'noimage'){ //Если вместо пути функция выдала noimage, то мы такой пост не выводим ?>

	<a class="foto" href="<?php the_permalink() ?>" title="<?php the_title(); ?>" style="background-image:URL('<?php echo post_first_prev(); ?>');background-repeat:no-repeat;">
		<span class="imgdescription"><?php kama_excerpt("maxchar=380"); ?></span>
	</a>

<?php } ?>

    <?php endwhile; ?>

    <?php anarcho_page_nav(); //Этим пользуется шаблон. У вас такой строчки может не быть ?>

    <?php endif; ?>

Особенность в том, что картинка выводится в фоне блока, и простым перетаскиванием из браузера ее не скопировать. Своего рода защита от копирования дураками. Тех, что попродвинутее, это не остановит, да и не надо мне оно. Просто именно такой метод показался удобнее.

Ну вот. Наконец то все выводится как надо. Осталось добавить в style.css нужные классы и на сегодня можно заканчивать. Я сделал вот так:

.fotos a.foto{
display:inline-block;
width:150px;
height:150px;
overflow:hidden;
border:#fff 3px solid;
-webkit-box-shadow: 1px 1px 4px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 1px 1px 4px 0px rgba(0,0,0,0.5);
box-shadow: 1px 1px 4px 0px rgba(0,0,0,0.5);
}

.fotos a.foto .imgdescription{
display:inline-block;
width:140px;
/*height:140px;*/
visibility:hidden;
padding:5px;
margin-bottom:-100%;
}

.fotos a.foto:hover .imgdescription, .fotos a.foto .imgdescription:hover{
visibility:visible;
background: rgba(255, 255, 255, 0.6);
}

Посмотреть результат можно по ссылке http://www.xylog.ru/category/fotoalbom/
Если конечно пост не устарел, а я там все не переделал. Ну вот скриншот, на этот случай.

8

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

К сожалению, количество превьюшек в этой галерее равно количеству постов на страницу. Настраивается в Настройках, в разделе Чтение, параметр «На страницах блога отображать не более». Лезу туда и выставляю 16.

А на этом пока всё. Остальное в следующий раз.
С вами был Доктор Лексиум.
Делитесь ссылкой на этот пост с друзьями.

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

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