Ну вот и добрался я до следующего шага - добавить кнопочку "Твитнуть". Делаю я это с использованием jQuery. Если хотите без jQuery - то Вам сюда. Если же хотите просто сделать интеграцию, то Вам сюда.
Основная идея состоит в том, что бы кнопка "Твитнуть" загружалась после того, как будет загружен сам блог.
Проблема была в том, что если сайт Твиттера не доступен, то блог выглядел ужасно. Точнее его загрузка была долгой и пока скрипт не погрузился, пользователь видел белый лист.
Таким образом надо сделать так, что бы блог сначала загрузился, а уже потом грузились все остальные скрипты. В частности кнопки Твиттера.
Но JavaScript язык одно поточный - то есть в нём нельзя запустить что то делать в другом потоке. То есть когда начнёт грузиться скрипт Твиттера и он будет не доступен - будет виден эффект зависания. Теоретический.
Однако у меня так и не получилось этого добиться. То есть браузер в профиле писал что ждёт ответа, но при этом я спокойно могу читать блог. Единственное мешает - наличие ссылки "Твитнуть". Но она остаётся доступной и работает! Правда автоматический текст твита не получилось сделать правильным, однако это уже на много лучше!
Ну и на слабом компьютере наблюдается секундное зависание - когда скрипт отрабатывает. Но и это намного лучше, чем было до этого.
Скриншоты будут уже для нового дизайна панели управления блогом. Для старого отдельно делать просто не хочу. Да и можно переключиться в новый вид, сделать и вернуться опять в старый, тёмно голубого цвета)))).
Итак, сначала нам надо разместить якорь, в который и будет вставляться кнопка Твиттера. Для этого нам надо с генерировать этот самый код якоря:
Код якоря:
<b:if cond='data:blog.pageType != "static_page"'>
<div class='srcsoftTwitterBoxClass' expr:title='data:post.title' expr:url='data:post.url' style='float:right;padding:4px;'/>
</b:if>
Теперь, когда у нас есть текст якоря, необходимо добавить код для обработки этого самого якоря.
И теперь необходимо вызвать эту функцию. Вызов нужно разместить или в конце страницы, перед тегом </body> или как у меня:
И последнее - куда этот код вставлять:
Функция для обработки якорей - она превращает якорь в кнопочку:
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();
});И последнее - куда этот код вставлять:
- Идём в панель управления в пункт Шаблоны. Справа вверху есть кнопочка - выполняем бекап шаблона.
- Теперь открываем на редактирование сам шаблон - жмём Изменить HTML.
- Система выдаст нам предупреждение, смысл которого заключается в том, что не нужно вручную менять шаблон, если Вы не продвинутый пользователь. Жмём кнопку приступить.
- Найдите в тексте шаблона конструкцию <data:post.body/>.
- Вставьте Код якоря, выше над этим кодом (на картинке показано где поставлен у меня. Если Вы выбрали вариант размещения под сообщением - то у Вам будет выглядеть по другому).
- Не забудьте добавить вызов функции, которая эти самые якоря обработает. Я говорю про функцию AppendTwiterHandler. Пока её вызова не будет - Вы будете видеть только ссылку с надписью Твитнуть.
- И на всякий случай - этот код требует подключение библиотеки jQuery. Как подключить - читай в посте Подключаем jQuery к блогу
Будьте счастливы!
Комментариев нет:
Отправить комментарий