Мастер-класс по добавлению виджета "Похожие сообщения" в блог

1/18/2013

    Всем привет! Я решила несколько обновить свой старый МК по добавлению в блог полезного виджет "Похожие сообщение" или как это звучит по-английски "You might also like", т.к. в последнее время его установка старым способом стала вызывать некоторые трудности и этот виджет во многих блогах просто отказывается работать, даже если он там раньше стоял, но по каким-то причинам был удалён.





          В чём же проблема? Просмотрев множество форумов,  я пришла к выводу, что во-первых из-за введённых санкций данный гаджет больше не работает с определёнными шаблонами вашего блога. С самым простым шаблоном работает точно, а вот с остальными - это уж как повезёт.
           А во-вторых, по неизвестной причине (а может, и по той же самой) этот гаджет перестал поддерживать нормальную работу на платформе Blogger, поэтому он просто у вас не устанавливается старыми способами!
         Кроме того, обратите внимание, что данный гаджет можно установить только в блог с общедоступным доступов в ваших настройках. Если у вас блог закрытый или с ограниченным доступов - виджет также работать не будет.


Итак. давайте теперь разбираться.
   

      Я сохраню данные по старому способу установки данного гадета, так как у многих он всё ещё работает, но если у вас возникли какие-либо проблемы - будем вместе искать другие пути.
    Для начала заходим на сайт LinkWithinЗдесь, как вы видите, уже есть слева окошко для заполнения с кнопочкой get widget! Оно-то нам и нужно. 


          Заполняем всю форму, вводим адрес вашей электронной почты, затем адрес блога, куда будет устанавливаться этот виджет. Далее в разделе Platform сначала выбираем строчку Blogger. Если после все последующих манимуляций виджет не установится - возвращайтесь в начало и в этом месте выбирайте Other, т.к. последнее время этот гаджет плохо с блоггером функционирует...


Далее я советую сразу выбирать максимальное число ссылок для виджета (5), для этого идём в Width - 5 stories:


И жмём синюю кнопку Get Widget!


     Далее у вас появляется такое окошко:

       В принципе, вы можете выбрать как показано на примере кнопочку "I don't know..." и ничего не вводить, .а можете для точности эксперимента указать RSS-адрес своего блога. Сделать это достаточно просто. Стандартный RSS-адрес для блоггера выглядит так:

http://***.blogspot.com/feeds/posts/default

       Вместо звёздочек вы просто вставляете адрес своего блога и готовую строчку добавляете в первое окошко.

     Идём далее. Появляется вот такое окошко с пояснением как установить виджет на английском языке. Здесь нажимаем на строчку с ссылкой "Install Widget".


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


       Затем нажимаем "Редактировать содержимое" и в окошке открывается код для вставки в ваш блог. Обратите внимание на вторую строчку в коде - там есть набор циферок - это ваш Id, который нам потом пригодится.



       *** Что делать. если у вас в этом поле пустое окошко и кода не появилось?

          Это возможно в том случае, если вы выбрали вариант с Other,  а не с блоггером. Возвращайтесь обратно к начальному окошку с данными и в строчке Платформа вместо Other и выбирайте Blogger, далее идёте как описано выше, получаете свой код, выделяете его, копируете, потом вновь возвращаетесь в начало, снова в разделе Платформа выбираете раздел Other и в то окошко, где у вас должен был появиться код, вставляете тот, который получили из раздела с блоггером. Далее всё делаете по описанию ниже.


                  В окошке установой виджета нам осталось только нажать кнопу "Добавить виджет" и если вы всё сделали правильно, вас перенаправит на страничку настроек вашего блога.


          Идём в панель управления вашего блога, далее раздел Шаблон, где под первой картинкой с вашим блогом есть кнопочка "Изменить HTML". Перед любым изменением HTML блога я всегда советую вам делать его резервное копирование, чтобы даже если вы где-то с кодом и напортачите, потом можно было бы спокойно всё вернуть в исходное состояние. 
           
Как сохранить резервную копию блога

1. Идём в Шаблон



2. Нажимаем кнопку "Резервное копирование и восстановление" 


3. Загрузить шаблон полностью


