Виджет Related Posts by Categories (Похожие статьи по категориям) для Blogger'а

Ещё один виджет из серии “Related Posts”. Этот виджет мне нравится даже больше чем тот, что я описывал в предыдущей статье. Виджет разработан Hoctro, слегка переработан для удобства Джеком и доработан мной для устранения бага, связанного с использованием виджета в Unicode блогах (non-English).

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

Зайдите в Панель инструментов > Макет > Изменить HTML, установите флажок “Расширить шаблоны виджета”, найдите код <p><data:post.body /></p> и вставьте код, представленный ниже, сразу после найденного кода.

<b:if cond='data:blog.pageType == "item"'><br /> <div class='similiar'><br /> <!-- *****************http://hoctro.blogspot.com*****Jan,2007****************** --><br /> <!-- *****************Related Articles by Labels - Take Two****************** --><br /> <br /> <!--<br /> Modified by JackBook.Com to make it easier to use. <br /> 1. Now, users don't need to change anything to use this widget. just copy and paste, and done!<br /> 2. The current article will also be listed, now it's no more.<br /> --><br /> <br /> <!-- Modified by minimusX to fixing problems using in Unicode blogs --><br /> <br /> <div class='widget-content'><br /> <h3>Related Posts by Categories</h3><br /> <div id='data2007'/><br/><br/><br /> <div id='hoctro'><br /> Widget by <u><a href='http://hoctro.blogspot.com'>Hoctro</a></u> | <u><a href='http://www.jackbook.com/' title='Related Posts on Blogger Modified by JackBook.Com. Read More?'>Jack Book</a></u> | <u><a href='http://minimusx.blogspot.com/' title='Related Posts on Blogger Modified by minimusX Read More?'>minimusX</a></u><br /> </div><br /> <script type='text/javascript'><br /> <br /> var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;<br /> var maxNumberOfPostsPerLabel = 4;<br /> var maxNumberOfLabels = 10;<br /> <br /> <b:if cond='data:blog.pageType == "item"'><br /> maxNumberOfPostsPerLabel = 100;<br /> maxNumberOfLabels = 3;<br /> </b:if><br /> <br /> <br /> <br /> function listEntries10(json) {<br /> var ul = document.createElement(&#39;ul&#39;);<br /> var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ? <br /> json.feed.entry.length : maxNumberOfPostsPerLabel;<br /> for (var i = 0; i &lt; maxPosts; i++) {<br /> var entry = json.feed.entry[i];<br /> var alturl;<br /> <br /> for (var k = 0; k &lt; entry.link.length; k++) {<br /> if (entry.link[k].rel == &#39;alternate&#39;) {<br /> alturl = entry.link[k].href;<br /> break;<br /> }<br /> }<br /> var li = document.createElement(&#39;li&#39;);<br /> var a = document.createElement(&#39;a&#39;);<br /> a.href = alturl;<br /> <br /> if(a.href!=location.href) {<br /> var txt = document.createTextNode(entry.title.$t); <br /> a.appendChild(txt);<br /> li.appendChild(a);<br /> ul.appendChild(li); <br /> }<br /> }<br /> for (var l = 0; l &lt; json.feed.link.length; l++) {<br /> if (json.feed.link[l].rel == &#39;alternate&#39;) {<br /> var raw = json.feed.link[l].href;<br /> var label = decodeURI(raw.substr(homeUrl3.length+13));<br /> var k;<br /> for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);<br /> var txt = document.createTextNode(label);<br /> var h = document.createElement(&#39;b&#39;);<br /> h.appendChild(txt);<br /> var div1 = document.createElement(&#39;div&#39;);<br /> div1.appendChild(h);<br /> div1.appendChild(ul);<br /> document.getElementById(&#39;data2007&#39;).appendChild(div1);<br /> }<br /> }<br /> }<br /> function search10(query, label) {<br /> <br /> var script = document.createElement(&#39;script&#39;);<br /> script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;<br /> + label +<br /> &#39;?alt=json-in-script&amp;callback=listEntries10&#39;);<br /> script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);<br /> document.documentElement.firstChild.appendChild(script);<br /> }<br /> <br /> var labelArray = new Array();<br /> var numLabel = 0;<br /> <br /> <b:loop values='data:posts' var='post'><br /> <b:loop values='data:post.labels' var='label'><br /> textLabel = &quot;<data:label.name/>&quot;;<br /> <br /> var test = 0;<br /> for (var i = 0; i &lt; labelArray.length; i++)<br /> if (labelArray[i] == textLabel) test = 1;<br /> if (test == 0) { <br /> labelArray.push(textLabel);<br /> var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ? <br /> labelArray.length : maxNumberOfLabels;<br /> if (numLabel &lt; maxLabels) {<br /> search10(homeUrl3, textLabel);<br /> numLabel++;<br /> }<br /> }<br /> </b:loop><br /> </b:loop><br /> </script><br /> </div><br /> <br /> </div><br /> </b:if><br />

