среда, 7 сентября 2011 г.

Интеграция Blogger с Twitter по средствам jQuery

Ну вот и добрался я до следующего шага - добавить кнопочку "Твитнуть". Делаю я это с использованием jQuery. Если хотите без jQuery - то Вам сюда. Если же хотите просто сделать интеграцию, то Вам сюда.
Основная идея состоит в том, что бы кнопка "Твитнуть" загружалась после того, как будет загружен сам блог. 

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

Таким образом надо сделать так, что бы блог сначала загрузился, а уже потом грузились все остальные скрипты. В частности кнопки Твиттера. 

Но JavaScript язык одно поточный - то есть в нём нельзя запустить что то делать в другом потоке. То есть когда начнёт грузиться скрипт Твиттера и он будет не доступен - будет виден эффект зависания. Теоретический.

Однако у меня так и не получилось этого добиться. То есть браузер в профиле писал что ждёт ответа, но при этом я спокойно могу читать блог. Единственное мешает - наличие ссылки "Твитнуть". Но она остаётся доступной и работает! Правда автоматический текст твита не получилось сделать правильным, однако это уже на много лучше!

Ну и на слабом компьютере наблюдается секундное зависание - когда скрипт отрабатывает. Но и это намного лучше, чем было до этого.

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

Итак, сначала нам надо разместить якорь, в который и будет вставляться кнопка Твиттера. Для этого нам надо с генерировать этот самый код якоря:
Укажите параметры кнопки



Демонстрация кнопки

Код якоря:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class='srcsoftTwitterBoxClass' expr:title='data:post.title' expr:url='data:post.url' style='float:right;padding:4px;'/>
</b:if>

Теперь, когда у нас есть текст якоря, необходимо добавить код для обработки этого самого якоря.

Функция для обработки якорей - она превращает якорь в кнопочку:


function AppendTwiterHandler(){  
  var script = document.createElement( 'script' );
  script.type = 'text/javascript';
  script.src = 'http://platform.twitter.com/widgets.js';  
  $('.srcsoftTwitterBoxClass').each(function(i){
   $(this).html('<a href="http://twitter.com/share" class="twitter-share-button" data-url="'+$(this).attr('url')+'" data-text="'+$(this).attr('title')+'" data-count="vertical" data-via="jWarlon" data-lang="ru">Твитнуть</a>');
  });  
  $('.content:last').append(script);
}

И теперь необходимо вызвать эту функцию. Вызов нужно разместить или в конце страницы, перед тегом </body> или как у меня:
$(document).ready(function () {
  AppendTwiterHandler();
});

И последнее  - куда этот код вставлять:

  1. Идём в панель управления в пункт Шаблоны. Справа вверху есть кнопочка - выполняем бекап шаблона.
  2. Теперь открываем на редактирование сам шаблон - жмём Изменить HTML.
  3. Система выдаст нам предупреждение, смысл которого заключается в том, что не нужно вручную менять шаблон, если Вы не продвинутый пользователь. Жмём кнопку приступить.

  4. Найдите в тексте шаблона конструкцию <data:post.body/>

  5. Вставьте Код якоря, выше над этим кодом (на картинке показано где поставлен у меня. Если Вы выбрали вариант размещения под сообщением - то у Вам будет выглядеть по другому). 

  6. Не забудьте добавить вызов функции, которая эти самые якоря обработает. Я говорю про функцию AppendTwiterHandler. Пока её вызова не будет - Вы будете видеть только ссылку с надписью Твитнуть.
  7. И на всякий случай - этот код требует подключение библиотеки jQuery. Как подключить - читай в посте Подключаем jQuery к блогу
Если есть вопросы готов всегда ответить. А если есть ещё и предложения по оптимизации - так я только за! 

Будьте счастливы!

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