Обзорная статья - что сделано в блоге
ДАТА: 03.12.17
ИСТОЧНИК: ФАКОХЕРУС.КОМ
Нелюбимый мной формат повествования - но надо запечатлеть
Три дня назад я опубликовал сотую (праздничную) статью, на своем блоге, в которой были поставлены некоторые задачи. Так вот некоторые из них уже выполнены. Немножко косо, немножко криво, но всё же.
Почему-то, сам не пойму почему, посчитал, что задачи, на которых сосредоточусь ниже, займут значительно больше времени и условных нервов. Всё оказалось значительно радужнее. :D Хотя и немножко не так, как задумывалось. Но то – мелочи. Короче, на 100 с лишним, страниц моего статического ХТМЛ блога, прикрутить комментарии, кнопку «Нравится» и рекламу, понадобился один день. Такой вот выходной день, в течение которого сходил на рынок и в супермаркет, за продуктами, разморозил холодильник, посмотрел несколько праздных роликов на Ютубе, помог Юльке приготовить тефтели с рисом и свининой, и ещё неслабо «набулькался» пивом. В общем, реально, все задачи, что касались блога, заняли около 4-х, максимум 5-ти часов. И так, что сделал, как сделал и чем результат отличается от задуманного.
1. Прикрутил кнопку «Нравится» Фейсбук. Никаких сложностей в реализации её – нет. Сейчас кнопка ровно там, где и должна быть. Конечно, есть пара неприятных и неудобных моментов:
Раздражает рекомендация ФБ, внедрять основной код, непосредственно за открытым тэгом BODY. Не то чтобы это сложно или как-то ещё, просто все эти скриптовые каракули, в начале основного кода – бесят. Не по «фен-шую», как-то.
Вторая часть кода, размещаемая непосредственно в месте отображения кнопок «Нравится» и «Поделиться» требует внесения корректировок на каждой страничке – надо вставлять корректный идентификатор страницы, чтобы кнопка «Поделиться», работала адекватно и делилась той статьёй, под которой она размещена, а не главной страницей блога. В отличии от основного кода, который внедряется только в шаблон сайта, а дальше размещается автоматически, с помощью стандартного функционала ХТМЛ-редактора, вставлять правильный адрес нужно ручками, на каждой страничке, где есть кнопка «Нравится – Поделиться». Морока. Основное время потрачено на это действие.
Существует также и третья часть кода. Она непосредственно связана с кнопкой «Поделиться». Эта часть кода – необязательная и нужна для адекватного отображения содержимого статьи, непосредственно в Фейсбуке. По-сути, это мета-тэги формата Оупэн Граф. Я реализовал их только на нескольких страницах: содержащих рецепты и тех, что посчитал наиболее резонансными и важными для философии моего блога. Кроме этого, полагаю, что поисковик смотрит на наличие всяких таких вторичных «приблуд» и оценивает их присутствие, как дополнительное внимание редакторов сайта, к контенту, что содержится на конкретной странице интернет – издания. Тоже замороченная штука. Но надо не всегда. По желанию, но желательно.
Отображение кнопок происходит с задержкой, в мобильной версии сайта. Почему? Непонятно. Мне кажется, что иногда можно прочитать коротенькую статейку раньше, чем отобразятся кнопки. Такоэ.
2. Комментарии «Дискус». Давно с ними дружу. Прикрутил и сюда их. Сложностей в реализации вообще нет! Аккаунт у меня на Дискусе есть давным-давно, так что всё, что нужно было сделать – зарегистрировать новый (этот) сайт и скопировать универсальный код (не тот что для разных ЦМС, а именно универсальный) на шаблон моего блога, а дальше «Дримвивер», перенёс его на все странички. Где кометы не нужны – код удалил. Всё просто и лаконично. Вопросов ноль.
3. Рекламный блок Адсенс. Немножко пришлось «покумекать», так как такого вида код я ещё не встраивал. Фишка в том, это код адаптивный: в зависимости от разрешения экрана меняется размер рекламного блока. Я реализовал три варианта:
Для «стационарного» представления сайта, этот блок реализован в правой части экрана и представляет собой «липкий» рекламный блок размером 300х600 пикселей. Считаю такую подачу рекламы самой ненавязчивой и эффективной. Такой вариант практически исключает случайные нажатия – что сказывается на конверсии, и не загромождает основного контента страницы.
Для «мобильной» версии, которая активируется на моем блоге, при разрешении меньше чем 875 пикселей – 2 варианта. Первый вариант – рекламный блок размером 468х60 отображается на экранах с шириной от 875 до, минимум 500 пикселей, а если разрешение по ширине, меньше 500, то активируется следующий размер – 320х100. Блок с правой стороны «стационарной» версии, перемещается под заголовок статьи, в «мобильной» версии сайта. Полностью отключать этот блок, для разрешений меньше 320 пикселей, пока не стал. Это требует дополнительного «мозгования» - пока нет времени и желания, для этого.
Относительно реализации этого рекламного блока, есть несколько пока не решенных задач, которые не стоят как-то остро, но по-ходу надо будет осуществить:
Во-первых, перенести стили CSS и медиа-запросы в отдельный CSS –файл, ибо зачем-то я разместил, этот код в теле шаблона.
Добавить в этот CSS –файл правило, отключающее рекламный блок, при разрешении меньше 320, а вернее 346 пикселей, с учетом левого отступа. Да-да-да. Это всего дел на 30 минут, но лень пока одолевает. :D
Возможно, надо сделать так, чтобы рекламный блок центрировался по ширине отображаемой страницы, но не факт что это нужно. Красиво смотрится только на маленьких разрешениях и «человеческой» реализации, как я понял, этого варианта нет – всё на «костылях».
Самое весёлое, то, что когда переходишь от полной версии сайта к мобильной, примером растягивая окно браузера, или переворачивая iPad с книжной ориентации на альбомную, рекламный блок не трансформируется, как это значится в инструкции к «Адаптивному рекламному блоку», а остаётся в первоначальном виде. То есть открыл страницу блога в браузере ноутбука – рекламный блок отобразился справа от статьи в масштабе 300х600 пикселей. Потом «стянул» окно браузера до размера активации мобильной версии сайта, рекламный блок переместился под заглавие статьи, как и положено, но остался в том же огромном размере, а не трансформировался в один из маленьких вариантов. Для трансформации нужна перезагрузка страницы. Насколько это важно? Для меня абсолютно нет, как для конечного «потребителя», а вот если бы делал что-то на заказ – возникли бы вопросы. Всё конечно решаемо, но осадочек есть.
Какие выводы? А такие, что нынче всё просто: скопировал – вставил – работает! Честное слово, думал дня три «промудохаюсь», оказалось – несколько часов. С чем себя и поздравляю! :D