вторник, 3 мая 2011 г.

Добавляем LikeBox от Facebook в конец сообщения Blogger



У меня в блоге в конце каждого сообщения находится блок от FaceBook - так называемый ЛайкБокс. Если хотите добавить себе такой же, то Вам сюда.

Итак, что бы добавить такой Лайкбокс к себе на в блог, выполните следующие действия:


  1. В панели управления идём в меню "Дизайн" и там выбираем пункт "Изменить HTML".
  2. Делаем резервную копию текущего шаблона. Для этого выбираем пункт "Загрузить весь шаблон". Называем файл удобным именем. Лично я в качестве имени файла выбираю такой шаблон [имя блога]-template-[ddMMyyyyHHmm].xml. Например sedegoff-template-200420110859.xml
  3. Укажите размер блока LikeBox в пикселях:
    Размер блока должен быть более 400 и менее 600 пикселей.
  4. Адрес страницы на facebook (Вашего профиля или страницы на facebook)
    Внимание! В качестве примера указан мой адрес!
  5. Язык
    Примечание: Картинки доступны только на русском и английском языке. Если у Вас есть и для других языков - сообщите мне пожалуйста, я добавлю в мастер.
  6. Где отображать блок
  7. Размер колонки с текстом:
    Это нужно для того, что бы разместить блок по центру. Если Вам не нужно его центровать, просто сотрите значение и оставьте поле пустым. Как узнать размер текстовой области? В Google Chrome щёлкаем правой кнопкой мыши на заголовке и выбираем в меню пункт "Просмотр кода элемента" В результате под заголовком будет жёлтенький блок с размером, например 626*27 у меня. Это и есть размер.
  8. Демонстрация
  9. Теперь идём в меню "Дизайн", пункт "Изменить HTML". Ставим галочку "Расширить шаблоны виджета"
  10. Ищем в тексте шаблона конструкцию вида ]]></b:skin> и перед ней вставляем код:
    .fb_like_box {
    margin-top:10px;
    -moz-border-radius:10px 10px 10px 10px;
    border-radius:10px;
    background-color:#3B5999;
    border:3px solid #2B2B2B;
    margin-bottom:10px;
    padding:10px 7px;
    width:500px;
    }
    .fb_like_top {
    overflow:visible;
    padding:0;margin:0 0 5px;
    width:349px;
    height:24px;
    background:url("http://srcsoft-spoiler.googlecode.com/files/fblogo1_ru.jpg") no-repeat scroll left top transparent;
    }.fb_like_top a {
    height:24px;
    width:114px;
    background:url("http://srcsoft-spoiler.googlecode.com/files/beafan_ru.jpg") no-repeat scroll left top transparent;
    display:block;
    margin-left:365px;
    text-indent:-5000px;
    }
    .fb_like_button_holder {
    -moz-border-radius:10px 10px 10px 10px;
    border-radius:10px;
    background:none repeat scroll 0 0 #FFFFFF;
    padding:12px 12px 0 12px;
    width:455px;
    height:42px;
    }

  11. Теперь ищите конструкцию вида <data:post.body/> и перед ней вставляете код:
    <b:if cond='data:blog.pageType == &quot;item&quot;'><div style="float:left; margin-left: 63px;">
    <div class='fb_like_box'>
    <div class='fb_like_top'><a href='http://www.facebook.com/pages/Warlon-blog/126957277377766' target='_new' title='Мне нравится' rel='nofollow'>Мне нравится</a></div>
    <div class='fb_like_button_holder'>
    <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;locale=ru_RU&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px;height:30px;'/>
    </div>
    </div>
    </div>
    </b:if>
  12. Сохраните шаблон

Приведённый код создан на основании кода, взятого с http://www.bloggerplugins.org


Смотри еще вариант интеграции с facebook:
  1. Делаем кнопку Facebook Опубликовать для Blogger
  2. Добавляем LikeBox от Facebook в конец сообщения Blogger

Комментариев нет: