Похожие сообщения - настраиваемый виджет

10.01.2015

 Если честно, мне давно разонравился виджет похожих сообщений от Linkwithin. И авторы блогов часто говорили, что не могут его добавить к себе. Нашла хорошую альтернативу (на сегодняшний день). Огромное спасибо за идею блоггеру Сергею (http://shkolablogger.ru/vidzhet-engageya-pohozhie-i-rekomenduemyie-stati.html)
 Мне понравилось, что есть большой выбор настройки виджета похожих сообщений - с миниатюрами круглой или квадратной формы, один или два ряда миниатюр, различные варианты показа текста (в том числе цвет подписи) и др. И всё это бесплатно.



Для начала я бесплатно зарегистрировалась в сервисе http://www.engageya.com. Для этого нужно:

1. На сайте в правом верхнем углу нажать кнопку Register.



2. Заполнить поля во всплывающем окне: Username, Email, Website (сейчас укажите 1, потом можно еще добавить), Password. Ниже две галочки - 1) узнавать об обновлениях, 2) пользовательское соглашение.




3. После заполнения полей и нажатия кнопки Signup, появится еще одно маленькое окошко, где нужно будет внести проверочный код, который придет в письме по электронной почте.

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






Возможно, Вам понравятся виджет похожих сообщений с круглыми миниатюрами:

Или квадратные эскизы 100х100 с эффектом "наведения":
Есть еще виджет похожих сообщений с прямоугольными эскизами и с эффектом всплывающего текста после наведения курсора на картинку:
Ну и, например, виджет с фиксированным цветом текста заголовка сообщения:






Пробовала я разные варианты на двух блогах. Для того, чтобы добавить еще сайт в сервис - нажмите (на вкладке Website) зеленую кнопку +Add New Site



 Для создания виджета похожих сообщений нужно перейти на сайте на вкладку Widgets и справа найти кнопку Create New Widget

1. Название виджета (Widget Name) - пишем на латинице.
2. Выбираем внешний вид виджета (Layout) - потом можно будет отредактировать. Количество рядов миниатюр (Rows) - 1 или 2 - работает в некоторых виджетах. 


 Ниже будет отображаться предварительный просмотр. Меня интересовал виджет с двумя рядами квадратных
эскизов размером 100х100.

Блок большой, но информативный.

Автоматически подстраивается под ширину сообщения. Например, в превью было показано 10 похожих сообщений, а у меня в блоге "Я сама блоггер" входит шесть в ширину, итого 12. 

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

Выберите нужный Ваш сайт.

Если Вы хотите, чтобы в Вашем блоге/сайте показывались похожие сообщения только с Вашего сайта - отметьте строку "Related content from your blog". 

Далее можно выбрать 3 платформы для вставки виджета - Wordpress, Blogger и третий вариант для прочих платформ. Мы выберем в данном случае третий. Объясняю - почему. 

Вариант, предназначенный непосредственно для Blogger удобен в установке (несколько кликов), но при этом он будет отображаться на Главной странице Вашего блога сразу после каждого сообщения - неважно, анонс это или полное сообщение. В результате всё это выглядит громоздко. Поэтому предлагаю помучиться и выбрать третий вариант - вставка скрипта в код шаблона Blogger - Javascript any platform.

После выбора нажимаем кнопку Save end Get code и на следующей странице сможем получить код скрипта.


Вот теперь самое интересное.

Поскольку у меня в блоге был установлен виджет похожих сообщений от LinkWithin, мне нужно было сначала его удалить. Код этого скрипта удалила в шаблоне HTML перед строкой <footer>. 

Теперь попытаемся вставить код нового скрипта от www.engageya.com.
Скажу честно, перепробовала все варианты. Пробуйте тоже, пока результат Вас не устроит. 

Итак, в настройках блога идем в пункт Шаблон. Делаем резервную копию!

Далее нажимаем Изменить HTML.

