Внутренняя оптимизация сайта — ставим полезные фишки на блог

Добрый день!

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

внутренняя оптимизация сайта

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

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

 

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

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

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

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

 

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

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

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

wpml_mail

 

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

У меня только одно предупреждение! Рано или поздно придет предложение обновить плагин wp-Monalisa. При обновлении плагина, все смайлики пропадают, так получилось и у меня — там стали требовать каких-то дополнительных настроек или оплаты, вообщем я не поняла… Удалила установленный, и снова установила старый плагин, и опять все стало на место.

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

Вуаля! Вкладка работает! Поздравляю!

 

За ваше трудолюбие дарю вам руководство Как устанавливать социальные виджеты:

Как устанавливать социальные виджеты

Но сначала хочу сказать, что в следующих постах опишу действие плагина социальный замок и подарю вам его бесплатно, поскольку и мне он достался бесплатно. А вот как он действует:

[like_to_read]СКАЧАТЬ ПОДАРОК[/like_to_read]

Так что подписывайтесь на новые статьи, чтобы не пропускать подарки:

 

Эта птичка с радостью доставляет новые стати моим подписчикам!
Кликни по ней — тоже будешь в курсе нового:
подписка на рассылку

С уважением, Анжелика $окова.

44 комментария: Внутренняя оптимизация сайта — ставим полезные фишки на блог

  • Андрей Чашин говорит:

    Анжелика, спасибо за такую полезную, исчерпывающую информацию!

  • Дмитрий говорит:

    Страшно подумать, сколько ещё будет кнопок социальных сетей лет так через десять. Наверно их количество удвоится!

  • Антон говорит:

    Очень крутые фишки для продвижения блога, сам пользуюсь! Спасибо за обзор !

  • Vesna83 говорит:

    Анжелика, при активации Монализы, вверху появилась строчка с надписью:
    «Плагин произвёл при активации 1194 символов неожиданного вывода. Если вы заметите ошибку «headers already sent», проблемы с RSS-лентами или другие неполадки, попробуйте деактивировать или удалить этот плагин.»
    Что это может значить?

    • admin говорит:

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

      • Vesna83 говорит:

        а как я потом смогу заметить проблемы с рсс-лентами? (я даже не знаю что это такое)

        • admin говорит:

          Рсс — это лента всех Ваших записей на блоге. Когда добавляете статью, она добавляется и в ленту. Если Вы подпишитесь на свою ленту, к Вам на почту будут приходить анонсы статей. Вот и заметите, если что не так.

          • Vesna83 говорит:

            Я еще неделю назад была простым пользователем соцсетей и в сайтах ничегошеньки не знала, хочу выразить Вам огромную благодарность за терпеливость к моим глупым вопросам

          • Vesna83 говорит:

            Анжелика, подскажи пожалуйста, какую форму подписки лучше ставить с точки зрения имеил-маркетинга — рсс или смартреспондер?

          • admin говорит:

            Весна, нужно ставить обе — рсс подписывает на статьи сайта, а смартреспондер — на то, что ты сама хочешь

          • Vesna83 говорит:

            Вопросик про полезные фишки на блог. Как добавить паззлы? Что это за плагин?

          • admin говорит:

            Весна, я пользуюсь вот этим сервисом: http://www.flash-gear.com/puzzle/

  • Vesna83 говорит:

    Анжелика, при установке новых кнопок от Шэр42.ком, что делать с плагином ШэрБаттн — деактивировать/ удалить/ оставить активированным?

    • admin говорит:

      Весна (красивое имя, можно так Вас называть?), оставьте его активированным, он еще пригодится.

      • Vesna83 говорит:

        Да, конечно
        Спасибо за ответ . И снова вопрос. Какую ссылку нужно вводить в Шэр42.ком в поле — «Ссылка на RSS сайта:»? Где её взять?

  • Vesna83 говорит:

    Анжелика. на Шэр42.ком. Надо нажать на «Скачать готовый скрипт» или просто скопировать код из поля «Вставьте в шаблон вашего сайта следующий код (прямо перед или сразу после текста статьи):» к себе на сайт в Внешний вид — Редактор — Одиночная страница (single.php).
    ?

    • admin говорит:

      Нужно сделать и то и другое, просто делайте все по пунктам

      • Vesna83 говорит:

        качала готовый скрипт, далее надо
        «Загрузите папку «share42″ на ваш сайт по FTP или через панель управления хостингом»
        1. что значит через ФТП, как это?
        2. Если через хостинг то на какие вкладки там надо нажимать?

        • admin говорит:

          Весна, отвечаю иногда с опозданием — не всегда в эфире)) Итак, я загружаю файлы через хостинг. Заходите в панель управления, Файловый менеджер, ваш домен, папка public_html, там Файл — Закачать, вот и все, пробуйте, должно получиться

          • Vesna83 говорит:

            Понимаю, я и сама к компьютеру набегами, посидеть деть не даст
            Не могу попасть на свой блог. И на хостинг попадаю через раз. Это ведь не может быть связано с какимнибудь вирусом, скачанным вместе с плагином; или с экспериментами с плагинами на моём блоге; не может быть связано, правда?

          • Vesna83 говорит:

            после загрузки идет следующий пункт:
            3. Укажите путь до этой папки: , например, http://site.name/share42/

            Что это значит и как и где это сделать?

  • Vesna83 говорит:

    Анжелика, а вкладку Одноклассников как-то можно добавить?

    • admin говорит:

      Вкладки такой не бывает, по крайней мере я не видела.. этот сайт, видимо немного по другому функционирует

  • admin говорит:

    Весна, это значит, что внизу в коде, что Вам дали, нужно прописать путь до этого файла: http://site.name/share42/ -вставьте свой домен (там в коде уже прописан путь: src=»http://site.name/share42/share42.js» — вы его замените на свой: http://site.name/share42/)

  • Vesna83 говорит:

    «Весна, нужно ставить обе — рсс подписывает на статьи сайта, а смартреспондер — на то, что ты сама хочешь»

    На Смартреспондере есть вкладка — Включить RSS2Email ретранслятор — это не тотже рсс? Правда, он доступен только для платного аккаунта, но мне всёравно любопытно.

  • Vesna83 говорит:

    «Весна, я пользуюсь вот этим сервисом: http://www.flash-gear.com/puzzle/»

    Ага. я скачала, а куда и как дальше устанавливать, подскажи пожалуйста

    • admin говорит:

      Весна, этот код нужно вставлять в статью, где хочешь, чтобы отображался пазл

  • Ксения говорит:

    Анжелика, мне вертикальные кнопочки соц. сетей нравятся больше, чем горизонтальные, но почему-то на этой статье они находятся прямо на тексте статьи. Читать очень неудобно. А в других статьях все хорошо — слева на синем фоне.

  • Наталья говорит:

    Анжелика,прочитала статью и комментарии к ней,очень интересно,но у меня вопрос:если есть»Одна кнопка»,то нужно ли иметь все другие иконки фейсбук, в контакте итд.

  • Наталья говорит:

    И еще один очень наболевший вопрос. У меня как-то странно работает плагин Limit Login Attempts. постоянно блокирует вход в админ панель.Пишет,что 375 изоляций . Я почистила кэш,удалила кукки,кое-как попала в админ панель,почистила изоляции,все обновила.После этого входила в панель только раз,заглянула в этот плагин-уже 5 изоляций! И всегда с разных IP адресов. Очень благодарна Вам за комментарий на моем сайте,если его уже можно так назвать.он такой кургузый,но я работаю над этим ,отрабатываю технику печатания.Думаю,что все получится.

  • Наталья говорит:

    Добрый день, Анжелика! Скажите, пожалуйста, как поменять расположение смайликов на горизонтальное?

  • Наталья говорит:

    И уточните, пожалуйста, куда именно вставлять код….. страшно)))

  • Ольга Суворова говорит:

    Спасибо, Анжелика, справилась и с виджетами комментариев Вконтакте и на Фейсбуке. Я давно хотела такую красоту сделать, но где бы я ни встречала описание, как это делать, у меня волосы дыбом становились при мысли, как же это сложно и запутанно а у вас все получается просто и замечательно!
    Спасибо Вам за Вашу работу и такие подробные и доступные разъяснения! Я безмерно счастлива, что нашла Ваш блог, Анжелика!

  • Ольга Суворова говорит:

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

    • Анжелика говорит:

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

  • Ольга Суворова говорит:

    Здравствуйте, Анжелика! Давненько я к вам не заглядывала на блог.
    Появилось время, решила одну небольшую проблемку, да даже не проблемку, а так…Больше месяца назад у меня при публикации новых статей перестал показывался фавикон, в старых статьях есть, а в новых нет. Решила, что это я что-то установила на блог, потому и пошла такая ерунда. Вот, сегодня занялась этим вопросом, убрала форму комментирования Вконтакте и Фейсбук, и мой фавикон вернулся! Чудеса да и только, правду говорят, что пути html кодов неисповедимы… Форма комментирования работала, а фавикон с момента установки этой формы не отображался…
    Форму я решила убрать, все равно никто у меня в ней не пишет.

  • Игорь говорит:

    Ого ,я и не задумывался что еще столько фишек всяких и примочек существует.
    Полезная статья.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Поиск по сайту:
Рекомендую:
Вконтакте
FaceBook

Все статьи сайта | Конкурсы на сайте| Пошаговое создание сайта| Рекомендую | Реклама на сайте

Copyright © 2017. Все права защищены! При копировании строго ссылка на сайт!

Создай свой сайт и заработай на нем Главная сайта.

Как заказать и купить такой готовый сайт, читайте здесь

29 Запросов за 0,437 cекунд.
Индекс цитирования