Отправляет email-рассылки с помощью сервиса Sendsay

Для чего вам свой сайт?

Рассылка закрыта

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Апрель 2013   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Автор
asokova

Статистика

3 подписчиков
0 за неделю
←   Все выпуски   →

Для чего вам свой сайт? Внутренняя оптимизация блога


Добрый день!

Сегодня немного разукрасим свой блог различными социальными кнопками, добавим отдельные комментарии Вконтакте и Facebook, и придадим жизни нашим комментариям за счет смайликов:

внутренняя оптимизация блога

 

Для чего нужны все эти фишки? Прежде всего - для более удобного и приятного общения посетителей. Отдельные комментарии Вконтакте и Facebook попадают автоматически на странички микроблогов ваших читателей и таким образом пиарят ваш блог. А кнопки соц. сетей я поставила потому, что плагин Share Button в моей теме почему-то давал сбой, поэтому пришлось воспользоваться другим сервисом. Впрочем, давайте по порядку..


Внутренняя оптимизация сайта -
дополнительные меры

 

Что еще мы сделаем полезного для нашего блога, чтобы улучшить его вид и функциональность?

1. Поставим смайлики в комментарии.

2. Установим дополнительные социальные кнопки.

3. Сделаем комментарии на Facebook и Вконтакте.

 

1. Со смайликами жизнь веселее! wpml_yahoo

Я уже не представляю себе общения без этих забавных рожиц, которые более полно, чем любые слова, могут выражать эмоции и настроение. Думаю, вашим посетителям понравится, если вы сделаете их общение - более полным и объемным, что ли.

Смайликов в комментариях выводит плагин wp-Monalisa. Скачиваем, устанавливаем и все! Я лично ничего не меняла, основные смайлы установились сами. Хотите добавить? Идем в админ-панель, жмем на вкладку wp-Monalisa и меняем что хотим. Там все просто, надеюсь разберетесь:

wpml_mail

 

оптимизация блога

2. Яркие социальные кнопки

Как я уже сказала, плагин вывода соц. кнопок Share Buttons меня немного подвел, проблема в том, что не работало половина кнопок. И тогда я открыла для себя сервис  share42.com. Кнопок там довольно много, вам точно хватит. Выбираете размер, потом щелкаете по кнопкам, которые хотите выбрать.

На той же странице чуть ниже - подробная инструкция что и куда вставлять. Если не понятно, то код вставляем: Внешний вид - Редактор - Одиночная страница (single.php) после кода, который выводит пост.

Если случились проблемы - пишите, может что посоветую. Главное сделайте одну полезную вещь - сделайте копию файла, в который будете вставлять код. В нашем случае - это будет файл single.php - просто откройте его и скопируйте весь его код в текстовый документ на рабочем столе, если ничего плохого не случится - отправите его в корзину. А в случае ошибки - сможете быстро вернуть все на место.

А если все удачно, то появятся вот такие кнопочки (их, кстати можно сделать и вертикально - балуйтесь настройками на сайте):

 


 

3. Выводим комментарии Вконтакте и Facebook.

И напоследок оставили самое муторное, но и самое полезное, поскольку такие комментарии сделают большое дело для раскрутки вашего блога. Так что терпения, просто повторяйте за мной все шаги и у вас все получится!

Ставить коменнтарии для Facebook и Вконтакте отдельно - значит делать свою страницу километровой. Мы сделаем вот такую функциональную вкладку, которая сэкономит нам место на сайте и будет более удобна при использовании:

оптимизация блога

1. Вставьте код между тегами head и /head (я поставила в heder - не забудьте скопировать первоначальный файл heder на всякий случай!):

 

<style type="text/css">
body {background:#fff;color:#000;font-family:sans-serif;line-height:1.6;}
#page {width:70%;margin:10px auto;}
 .tabs {width:100%;overflow:hidden;font-size:0.9em;margin:2em 0;zoom:1;padding:1px;position:relative;}
 .tabs dt {float:left;line-height:2;height:2em;background:#e8f0f5;border:1px solid #e8f0f5;border-bottom:0;padding:0 1em;position:relative;left:35px;margin-right:1px;cursor:pointer;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;}
 .tabs dt:hover {background-color:#bfdff4;}
 .tabs dt.selected {border-color:#b0d0e9;background:#fff;z-index:3;cursor:auto;}
 .tabs dd {background:#fff;display:none;float:right;width:100%;margin:2em 0 0 -100%;position:relative;z-index:2;}
 .tabs dd.selected {display:block;}
 .tabs .tab-content {border:1px solid #b0d0e9;padding:20px;
-webkit-border-radius:20px;
-moz-border-radius:20px;}
</style>

2. Подключение скрипта. Туда же, к предыдущему коду, между тегами head и /head, добавьте вот этот:

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('dl.tabs dt').click(function(){
$(this)
 .siblings().removeClass('selected').end()
 .next('dd').andSelf().addClass('selected');
});
});
</script>

3. Выводим форму на страницу. Вставьте код туда, где бы вы хотели видеть данную форму (я поставила в single.php - не забудьте скопировать первоначальный файл single на всякий случай!):

<dl class="tabs">
<dt class="selected">ВКонтакте</dt>
<dd class="selected">
<div class="tab-content">Код комментариев Вконтакте</div>
</dd>
<dt>FaceBook</dt>
<dd>
<div class="tab-content">Код комментариев FaceBook</div>
</dd>
</dl>

Проверьте - у вас должна быть видна под статьями вот такая пустая форма:

vnutrennya-optimizaziya-sayta8

4. Добавим виджет Вконтакте.

Переходим по этой ссылке. Заполняем необходимые поля:

виджет Вконтакте
Верхнюю часть кода скопируем и вставим между тегами head и /head:

как вставить виджет Вконтакте

Теперь нижнюю часть - в то место, где выводится форма(single.php), в тот код, что мы ставили туда раньше:
код виджета Вконтакте

Виджет Вконтакте должен уже выводится в нашей форме - проверьте. Если все на месте, идем дальше, осталось немного.

5. Устанавливаем виджет Facebook

Идем по этой ссылке. Если еще не регистрировались - регистрируемся, или входим со свои логином. Опять перейдите по ссылке. Нам нужно создать новый Apps:

виджет Facebook
Заполняем форму как просят, вводим адрес нашего сайта. В итоге получим свой ID - он вам еще пригодится, запишите в блокнотик для себя.

А мы идем дальше по этой ссылке. Заполняем форму:

...Получаем код и вставляем верхнюю его часть - в heder между тегами head и /head, а нижнюю - в код формы, которая находится в single.php в место, отведенное для кода Facebook:

vnutrennya-optimizaziya-sayta14

Вуаля! Вкладка работает! Поздравляю! На следующих уроках продолжим тему оптимизации и новых фишек для блога
В избранное