Блоговод | Виджет Most Related Posts (Очень похожие статьи) для Blogger

Виджет Most Related Posts (Очень похожие статьи) для Blogger

Некоторое время назад я опубликовал обзор виджета “Related Posts”. Виджет неплохой, но, как водится, не всё в нём меня устраивало. А именно:

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

В общем, как говорится, “если хочешь, что бы всё было “как надо” – сделай сам”. Я решил последовать этому совету и, вот, что у меня получилось:

виджет Most Related Posts базируется на библиотеке JSON от Google и, следовательно, расположен на одном из самых быстрых серверов в мире
выдача ссылок в список осуществляется по индексу соответствия на базе меток (тегов, labels): чем больше совпадающих меток, тем выше индекс соответствия, тем выше ссылка в списке
ссылка на текущую статью не выводится (не пользуйтесь кавычками в названиях постов – этот глюк RSS может привести к выдаче ссылки на текущую статью в список)
виджет устанавливается “одним кликом” (copy-paste)

Инструкция по установке

Скопируйте приведённый ниже код и вставьте его в шаблон темы непосредственно после кода <data:post.body/>. Если же Вы пользуетесь Fullpost, то после кода

<data:post.body />
<b:if cond="data:blog.pageType != "item"">
	<a expr:href="data:post.url">Read more!</a>
</b:if>

<data:post.body />

<b:if cond="data:blog.pageType != "item"">

</b:if>

Код виджета:

<!-- Most Related Posts by minimus  START -->
<div><b:if cond='data:blog.pageType == "item"'>
  <div class='widget-content'>
    <h3>Most Related Posts</h3>  
 
    <script type="text/javascript" src="//www.google.com/jsapi"></script>
    <script type='text/javascript'>
    google.load("feeds", "1");  
 
    function initialize() {
      var aLabels = new Array();
      var sLabel = "";
      var postTitle = "";  
 
      <b:loop values='data:posts' var='post'>
        <b:loop values='data:post.labels' var='label'>
          sLabel = "<data:label.name/>";
          aLabels.push(sLabel);
        </b:loop>
        postTitle = "<data:post.title/>"
      </b:loop>  
 
      var num = 100; // глубина сканирования
      var maxList = 5; //максимальное количество постов в списке  
 
      var feed = new google.feeds.Feed("YOUR_FEED_URL");
      var maxRelIndex = 0;  
 
      feed.setNumEntries(num);
      feed.load(function(result) {
        if (!result.error) {
          var aTitles = new Array();
          var aHRefs = new Array();
          var aRelIndex = new Array();  
 
          var relIndex = 0;  
 
          var container = document.getElementById("mx-mrp");
          var divFooter = document.createElement("div");
          var aFooter = document.createElement("a");
          var ul = document.createElement("ul");
          divFooter.style.fontSize = "x-small";
          aFooter.appendChild(document.createTextNode("minimusX"));
          aFooter.href = "//minimusx.blogspot.com";
          divFooter.appendChild(document.createTextNode("Most Related Posts Widget by "));
          divFooter.appendChild(aFooter);
          for (var i = 0; i < result.feed.entries.length; i++) {
            var entry = result.feed.entries[i];
            relIndex = 0;
            if (entry.title != postTitle){
              for (var j = 0; j < entry.categories.length; j++){
                for (var k = 0; k < aLabels.length; k++){
                  if (entry.categories[j] == aLabels[k]){
                    relIndex++;
                  }
                }
              }
              if (relIndex != 0){
                aTitles.push(entry.title);
                aHRefs.push(entry.link);
                aRelIndex.push(relIndex);
                if (maxRelIndex < relIndex){
                  maxRelIndex = relIndex;
                }
              }
            }
          }
          var numList = 0;
          for (var i = maxRelIndex; i > 0; i--){
            for (var j = 0; j < aRelIndex.length; j++){
              if (aRelIndex[j] == i){
                var br = document.createElement("br");
                var a = document.createElement("a");
                var il = document.createElement("il");
                a.appendChild(document.createTextNode(aTitles[j]));
                a.href = aHRefs[j];
                il.appendChild(a);
                ul.appendChild(il);
                ul.appendChild(br);
                numList++;
              }
              if (numList >= maxList){ break; }
            }
            if (numList >= maxList){ break; }
          }
          container.appendChild(ul);
          container.appendChild(divFooter);
        }
      });
    }
    google.setOnLoadCallback(initialize);
    </script>
    <div id='mx-mrp'></div>
  </div>
