В продолжение SMO – продвижения сайтов с помощью видеоурока расположим кнопки социальных сетей, сформированные в предыдущей статье, горизонтально и в рамке.
В предыдущей статье и видеоуроке: “Ставим социальные кнопки на сайт. Кнопки социальных сетей для сайта” мы научились формировать скрипты кнопок социальных сетей Twitter, ВКонтакте, Facebook, Мой Мир, Одноклассники, Google+1, Яндекс Я.ру и располагать их на сайте в таком виде:
С помощью данной статьи и видеоурока расположим блок наших социальных кнопок горизонтально, оформим в рамке и с заголовком, как показано на картинке:
Для этого открываем “Блокнот”, в который мы в предыдущей статье заносили коды и записываем сюда небольшую программку для нашего блока:
/*
Стили для горизонтального расположения социальных кнопок
*/
#bloktext {
color:#17586b;
font-family:'Arial Narrow', Times, serif;
text-align:left;
font-size:1.8em;
height: 45px;
}
#bloktwit {
float: left;
width: 150px;
height: 25px;
}
#blokfaceb {
float: left;
width: 170px;
height: 25px;
}
#blokvk {
float:left;
width: 170px;
height: 25px;
}
#blokmmiod {
float:left;
width: 280px;
height: 25px;
}
#blokya {
float:left;
width: 150px;
height: 25px;
}
#blokgoog {
float:left;
width: 150px;
height: 25px;
}
#social-button {
height: 95px; /*высота блока*/
padding: 15px; /*внутренние поля (отступ картинок от краев рамки )*/
margin:1px; /*внешние поля (отступ рамки от края слева и справа)*/
border: 1px solid #2288BB; /*рамка – толщина, стиль, цвет*/
}
Здесь каждый участок блока имеет описание параметров заголовка, социальных кнопок и самого блока:
bloktext – параметры заголовка, который будет располагаться вверху блока (цвет, шрифт, расположение и размер);
bloktwit – имя и параметры кнопки Twitter (float – расположение, width – ширина в пикселях, height – высота в пикселях);
blokfaceb – имя и параметры кнопки Facebook;
blokvk – имя и параметры кнопки ВКонтакте;
blokmmiod – имя и параметры кнопок Мой Мир и Одноклассники;
blokya – имя и параметры кнопки Я.ру;
blokgoog – имя и параметры кнопки +1 социальной сети Google;
social-button – имя и параметры блока: height – высота блока, padding – внутренние поля (отступ картинок от краев рамки ), margin – внешние поля (отступ рамки от края слева и справа), border – рамка – толщина, стиль, цвет.
Эту программку необходимо вставить в файл стилей style.css.
Для этого копируем её в нашем “Блокноте” заходим в админпанель сайта, отмечаем Дизайн=>Редактор, находим список стилей и открываем файл style.css.
В конце файла вставляем данную программу и не забываем нажимать “Обновить файл”:
Делайте коррекцию файлов в админпанели очень осторожно. Желательно перед внесением изменений скопировать файл себе на диск или скопировать их текст в какой – либо “Блокнот”. В случае, если поломается сайт можно зайти на хостинг и вставить старую информацию файла.
Возвращаемся в наш “Блокнот”, чтобы установить связь между кодами наших кнопок и новой программой в файле стилей. Для этого подготовим следующий шаблон, в который будем вставлять полученные раннее коды наших кнопок:
<!-- Социальные кнопки Поделиться, Твитнуть и т.д. -->
<blok:if cond='data:blog.pageType == "item"'>
<div id='social-button'>
<div id='bloktext'>
<b> Буду благодарна, если Вы поделитесь этой статьёй с друзьями! </b></div>
<!-- Твиттер -->
<div id='bloktwit'></div>
<!-- Facebook -->
<div id='blokfaceb'></div>
<!-- В контакте -->
<div id='blokvk'></div>
<!-- Маил.ру: Мой Мир и Одноклассники -->
<div id='blokmmiod'></div>
<!-- Кнопка Яндекс Я.ру -->
<div id='blokya'></div>
<!-- Кнопка g+1 -->
<div id='blokgoog'></div>
</div>
</blok:if>
<!-- / Социальные кнопки Поделиться, Твитнуть и т.д. -->
Данный шаблон содержит уникальное имя нашего блока (social-button), имя заголовка (bloktext), текст заголовка, теги <div></div> с заключенными в них уникальными именами кнопок (bloktwit, blokfaceb, blokvk, blokmmiod, blokya, blokgoog), которые мы описали в файле стилей.
Текст заголовка: “Буду благодарна, если Вы поделитесь статьёй с друзьями!” можно изменить и задать свой.
Перенесём коды кнопок, полученные в предыдущей статье: “Ставим социальные кнопки на сайт. Кнопки социальных сетей для сайта” в наш шаблон. Берём только ту часть кода, которая размещается в том месте, где будут расположены наши кнопки социальных сетей.
Копируем код кнопки Twitter и вставляем между тегами div.
Аналогично копируем и вставляем коды кнопок Facebook, ВКонтакте, Мой Мир и Одноклассники, Я.ру, g+1 в подготовленные для этих кнопок индивидуальные теги div с уникальными именами кнопок (bloktwit, blokfaceb, blokvk, blokmmiod, blokya, blokgoog).
В результате получаем такой блок с кодами кнопок (коды Ваших кнопок могут немного отличаться от данного примера). На сайтах социальных сетей коды кнопок могут изменяться, поэтому не рекомендую один к одному использовать коды кнопок, полученные в предыдущей статье и приведенные ниже:
<!-- Социальные кнопки Поделиться, Твитнуть и т.д. -->
<blok:if cond='data:blog.pageType == "item"'>
<div id='social-button'>
<div id='bloktext'><b> Буду благодарна, если Вы поделитесь этой статьёй с друзьями! </b></div>
<!-- Твиттер -->
<div id='bloktwit'><a href="https://twitter.com/share" class="twitter-share-button" data-lang="ru">Твитнуть</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div>
<!-- Facebook -->
<div id='blokfaceb'><div class="fb-like" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div></div>
<!-- ВКонтакте -->
<div id='blokvk'><div id="vk_like"></div>
<script type="text/javascript">
VK.Widgets.Like("vk_like", {type: "button", height: 20});
</script></div>
<!-- Маил.ру: Мой Мир и Одноклассники -->
<div id='blokmmiod'><a target="_blank" class="mrc__plugin_uber_like_button" href="http://connect.mail.ru/share" data-mrc-config="{'type' : 'button', 'caption-mm' : '1', 'caption-ok' : '1', 'counter' : 'true', 'text' : 'true', 'width' : '100%'}">Нравится</a>
<script src="http://cdn.connect.mail.ru/js/loader.js" type="text/javascript" charset="UTF-8"></script></div>
<!-- Кнопка Яндекс Я.ру -->
<div id='blokya'><a counter="yes" type="icon" size="large" name="ya-share"></a></div>
<!-- Кнопка g+1 -->
<div id='blokgoog'><g:plusone></g:plusone></div>
</div>
</blok:if>
<!-- / Социальные кнопки Поделиться, Твитнуть и т.д. -->
Копируем наш блок с кодами очень внимательно, чтобы всё скопировалось и вставляем в наш плагин Header and Footer. Для этого открываем в админпанели Настройки=>Header and Footer и в пункте меню Post Content вводим в нижнее окошко в поле “Code to be inserted after each post”, заменив раннее вставленный в предыдущей статье код на последний скопированный.
Можно для красоты оформления вставленного блока добавить пустые строки перед рамкой и после неё, вставив до и после кода такие строки:
Обязательно нажимаем Save для сохранения изменений.
Выходим из админпанели для просмотра сайта, открываем какую – либо статью и видим наши кнопки. Обязательно нажимаем в браузере стрелочку “Обновить эту страницу” и получаем желаемый результат.
Если какая либо кнопка наехала на соседнюю, необходимо открыть файл стилей style.css и, отыскав описание данной кнопки, увеличить поле width примерно на 20-50 или более пикселей. При этом увеличиться ширина места, отведенного для данной кнопки и за счет этого сдвинется стоящая справа кнопка.
Если Вы выбирали все кнопки со счетчиками, а видите на некоторых из них его отсутствие – не переживайте, это нормально. Когда посетители поделятся статьёй в соцсети, счетчик появится на кнопке.
Чтобы легко выполнить вышеописанные действия, рекомендую посмотреть обучающий видеоурок. Приятного просмотра.
Для улучшения качества просмотра видеоролика нажмите на значок “1” в правом нижнем углу, который появится при наведении мышкой.
При желании можно увеличить размер видео на весь экран, нажав на значок “2”.
Если Вы новичок и всё описанное в данной и предыдущей статье показалось сложным или, если Вы просто хотите разнообразить свой сайт полезными вещицами, то у меня для Вас сюрприз, описанный в следующей статье.
Поделитесь в комментариях своими результатами, расскажите, что у Вас получилось, а что нет и с какими трудностями столкнулись.
Кнопки “Стань другом” или “Следуй за мной” от сервиса AddThis.com
Анализ и аудит юзабилити сайтов для повышения конверсии
Кнопка “Поделиться” от Яндекс для продвижения сайта
YouTube – дополнительный заработок и ключ к повышению продаж
Так как я новичек и вышеописанное показалось сложным, то с нетерпением буду ждать сюрприз, описанный в следующей статье.
Надежда,такое оформление кнопок действительно намного убедительнее. Особенно меня поражает,как легко Вы оперируете скриптами. У меня лично это вызывает глубокое восхищение! Спасибо за статью. Буду учиться!
Надежда, для меня это показалось очень сложным делом, так как я не разбираюсь в кодах. как их можно изменять, дополнять. Я очень боюсь испортить, нарушить то, что уже создано. Опыт такого положения у меня, к несчастью моему, есть. Не знаю, как выберусь из этого положения. Очень нервничаю из-за этого. Спасибо Вам за обучение. Когда-то и я дорасту до такого уровня, что смогу это сделать.Я желаю Вам удачи и ЛЮБВИ!!!
Анна, у Вас всё получится, нужно просто брать и делать. Если что-то на блоге сломается можно сразу же заказать на хостинге откат (восстановление) блога. Обязательно перед тем, как что-то важное или сложное выполнять на блоге, необходимо зайти на хостинг и проверить когда был сделан последний бэкап (защита, копия) блога и баз данных SQL. На всякий случай заказать свежие бэкапы блога и баз SQL, скачать их на свой компьютер. После этого можно смело вносить изменения в файлы блога.
Надежда, добрый вечер! Урок “Как сделать социальные кнопки горизонтально и в рамке” – замечательный! Но почему бы не отцентровать текст и кнопки?
Спасибо, Юрий! Это будет темой другого урока!
Хороший урок. И первый про установку кнопок и второй. Спасибо автору!
Да, кнопки так хорошо смотрятся! Спасибо за интересный и полезный материал!
А если четыре кнопки поставить то он будет как на этом сайте?
Разместить четыре кнопки на одном горизонтальном уровне (в одной строке), чтобы они не переносились на следующую строку, можно, регулируя размер ширины каждой кнопки в файле стилей style.css двумя способами:
1-й способ: для каждой кнопки подобрать свою фиксированую ширину;
2-й способ: для каждой кнопки задать ширину в процентах. Процентное соотношение подобрать с учетом ширины каждой кнопки относительно других кнопок. Сумма процентов для четырёх кнопок должна равняться 100%.
Если использовать второй способ, то при просмотре на узком экране кнопки не будут переноситься на следующую строку, а будут наезжать друг на друга, если не правильно подобрано в процентах их соотношение, или они физически не могут поместиться на узком экране. Во-втором способе есть свои нюансы, но это тема уже отдельной статьи.
Спасибо, большое! Все сделал – только кнопки залезают друг на друга и сместился шаблон
Антон, если кнопки наезжают друг на друга, то в файле стилей style.css увеличьте параметр ширины кнопок width.
Надежда, нравится подача материала! Хотелось бы более высокое разрешение видеозаписи.
Дважды проделывал ваш путь: без результата, кнопки так и остались в куче и без рамки и надписи. Руки кривые наверное. В чем еще может быть причина?
Сергей! Для начала, в коде кнопки ВКонтакте, который расположен в тегах
в файле header.php, удалите комментарий,
так как тег head в этом комментарии вызывает серьезную ошибку на сайте.
Далее, если у Вас подключены плагины для выдачи кнопок социальных сетей, которые Вы хотите разместить в рамке, обязательно отключите эти плагины, так как стили плагинов могут конфликтовать со стилями для выдачи нашего блока кнопок.
Так же удалите строки с черточками:
сделаем код сайта чистым. Если после выполнения этих рекомендаций не получите нужного результата, пишите, будем смотреть дальше.
удалил указанную фразу, плагины для выдачи кнопок социальных сетей не подключал, строк с черточками не нашел. Попробовал – не получилось. Еще раз заново прошел урок, нет результата. Может быть причина в том, что использую тему Iconic one&
Сергей! Если речь идет о Вашем сайте, указанном в комментариях, рекомендую выполнить следующие действия:
1. В том месте сайта, где будут размещаться кнопки социальных сетей, вставьте вместо кода, который там был, следующий код:
<!-- Все социальные кнопки --> <blok:if cond='data:blog.pageType == "item"'> <div id='social-button'> <div id='bloktext'><center><b> Буду благодарен, если Вы поделитесь этой статьёй с друзьями! </b></center></div> <!-- Твиттер --> <div id='bloktwit'><a href="https://twitter.com/share" class="twitter-share-button" data-lang="ru" data-dnt="true" rel="nofollow">Твитнуть</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></div> <!-- Facebook --> <div id='blokfaceb'><div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div></div> <!-- ВКонтакте --> <!-- Put this div tag to the place, where the Like block will be --> <div id='blokvk'><div id="vk_like"></div> <script type="text/javascript"> VK.Widgets.Like("vk_like", {type: "button", height: 20}); </script></div> <!-- Mail.ru --> <div id='blokmmiod'><a target="_blank" class="mrc__plugin_uber_like_button" href="http://connect.mail.ru/share" data-mrc-config="{'cm' : '1', 'sz' : '20', 'st' : '2', 'tp' : 'mm'}" rel="nofollow">Нравится</a> <script src="http://cdn.connect.mail.ru/js/loader.js" type="text/javascript" charset="UTF-8"></script></div> <!-- Google+1 --> <!-- Place this tag where you want the +1 button to render. --> <div id='blokgoog'><div class="g-plusone"></div></div> </div> </blok:if> <!-- /Все социальные кнопки -->2. Если кнопки наезжают или наоборот далеко располагаются друг от друга, в файле style.css отрегулируйте их длину width и высоту height.
3. В файле style.css в блоке #bloktext уменьшите размер шрифта текста на font-size:1.4em
4. В файле header.php, удалите строку:
5. В файле header.php в коде:
удалите две строки с черточками,
так как они не корректно отображаются в левом верхнем углу сайта.
6. Проверьте правильность кода кнопки соцсети ВКонтакте, так как она не отображается на сайте.
Спасибо за помощь! После каждого пункта стал смотреть изменения. После исправления п.1. Появилась рамка и надпись
п. 2. Немного отрегулировал расположение взаимное надписей, но не стал доводить до конца, т.к. не вижу еще кнопки ВКонтакте
3. изменил размер шрифта
4. строку
с самого начала не переносил
5. вроде удалил две строки с черточками, и теперь стал обращать внимание на левый верхний угол. Там почему-то без изменений
6. Проверил код кнопки ВКонтакте, но она все равно не отображается на сайте.
Может еще раз посмотрите?
кусок скрипта по кнопке ВК в header.php:
<!-- Скрипт для кнопок Поделиться в соцсетях (ВКонтакте)--> VK.init({apiId: 4311221, onlyWidgets: true});Сергей! Выполните следуюшие корректировки и должно все заработать.
1. Замените в файле header.php код:
<!-- / Скрипт для кнопки Facebook Мне нравится --> ------ <!-- Скрипт для кнопки Яндекс --> <a counter="yes" type="icon" size="large" name="ya-share" rel="nofollow"></a><script charset="utf-8" type="text/javascript">if (window.Ya && window.Ya.Share) {Ya.Share.update();} else {(function(){if(!window.Ya) { window.Ya = {} };Ya.STATIC_BASE = '\/\/yandex.st\/wow\/2.47-9\/static';Ya.START_BASE = 'http:\/\/my.ya.ru\/';var shareScript = document.createElement("script");shareScript.type = "text/javascript";shareScript.async = "true";shareScript.charset = "utf-8";shareScript.src = Ya.STATIC_BASE + "/js/api/Share.js";(document.getElementsByTagName("head")[0] || document.body).appendChild(shareScript);})();}</script> <!-- /Скрипт для кнопки Яндекс --> ------ <!-- Скрипт для кнопки google +1 -->на этот код:
<!-- / Скрипт для кнопки Facebook Мне нравится --> <!-- Скрипт для кнопки Яндекс --> <script charset="utf-8" type="text/javascript">if (window.Ya && window.Ya.Share) {Ya.Share.update();} else {(function(){if(!window.Ya) { window.Ya = {} };Ya.STATIC_BASE = 'http:\/\/yandex.st\/wow\/2.47-9\/static';Ya.START_BASE = 'http:\/\/my.ya.ru\/';var shareScript = document.createElement("script");shareScript.type = "text/javascript";shareScript.async = "true";shareScript.charset = "utf-8";shareScript.src = Ya.STATIC_BASE + "/js/api/Share.js";(document.getElementsByTagName("head")[0] || document.body).appendChild(shareScript);})();}</script> <!-- /Скрипт для кнопки Яндекс --> <!-- Скрипт для кнопки google +1 -->2. Замените в файле header.php код:
<!-- Скрипт для кнопок Поделиться в соцсетях В контакте to the head --> <script type="text/javascript" src="//vk.com/js/api/openapi.js?111"></script> <script type="text/javascript"> VK.init({apiId: 4311221, onlyWidgets: true}); </script> <!-- /Скрипт для кнопок поделиться в соцсетях -->на этот код:
<!-- Скрипт для кнопок Поделиться в соцсетях В контакте to the head --> <script type="text/javascript" src="http://vk.com/js/api/openapi.js?111"></script> <script type="text/javascript"> VK.init({apiId: 4311221, onlyWidgets: true}); </script> <!-- /Скрипт для кнопок поделиться в соцсетях -->3. Добавьте код в место, где будет размещена кнопка Яндекс.ру:
4. Замените код в том месте, где размещена кнопка
<!-- ВКонтакте --> <!-- Put this div tag to the place, where the Like block will be --> <div id='blokvk'><div id="vk_like"></div> <script type="text/javascript"> VK.Widgets.Like("vk_like", {type: "button", height: 20}}); </script></div>на этот код:
<!-- ВКонтакте --> <!-- Put this div tag to the place, where the Like block will be --> <div id='blokvk'><div id="vk_like"></div> <script type="text/javascript"> VK.Widgets.Like("vk_like", {type: "button", height: 20}); </script></div>По п.1. Захожу через админ панель \Внешний вид (дизайн)\ Редактор и выбираю файл Заголовок (header.php). Найти там фразу “Скрипт для кнопки Facebook Мне нравится” через поиск ^F не получается. Помню, что эта фраза доступна через Параметры\ Header and Footer \ Заголовок и подвал страницы в средней зоне (“Код, который надо вставить в Заголовок каждой страницы”). Там исправляю скрипт
Да, если Вы вставляли код в плагин Header and Footer, то исправление выполняйте в плагине.
Надежда, спасибо, исправил с вашей помощью.
1. Получается, что если мы сразу пишем в header сами или через плагин Header & Footer, то это разные места? Почему так? я полагал, что плагин просто облегчает нам работу.
2. еще в файле стилей где поискать место, чтобы чуток поднять кнопку facebook, она у меня получилась чуть ниже чем остальные
3. Захотел расположить все кнопки в один ряд, а не два, как у вас. Для этого нужно удалить кнопку “поделиться” в зоне кнопки facebook, заново создал скрипт, но при сравнении (по каждому слову скрипта) его со старым скриптом не нашел разницы и поэтому не стал заменять. или нужно все-таки заменить?
Сергей, рекомендую выполнить следующую коррекцию:
1. Для кнопки facebook в файлк style.css в блоке:
#blokfaceb { float: left; width: 210px; height: 24px; }измените высоту кнопки:
Высота всех кнопок должна быть одинакова 25px.
2. Чтобы в кнопке Facebook удалилась кнопка поделиться, вместо кода для Facebook в том месте, где размещается кнопка, замените код:
на этот код:
3. В файле style.css отсутствует блок кнопки Яндекс.ру. Добавьте после блока кнопки mail.ru:
#blokmmiod { float:left; width: 280px; height: 25px; }следующий блок описания стилей для кнопки Яндекс.ру:
#blokya { float:left; width: 150px; height: 25px; }4. В коде для кнопки Яндекс.ру, где размещается эта кнопка:
удалите:
и разместите этот код после кнопки mail.ru.
5. Чтобы кнопки разместить в одну строку (хотя я сомневаюсь, что они поместятся в одной строке) – отрегулируйте ширину кнопок с помощью параметра width в файле style.css, где описаны следующие стили:
Здравствуйте, Надежда! Может Вы мне подскажите, как приблизить кнопки “Поделиться в соцсетях” к концу статьи? Почему-то эти кнопки после статьи находятся так далеко, что мои читатели просто их не видят!
Здравствуйте, Ольга! Воспользуйтесь плагинами Header and Footer http://pib9.ru/poleznoe/header-and-footer-kak-vstavit-kod-na-sajt.html или Post Layout http://pib9.ru/poleznoe/kak-vstavit-reklamu-na-sajt.html для вставки кнопок социальных сетей в конце статьи.