Гаджет Популярные посты от Google Friend Connect

Как известно, Google Friend Connect может предоставить вам не только гаджет «постоянные читатели», который показывает аудиторию (сообщество) вашего сайта. Это далеко не все на что способен сервис. Давайте посмотрим как с помощью Google Friend Connect сделать, например, гаджет «популярные (рекомендованные) посты».

Вначале несколько слов о том как это работает. Принцип простой — те посты за которые голосуют люди и являются самыми популярными, что логично. Поэтому нам придется сделать сам гаджет, а так же инструмент для голосования, чтобы читатель мог определять эти сами популярные посты.

Ну, а теперь, давайте браться за дело:

1) Заходим в свой аккаунт Google Friend Connect. Если сервис все еще не активирован, это нужно сделать:

2) На панели слева выбираем «Гаджеты» (Gadgets), находим гаджет «Рекомендации» (Recomendation):

3) Нажимаем на заголовок или ссылку «получить гаджет» чтобы перейти к его настройке:
4) Настроить необходимо две вещи — внешний вид гаджета, его ширину, стиль и т.д:

и кнопку «рекомендовать» которая будет располагаться после поста:

5) После того как вы определись с внешнем видом этих элементов, нажимаем кнопку «генерировать код», в результате чего вы получите два кода — непосредственно самого гаджета и кнопки «рекомендовать».

6) Расположите гаджет «популярные посты» там где считаете нужным. Для этого скопируйте полученный код гаджета и вставьте его в HTML/JavaScript элемент.

7) Теперь нам осталось разместить кнопку «рекомендовать». Самое логичное для нее место — после поста. Если вы давно и упорно кастомизируете свой шаблон, у вас наверняка там уже что-то располагается — кнопки социальных сервисов, блог «голосования» или призыв подписываться на RSS. В этом случае главное проследить чтобы не возникло никаких конфликтов.

Заходим «Дизайн» — «Изменить HTML», ставим галку «Расширить шаблон виджета», находим фрагмент кода:

<data:post.body/>

Вставляем после него:

<b:if cond =  'data:blog.pageType == &quot;item&quot;'>
<!-- Here is where to paste the JavaScript for the button -->
</b:if>

(Благодаря этому условию кнопки не будут отражаться на главной страницы)
Возвращаемся на Google Friend Connect, берем сгенерированный для кнопки код и вставляем его в середину вышеуказанного кода (вместо <!— Here is where to paste the JavaScript for the button —>).
В результате должен получиться код следующего вида:

<b:if cond = 'data:blog.pageType ==  &quot;item&quot;'>
<!-- Include the Google Friend Connect javascript library. -->
<script type="text/javascript"  src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-1020104213976883876"  style="width:100%;"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
skin['HEIGHT'] = '21';
skin['BUTTON_STYLE'] = 'compact';
skin['BUTTON_TEXT'] = 'Recommend it!';
skin['BUTTON_ICON'] = 'heart';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html  and canvas.html */);
google.friendconnect.container.renderOpenSocialGadget(
{ id: 'div-1020104213976883876',
url:'http://www.google.com/friendconnect/gadgets/recommended_pages.xml',
height: 21,
site: '06135972569882299778',
'view-params':{"pageUrl":location.href,"pageTitle":(document.title  ? document.title :  location.href),"docId":"recommendedPages"}
},
skin);
</script>
</b:if> 

8) Если у вас уже было что-то ранее расположено в секции <data:post.body/>, вы вольны располагать кнопку «рекомендовать» до или после тех элементов которые у вас уже имеются, в зависимости от вашего дизайна и предпочтений.

После установки, рекомендованные пользователями публикации, появятся в гаджете не сразу. Вначале кто-то должен проголосовать, поэтому «популярные посты» будут «наполняться» постепенно. Удачной вам модернизации!