Сохраните шаблон и посмотрите на результат.

Настройки виджета

Две переменные, показанные ниже, позволяют управлять внешним видом и временем загрузки виджета

var maxNumberOfPostsPerLabel = 4; <br /> var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel – количество статей выводимых по каждой категории.

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

P.S. Пока готовил статью к публикации, Hoctro внёс изменения в свой виджет. Изменения фактически идентичны моим, разница лишь в названии функции – результат тот-же.

© minimusX, 2008. При копировании и републикации статьи ссылка на первоисточник обязательна.

»»  читать далее

Виджет Related Posts (“Другие статьи по теме”) для Blogger

Наличие в блоге виджета “другие статьи по теме” (Related Posts) очень сильно влияет на привлечение качественного траффика. Весьма часто читатель, придя на блог и убедившись в полезности прочитанной статьи, ищет дополнительную информацию по интересющей его теме и, не сумев найти, даже если эта информация в блоге имеется, уходит туда, где, как ему кажется, она есть. Поэтому виджет Related Posts весьма востребован в среде блоггеров. Увы, в Blogger’е такой “стандартный” виджет отсутствует, но всё, что нужно для его создания, есть. Приступим …

Виджет, который мы сейчас создадим, использует технологию JSON (подробнее о JSON можно прочитать здесь) и информацию “стандартного” виджета Labels (не того, что показывает все метки (категории) блога, а того, который показывает метки статьи). Для того что бы перейти непосредственно к установке виджета, не обходимо убедиться, что шаблон темы готов к нашим манипуляциям. Зайдите в Панель инструментов > Макет > Элементы страницы и убедитесь, что секция статей блога выглядит так:

В этом случае можно переходить к инструкции по установке. Если же секция статей блога выглядит так:

необходимо внести в шаблон темы некоторые небольшие изменения. Зайдите в Панель инструментов > Макет > Изменить HTML и найдите в коде шаблона следующие строки

<b:section class='main' id='main' showaddelement='no'> <br /> <b:widget id='Blog1' locked='true' title='Сообщения блога' type='Blog'/>

и замените значение параметра showaddelement с no на yes. Теперь эти строки должны выглядеть так:

<b:section class='main' id='main' showaddelement='yes'> <br /> <b:widget id='Blog1' locked='true' title='Сообщения блога' type='Blog'/>

Зайдите на страницу “Добавить элементы страницы” и убедитесь, что секция статей блога выглядит так же, как на первом изображении. Если это так, Вы готовы к установке виджета.

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

Зайдите в Панель инструментов > Макет > Изменить HTML и вставьте код, представленный ниже, в секцию head шаблона (где-нибудь перед закрывающим тегом /head)