Внутри рамки с кодом шаблона ставим курсор и при помощи клавиш Ctrl+F вызываем строку поиска.

Возможные варианты строк в шаблоне, после которых надо пробовать вставлять код скрипта похожих сообщений:

1) <data:post.body/> 
2) <div class='post-footer-line post-footer-line-1'> 
3) <div class='post-footer-line post-footer-line-2'> 
4) <div class='post-footer-line post-footer-line-3'> 
5) <b:include data='post' name='post'/>

У меня после долгих попыток "прошел" только последний вариант...



Перед сохранением шаблона обязательно нажимайте кнопку Просмотреть шаблон. И еще. Создатели сервиса виджетов предупреждают, что, в зависимости от количества сообщений в блоге, виджет может заработать не сразу, а в течение получаса. Так что сразу не паникуйте, какое-то время ждите и обновляйте страницу. 

Желаю удачи!

21 комментарий:

  1. Спасибо))пошла пробовать))

    ОтветитьУдалить
  2. и сразу препятствие-не могу зайти на сайт..пишет-Bad Request (Invalid Hostname)..наверное,не судьба))

    ОтветитьУдалить
  3. Спасибо, всё получилось. Буду надеяться, что сервер надёжный)

    ОтветитьУдалить
  4. Подскажите,пожалуйста.как вставить виджет "Последние комментарии" в блог.Спасибо))

    ОтветитьУдалить
    Ответы
    1. Здравствуйте! Ответила Вам в Google+, т.к. здесь в комментариях не допускает процитировать код гаджета.

      Удалить
  5. Все сделала как вы написали, но что-то не получилось ничего ((

    ОтветитьУдалить
  6. Анонимный29.01.2015, 19:14

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

    ОтветитьУдалить
  7. Два дня пробую, пишет в ожидании... (((

    ОтветитьУдалить
  8. У меня такая же проблема - не мои картинки! Как удалить этот виджет????

    ОтветитьУдалить
  9. Очень прошу помочь!!!! Вышло совсем не хорошо, а блог для детей! Нужно срочно убрать.

    ОтветитьУдалить
  10. Всё!Удалила. Всё было просто, но из-за паники не сразу заметила.

    ОтветитьУдалить
  11. Мария! А я загрузила виджет от Linkwithin. Подскажите, пожалуйста, почему у меня после поста стоит только надпись "You might also like:"? Картинок нет и названий похожих постов нет. Ничего нет. Может потому, что мой пост существует только 20 дней? У меня 7 постов всего. С уважением, Наталья.

    ОтветитьУдалить
  12. Здравствуйте! У меня вот что. http://brightquietness.blogspot.ru/ Посмотрите, пожалуйста.

    ОтветитьУдалить
  13. У меня почему-то через пост отображался этот виджет на главной странице

    ОтветитьУдалить
  14. После первого поста на главной всё равно висит этот виджет.

    ОтветитьУдалить
  15. И в виджете есть ссылка на этот же пост и на черновик. Извините, что написала так много комментариев, просто после каждого обновления что-то новое появляется

    ОтветитьУдалить
    Ответы
    1. Здравствуйте, Мария. У Вас хороший блог, красивые фотографии. Виджет и должен быть после каждого сообщения, в том числе на главной странице, если Вы выбрали вариант вставки для Blogger. Я использовала третий вариант - вставка скрипта в код шаблона Blogger (см. выше).

      Удалить
  16. Спасибо огромное за этот пост! Уже неделю мучаюсь, пытаюсь поставить виджет похожих сообщений, LinkWithin никак не ставится, хотя мне он нравился всегда, потому что сортирует по тегам. А про Engageya написано уже немало, но у меня ничего не выходила, пока не добралась до ваших инструкций! :))) Благодарю за помощь! :)

    ОтветитьУдалить
    Ответы
    1. Очень рада, Ирина, что Вам пригодилась моя статья)))

      Удалить

Загляните и на другие страницы ^