4. Выбираем папку на компьютере, куда сохранить.


 5. Если нам понадобиться восстановить шаблон блога, идём туда же, но уже нажимаем кнопку "Выберете файл" и выбираем тот файлик, которые сохранили в ходе предыдущих действий.



         Что ж, копию сохранили, а дальше в окошке Изменить HTML кликаем по окошку с кодом в любом месте левой кнопкой мыши, чтобы он стал активным, зажимаем на клавиатуре кнопки Ctrl+F и в появившееся окошко поиска вводим строчку <div class='post-footer'>. Фрагмент выделится жёлтым.



        Если ничего не произошло, значит у вас не все строчки кода открыты. Для этого примерно начиная с 1200 строчки кода нажмите на все чёрные стрелочки рядом с циферками, чтобы открыть закрытые строчки кода, и попробуйте заново.



     Жёлтую строчку нашли, а теперь перед этой строчкой вставляем вот этот фрагмент, прямо весь, копируем и вставляем:

<b:if cond='data:blog.pageType == "item"'>
<script>
var linkwithin_site_id = полученный ID ;
(function () {
var elem = document.createElement('script');
elem.type = 'text/javascript';
elem.src = 'http://www.linkwithin.com/widget.js?rand=' + Math.random();
document.getElementsByTagName('head')[0].appendChild(elem);
})();
</script>
<a href="http://www.linkwithin.com/" rel="nofollow"><img
src="http://www.linkwithin.com/pixel.png" alt="Blog Widget by LinkWithin"
style="border: 0" /></a></b:if>

    Вместо "полученный ID", как вы уже догадались, вносим ваш ID, который есть во второй строчке кода, который вы получили программой LinkWithin

    Теперь почти всё) Теперь нажимаем оранжевую кнопку "Сохранить шаблон". Далее идём в раздел Дизайн, нажимаем на боковой панельке кнопочку "Добавить гаджет" и выбираем среди основных гаджетов HTML/JavaScript. Поле с названием оставляем пустым, а в само окошко Содержание копируем весь фрагмент кода, данного вам программой.



    Жмём сохранить. Находим новый появившийся гаджет на боковой панельке (будет самым первым), зажимаем его левой кнопкой мыши и перетаскиваем этот виджет с боковушки под сообщения в центре блога всё в том же разделе дизайн.


    Жмём оранжевую кнопу "Сохранить расположение" и идём смотреть блог, всё ли у нас установилось)

          Если у вас по каким-либо причинам что-то не сработало - удаляйте все изменения в шаблоне и в дизайне блога и переустанавливайте гаджет заново. Не помогло - значит, скорее всего ваш шаблон блога не поддерживается этим гаджетом или идёт с сним в конфликт. В этом случае обращайтесь в тех. поддержку, потому что это беда сейчас что с этим гаджетом твориться! Тех. поддержка находится во вкладе Support:


        Там всё просто - вводите адрес почты и ссылку на блог и далее выбираете тот вариант, который вам подходит. Не подходит ни одни - пишете в комментарии сообщение.

Надеюсь, мне удалось вам помочь!

12 комментариев:

  1. Большое спасибо! Где-то в конце у меня сделалось немного по-другому, но, главное - сделалось! Целую, спасибо:)

    ОтветитьУдалить
  2. Большое спасибо за прекрасное объяснение! У меня все получилось!

    ОтветитьУдалить
  3. Марина, спасибо! Все получилось)

    ОтветитьУдалить
  4. Мариночка, у меня все получилось сделать кроме LinkWithin. Несколько раз пыталась и ничего. Вариант сделать через тех.поддержку - ответ "500 Internal Server Error

    The server encountered an unexpected condition which prevented it from fulfilling the request."
    Может где-то я делаю ошибку? Кто-то подскажет? Спасибо!

    ОтветитьУдалить
    Ответы
    1. Олёна - этот гаджет в последнее время очень сильно глючит, но как правило ему нужно какое-то время. чтобы он заработал, т.е. сразу он может и не появиться. Ещё он поддерживает не все шаблоны в блоггере, возможно поэтому у вас что-то не получилось. Хотя, если эт ваш блог: http://tabithaworkshop.blogspot.ru/ то у вас гаджет работает.
      Мне самой интересно, по какому варианту из описанного вы действовали?)
      P.S.: поддержка у них давно уже не работает, что лишний раз подтвержает, что этим гаджетом не занимаются...

      Удалить
  5. Марина, все получилось в этого сайта сразу. Хорошо, что про резервную копию упомянула)) а то я еще вторым путём пошла пробовать и этот гаджет исчез((( Вернула прежнюю версию - работает.

    ОтветитьУдалить
    Ответы
    1. Ага, отлично! У них то так, то по-другому. Хорошо, что работает)

      Удалить

Thank you for your comments!))
Я так рада вашим комментариям!)))

Дизайн блога Marina Syskova