</b:if></div>
<!-- Most Related Posts by minimus  END -->

<h3>Most Related Posts</h3>

google.load("feeds", "1");

function initialize() {

var aLabels = new Array();

var sLabel = "";

var postTitle = "";

<b:loop values='data:posts' var='post'>

<b:loop values='data:post.labels' var='label'>

sLabel = "<data:label.name/>";

aLabels.push(sLabel);

</b:loop>

postTitle = "<data:post.title/>"

</b:loop>

var num = 100; // глубина сканирования

var maxList = 5; //максимальное количество постов в списке

var feed = new google.feeds.Feed("YOUR_FEED_URL");

var maxRelIndex = 0;

feed.setNumEntries(num);

feed.load(function(result) {

if (!result.error) {

var aTitles = new Array();

var aHRefs = new Array();

var aRelIndex = new Array();

var relIndex = 0;

var container = document.getElementById("mx-mrp");

var divFooter = document.createElement("div");

var aFooter = document.createElement("a");

var ul = document.createElement("ul");

divFooter.style.fontSize = "x-small";

aFooter.appendChild(document.createTextNode("minimusX"));

aFooter.href = "//minimusx.blogspot.com";

divFooter.appendChild(document.createTextNode("Most Related Posts Widget by "));

divFooter.appendChild(aFooter);

for (var i = 0; i < result.feed.entries.length; i++) {

var entry = result.feed.entries[i];

relIndex = 0;

if (entry.title != postTitle){

for (var j = 0; j < entry.categories.length; j++){

for (var k = 0; k < aLabels.length; k++){

if (entry.categories[j] == aLabels[k]){

relIndex++;

}

if (relIndex != 0){

aTitles.push(entry.title);

aHRefs.push(entry.link);

aRelIndex.push(relIndex);

if (maxRelIndex < relIndex){

maxRelIndex = relIndex;

}

var numList = 0;

for (var i = maxRelIndex; i > 0; i--){

for (var j = 0; j < aRelIndex.length; j++){

if (aRelIndex[j] == i){

var br = document.createElement("br");

var a = document.createElement("a");

var il = document.createElement("il");

a.appendChild(document.createTextNode(aTitles[j]));

a.href = aHRefs[j];

il.appendChild(a);

ul.appendChild(il);

ul.appendChild(br);

numList++;

}

if (numList >= maxList){ break; }

}

if (numList >= maxList){ break; }

}

container.appendChild(ul);

container.appendChild(divFooter);

}

});

}

google.setOnLoadCallback(initialize);

</script>

</div>

</b:if></div>

Виджет настроен на сканирование последних 100 статей (var num = 100;) и вывода в список 5-ти ссылок (var maxList = 5;) на похожие статьи. Не забудьте изменить строку YOUR_FEED_URL на url feed’а Вашего блога.

Похожие статьи:

21.09.2008 / Blogger, Виджеты (Blogger), Мои проекты / Метки: Blogger, виджет

Поделитесь статьёй

Об авторе

minimus

Lead Frontend Developer (ReactJS, NodeJS)

[title element="h4"] Комментарии (22) [/title]

Melnar Tilromen – 09.11.2008 - 00:01:

ответ

“Не удалось проанализировать ваш шаблон, так как он неправильно сформирован. Убедитесь, что все элементы XML правильно закрыты.
Сообщение об ошибке в XML: The content of elements must consist of well-formed character data or markup.”
minimus – 11.11.2008 - 21:29:

ответ

2 Melnar Tilromen:
Это, я так понимаю, сообщение редактора шаблона при попытке сохранить оный. Ошибка связана с тем, что Blogger не совсем правильно анализирует шаблон, а именно: javascript. Замените все знаки “больше” и меньше, а также двойные кавычки на &_gt; &_lt; и &_quot; соответственно (уберите знак подчёркивания после амперсанда). Я сейчас пишу online конвертер под это дело, осталось немного …
Anonymous – 13.11.2008 - 07:40:

ответ

повозиться с кодом пришлось как следует, но результат отличный! спасибо!
Karina – 03.10.2009 - 11:06:

ответ

Здравствуйте, Вот я столкнулась с такой же проблемой как Melnar Tilromen.

А есть ли более быстрый способ исправить эту ошибку, чем убирать все знаки <> и двойные кавычки?
Может быть у Вас уже готов “оnline конвертер под это дело”?
А может быть есть уже исправленный шаблон? (Чтобы не возиться так долго с кодом )
Karina – 03.10.2009 - 11:14:

ответ

“Уберите знак подчёркивания после амперсанда” – знак подчеркивания заменить на пробел или убрать вовсе?
Алексей – 02.02.2010 - 16:15:

ответ

Что-то ничего не работает :(((
- minimus – 02.02.2010 - 18:21:
  
  ответ
  
  Как именно не работает?
Алексей – 02.02.2010 - 18:58:

ответ

Вообще ни как //kobarb.blogspot.com/
<!– Most Related Posts by minimus START –>
<div class=’toppost’ id=’toppost1′>
<b:if cond=’data:blog.pageType == "item"’>
<div class=’widget-content’>
<h3>Most Related Posts</h3>
<script type=’text/javascript’>
google.load("feeds", "1");
function initialize() {
var aLabels = new Array();
var sLabel = "";
var postTitle = "";

<b:loop values=’data:posts’ var=’post’>
<b:loop values=’data:post.labels’ var=’label’>
sLabel = "<data:label.name/>";
aLabels.push(sLabel);
</b:loop>
postTitle = "<data:post.title/>";
</b:loop>

var num = 100; // глубина сканирования
var maxList = 5; //максимальное количество постов в списке

var feed = new google.feeds.Feed("//kobarb.blogspot.com/");
var maxRelIndex = 0;

feed.setNumEntries(num);
feed.load(function(result) {
if (!result.error) {
var aTitles = new Array();
var aHRefs = new Array();
var aRelIndex = new Array();

var relIndex = 0;

var container = document.getElementById("mx-mrp");
var divFooter = document.createElement("div");
var aFooter = document.createElement("a");
var ul = document.createElement("ul");
divFooter.style.fontSize = "x-small";
aFooter.appendChild(document.createTextNode("minimusX"));
aFooter.href = "//blogcoding.ru/";
divFooter.appendChild(document.createTextNode("Most Related Posts Widget by"));
divFooter.appendChild(aFooter);
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
relIndex = 0;
if (entry.title != postTitle){
for (var j = 0; j < entry.categories.length; j++){
for (var k = 0; k < aLabels.length; k++){
if (entry.categories[j] == aLabels[k]){
relIndex++;
}
}
}
if (relIndex != 0){
aTitles.push(entry.title);
aHRefs.push(entry.link);
aRelIndex.push(relIndex);
if (maxRelIndex < relIndex){
maxRelIndex = relIndex;
}
}
}
}
var numList = 0;
for (var i = maxRelIndex; i &qt; 0; i–){
for (var j = 0; j < aRelIndex.length; j++){
if (aRelIndex[j] == i){
var br = document.createElement("br");
var a = document.createElement("a");
var il = document.createElement("il");
a.appendChild(document.createTextNode(aTitles[j]));
a.href = aHRefs[j];
il.appendChild(a);
ul.appendChild(il);
ul.appendChild(br);
numList++;
}
if (numList &qt;= maxList){ break; }
}
if (numList &qt;= maxList){ break; }
}
container.appendChild(ul);
container.appendChild(divFooter);
}
});
}
google.setOnLoadCallback(initialize);
</script>
<div id=’mx-mrp’></div>
</div>
</b:if></div>
<!– Most Related Posts by minimus END –>
- minimus – 02.02.2010 - 20:42:
  
  ответ
  
  JavaScript
  
  var feed = new google.feeds.Feed("//kobarb.blogspot.com/");
  
  1
  
  var feed = new google.feeds.Feed("//kobarb.blogspot.com/");
  
  Это НЕ URL фида, эта строка с URL фида должна выглядеть так:
  
  JavaScript
  
  var feed = new google.feeds.Feed("//kobarb.blogspot.com/feeds/posts/default");
  
  1
  
  var feed = new google.feeds.Feed("//kobarb.blogspot.com/feeds/posts/default");
  - Алексей – 03.02.2010 - 11:36:
    
    ответ
    
    Да я пробовал и так и так, но реакции ноль
Алексей – 03.02.2010 - 15:33:

ответ

Нашел ошибку короче

А у вас ошибка здесь
var il = document.createElement(“il”);
Правильнее будет var il = document.createElement(“li”);
- minimus – 03.02.2010 - 17:59:
  
  ответ
  
  Oops! Поскольку всё работало – это опечатка. Извиняюсь за причинённые неудобства …
G-man – 16.04.2010 - 13:53:

ответ

Очень хотел сделать себе “похожие записи”, но сколько ни мучался код не принимается. Умоляю, помогите!
Вот текст ошибки: Open quote is expected for attribute “{1}” associated with an element type “type”.
А вот сам код:
<!– Начало кода для вывода похожих записей –>
<div><b:if cond=’data:blog.pageType == "item"’>
<div class=’widget-content’>
<br/><br/><h3>Most Related Posts</h3>
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type=’text/javascript’>
google.load("feeds", "1");
function initialize() {
var aLabels = new Array();
var sLabel = "";
var postTitle = "";
<b:loop values=’data:posts’ var=’post’>
<b:loop values=’data:post.labels’ var=’label’>
sLabel = "<data:label.name/>";
aLabels.push(sLabel);
</b:loop>
postTitle = "<data:post.title/>"
</b:loop>
var num = 100; // глубина сканирования
var maxList = 5; //максимальное количество постов в списке
var feed = new google.feeds.Feed("//gladpage.blogspot.com/feeds/posts/default");
var maxRelIndex = 0;
feed.setNumEntries(num);
feed.load(function(result) {
if (!result.error) {
var aTitles = new Array();
var aHRefs = new Array();
var aRelIndex = new Array();
var relIndex = 0;
var container = document.getElementById("mx-mrp");
var divFooter = document.createElement("div");
var aFooter = document.createElement("a");
var ul = document.createElement("ul");
divFooter.style.fontSize = "x-small";
aFooter.appendChild(document.createTextNode("minimusX"));
aFooter.href = "//blogcoding.ru/";
divFooter.appendChild(document.createTextNode("Most Related Posts Widget by "));
divFooter.appendChild(aFooter);
for (var i = 0; i &lt result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
relIndex = 0;
if (entry.title != postTitle){
for (var j = 0; j &lt entry.categories.length; j++){
for (var k = 0; k &lt aLabels.length; k++){
if (entry.categories[j] == aLabels[k]){
relIndex++;
}
}
}
if (relIndex != 0){
aTitles.push(entry.title);
aHRefs.push(entry.link);
aRelIndex.push(relIndex);
if (maxRelIndex &lt relIndex){
maxRelIndex = relIndex;
}
}
}
}
var numList = 0;
for (var i = maxRelIndex; i &gt 0; i–){
for (var j = 0; j &lt aRelIndex.length; j++){
if (aRelIndex[j] == i){
var br = document.createElement("br");
var a = document.createElement("a");
var il = document.createElement("li");
a.appendChild(document.createTextNode(aTitles[j]));
a.href = aHRefs[j];
il.appendChild(a);
ul.appendChild(il);
ul.appendChild(br);
numList++;
}
if (numList &gt= maxList){ break; }
}
if (numList &gt= maxList){ break; }
}
container.appendChild(ul);
container.appendChild(divFooter);
}
});
}
google.setOnLoadCallback(initialize);
</script>
<div id=’mx-mrp’></div>
</div>
</b:if></div>

<!– Most Related Posts by minimus END –>
Индустриальный Эльф – 06.07.2010 - 21:12:

ответ

не работает все символы перевел в кодовые названия этих символов, вставил там где надо урл своего фида. но похожие посты не отображает, или он старые не индексирует, а будет работать только при добавлении новых постов?
вот код посмотрите пожалуста…

<!– Most Related Posts by minimus START –>
<div><b:if cond='data:blog.pageType == "item"'>
<div class='widget-content'>
<br/><br/><h3>Most Related Posts</h3>

<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type='text/javascript'>
google.load("feeds", "1");

function initialize() {
var aLabels = new Array();
var sLabel = "";
var postTitle = "";

<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
sLabel = "<data:label.name/>";
aLabels.push(sLabel);
</b:loop>
postTitle = "<data:post.title/>"
</b:loop>

var num = 100; // глубина сканирования
var maxList = 5; //максимальное количество постов в списке

var feed = new google.feeds.Feed("//i-elf.blogspot.com/feeds/posts/default");
var maxRelIndex = 0;

feed.setNumEntries(num);
feed.load(function(result) {
if (!result.error) {
var aTitles = new Array();
var aHRefs = new Array();
var aRelIndex = new Array();

var relIndex = 0;

var container = document.getElementById("mx-mrp");
var divFooter = document.createElement("div");
var aFooter = document.createElement("a");
var ul = document.createElement("ul");
divFooter.style.fontSize = "x-small";
aFooter.appendChild(document.createTextNode("minimusX"));
aFooter.href = "//blogcoding.ru/";
divFooter.appendChild(document.createTextNode("Most Related Posts Widget by "));
divFooter.appendChild(aFooter);
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
relIndex = 0;
if (entry.title != postTitle){
for (var j = 0; j < entry.categories.length; j++){
for (var k = 0; k < aLabels.length; k++){
if (entry.categories[j] == aLabels[k]){
relIndex++;
}
}
}
if (relIndex != 0){
aTitles.push(entry.title);
aHRefs.push(entry.link);
aRelIndex.push(relIndex);
if (maxRelIndex < relIndex){
maxRelIndex = relIndex;
}
}
}
}
var numList = 0;
for (var i = maxRelIndex; i > 0; i–){
for (var j = 0; j < aRelIndex.length; j++){
if (aRelIndex[j] == i){
var br = document.createElement("br");
var a = document.createElement("a");
var il = document.createElement("li");
a.appendChild(document.createTextNode(aTitles[j]));
a.href = aHRefs[j];
il.appendChild(a);
ul.appendChild(il);
ul.appendChild(br);
numList++;
}
if (numList >= maxList){ break; }
}
if (numList >= maxList){ break; }
}
container.appendChild(ul);
container.appendChild(divFooter);
}
});
}
google.setOnLoadCallback(initialize);
</script>
<div id='mx-mrp'></div>
</div>
</b:if></div>
<!– Most Related Posts by minimus END –>
- minimus – 13.07.2010 - 18:52:
  
  ответ
  
  Вроде всё Ok …
  Собирался написать новую версию … Если интересует – подождите.
Michael de`Oz – 04.01.2011 - 14:16:

ответ

Вот люди постарались, сделали виджет googlecode.com – но у меня всё равно не работает. Использую linkwithin.com
- Настройки кода – 19.07.2012 - 16:03:
  
  ответ
  
  Добрый день. У меня кроме текста “Похожие статьи” ничего не отображается. Почему так? Вот код:
  <!– Most Related Posts by minimus START –>
  <div><b:if cond='data:blog.pageType == "item"'>
  <div class='widget-content'>
      <h3>Похожие статьи</h3>
      <script type="text/javascript" src="//www.google.com/jsapi"></script>
      <script type='text/javascript'>
      google.load("feeds", "1");
      function initialize() {
        var aLabels = new Array();
        var sLabel = "";
        var postTitle = "";
        <b:loop values='data:posts' var='post'>
          <b:loop values='data:post.labels' var='label'>
            sLabel = "<data:label.name/>";
            aLabels.push(sLabel);
          </b:loop>
          postTitle = "<data:post.title/>"
        </b:loop>
        var num = 100; // глубина сканирования
        var maxList = 5; //максимальное количество постов в списке
        var feed = new google.feeds.Feed("//methodicinfo.blogspot.com/feeds/posts/default");
        var maxRelIndex = 0;
        feed.setNumEntries(num);
        feed.load(function(result) {
          if (!result.error) {
            var aTitles = new Array();
            var aHRefs = new Array();
            var aRelIndex = new Array();
            var relIndex = 0;
            var container = document.getElementById("mx-mrp");
            var divFooter = document.createElement("div");
            var aFooter = document.createElement("a");
            var ul = document.createElement("ul");
            divFooter.style.fontSize = "x-small";
            aFooter.appendChild(document.createTextNode("minimusX"));
            aFooter.href = "//minimusx.blogspot.com";
            divFooter.appendChild(document.createTextNode("Похожие статьи"));
            divFooter.appendChild(aFooter);
            for (var i = 0; i < result.feed.entries.length; i++) {
              var entry = result.feed.entries[i];
              relIndex = 0;
              if (entry.title != postTitle){
                for (var j = 0; j < entry.categories.length; j++){
                  for (var k = 0; k < aLabels.length; k++){
                    if (entry.categories[j] == aLabels[k]){
                      relIndex++;
                    }
                  }
                }
                if (relIndex != 0){
                  aTitles.push(entry.title);
                  aHRefs.push(entry.link);
                  aRelIndex.push(relIndex);
                  if (maxRelIndex < relIndex){
                    maxRelIndex = relIndex;
                  }
                }
              }
            }
            var numList = 0;
            for (var i = maxRelIndex; i > 0; i–){
              for (var j = 0; j < aRelIndex.length; j++){
                if (aRelIndex[j] == i){
                  var br = document.createElement("br");
                  var a = document.createElement("a");
                  var il = document.createElement("li");
                  a.appendChild(document.createTextNode(aTitles[j]));
                  a.href = aHRefs[j];
                  il.appendChild(a);
                  ul.appendChild(il);
                  ul.appendChild(br);
                  numList++;
                }
                if (numList >= maxList){ break; }
              }
              if (numList >= maxList){ break; }
            }
            container.appendChild(ul);
            container.appendChild(divFooter);
          }
        });
      }
      google.setOnLoadCallback(initialize);
      </script>
      <div id='mx-mrp'></div>
  </div>
  </b:if></div>
  <!– Most Related Posts by minimus END –>
Tatiana – 04.01.2012 - 20:53:

ответ

Кажется, сейчас изменились шаблоны и такого кода, как Вы указали (после которого нужно вставить Ваш код), больше нет. Как теперь быть? Хочется такой виджет использовать…
Виджет с гуглокода у меня тоже не захотел работать: то есть при любых настройках он почему-то показывает последние посты, а не похожие.
Дмитрий – 04.01.2012 - 23:30:

ответ

Подскажите а online конвертер готов или нет?
- minimus – 09.01.2012 - 11:44:
  
  ответ
  
  Как нехорошо получилось – обещал, но не сделал. Спасибо за напоминание! Уже готов!
Bill – 11.01.2014 - 04:15:

ответ

не работает, при всех ухищрениях, пора удалять статью, или допиливать