<script type="text/javascript"><br /> //<![CDATA[<br /> var relatedTitles = new Array();<br /> var relatedTitlesNum = 0;<br /> var relatedUrls = new Array();<br /> function related_results_labels(json) {<br /> for (var i = 0; i < json.feed.entry.length; i++) {<br /> var entry = json.feed.entry[i];<br /> relatedTitles[relatedTitlesNum] = entry.title.$t;<br /> for (var k = 0; k < entry.link.length; k++) {<br /> if (entry.link[k].rel == 'alternate') {<br /> relatedUrls[relatedTitlesNum] = entry.link[k].href;<br /> relatedTitlesNum++;<br /> break;<br /> }<br /> }<br /> }<br /> }<br /> function removeRelatedDuplicates() {<br /> var tmp = new Array(0);<br /> var tmp2 = new Array(0);<br /> for(var i = 0; i < relatedUrls.length; i++) {<br /> if(!contains(tmp, relatedUrls[i])) {<br /> tmp.length += 1;<br /> tmp[tmp.length - 1] = relatedUrls[i];<br /> tmp2.length += 1;<br /> tmp2[tmp2.length - 1] = relatedTitles[i];<br /> }<br /> }<br /> relatedTitles = tmp2;<br /> relatedUrls = tmp;<br /> }<br /> function contains(a, e) {<br /> for(var j = 0; j < a.length; j++) if (a[j]==e) return true;<br /> return false;<br /> }<br /> function printRelatedLabels() {<br /> var r = Math.floor((relatedTitles.length - 1) * Math.random());<br /> var i = 0;<br /> document.write('<ul>');<br /> while (i < relatedTitles.length && i < 20) {<br /> document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');<br /> if (r < relatedTitles.length - 1) {<br /> r++;<br /> } else {<br /> r = 0;<br /> }<br /> i++;<br /> }<br /> document.write('</ul>');<br /> }<br /> //]]><br /> </script>

Сохраните шаблон. Установите флажок “Расширить шаблоны виджета” и найдите следующий код:

<b:if cond='data:post.labels'><br /> <data:postLabelsLabel/><br /> <b:loop values='data:post.labels' var='label'><br /> <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if><br /> </b:loop><br /> </b:if>

и замените его на следующий:

<b:if cond='data:post.labels'><br /> <data:postLabelsLabel/><br /> <b:loop values='data:post.labels' var='label'><br /> <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if><br /> <b:if cond='data:blog.pageType == "item"'><br /> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10"' type='text/javascript'/><br /> </b:if><br /> </b:loop><br /> </b:if>

Ещё раз сохраните шаблон и перейдите на страницу “Добавить элементы страницы”. В секции “Сообщения блога” добавьте новый HTML/Javascript виджет. В поле “Заголовок” введите что-то вроде “Другие статьи по этой теме:”, а в поле “Содержание” следующий код:

<br /> <script type="text/javascript"><br /> removeRelatedDuplicates();<br /> printRelatedLabels(); <br /> </script>

Сохраните шаблон и вернитесь на страницу “Изменить HTML”. Установите флажок “Расширить шаблоны виджета” и найдите код только что установленного виджета (виджет не обязательно будет называться HTML13, как в примере). Внесите изменения (две строки) как показано ниже:

<b:widget id='HTML13' locked='false' title='Related Posts' type='HTML'><br /> <b:includable id='main'><br /> <b:if cond='data:blog.pageType == "item"'> <!-- Добавьте эту строку --><br /> <!-- only display title if it's non-empty --><br /> <b:if cond='data:title != ""'><br /> <h2 class='title'><data:title/></h2><br /> </b:if><br /> <div class='widget-content'><br /> <data:content/><br /> </div><br /> <b:include name='quickedit'/><br /> </b:if> <!-- И эту --><br /> </b:includable><br /> </b:widget>

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

Если что-то не сложилось, значит Вы что-то пропустили или упустили. У меня всё работает.

© minimusX, 2008. При копировании и републикации статьи ссылка на первоисточник обязательна.

»»  читать далее