Панель с кнопками Google+1, Вконтакте и Twitter
В начале лета, компания Google разрешила размещать кнопку +1 на все сайты. Сегодня мы тоже создадим панельку с тремя социальными кнопками.
Размещение кнопок
Это первый этап, на котором мы должны взять коды каждой из трех кнопок, и поместить пока в текстовый файл на компьютере. - Берем код кнопки Google+1 Для этого заходим на Страницу выбора кнопки Настраиваем кнопку. Размер кнопки – выбираете размер кнопки, которая вам более предпочтительнее. Я выбрал кнопку стандартного размера (24 px). Язык – язык кнопки. Естественно выбираем родной русский. Расширенные настройки – думаю, этот пункт можно пропустить. Кнопка уже и так настроена (стоит счетчик, в этих настройках вы его можете убрать). Теперь копируем код, который нам показан на странице, и делаем по инструкции, которая, кстати, тоже там есть. <script type="text/javascript" src="https://apis.google.com/js/plusone.js"> {lang: 'ru'} </script> Размещаем в тегах <head></head> А этот код, пока копируем и вставляем в текстовый файл, потому что, далее мы его будем размещать в определенной панели.
1 <g:plusone></g:plusone>
- Берем код кнопки Вконтакте Идем по ссылке . Заполняем форму Название сайта – пишем, как называется ваш сайт. Адрес сайта – пишем URL сайта. Основной домен сайта – заполняется автоматически. Выбираем вид кнопки. Для себя выбрал: Кнопка с миниатюрным счётчиком. Более удобная, достаточно большая кнопка и счетчик. Теперь переходим к установке. По аналогии с кнопкой Google+1 код после
<!-- Put this script tag to the <head> of your page --> размещаем в тегах
<head></head>
а код после <!-- Put this div tag to the place, where the Like block will be --> пока копируем в текстовый файл, по той же причине. - Берем код кнопки Twitter Обычно, кнопку twitter размещают с помощью плагинов, в данном случае, плагин нам не подойдет. Около недели назад, я написал статью, как сделать кнопку retweet без использования плагина. Этим способом мы и воспользуемся. Зайдите на страницу Кнопка retweet без плагинов и реализовываем ее. После этого, два основных кода вывода вы также копируете в текстовый файл. Все три кнопки у нас уже готовы. Объединяем все кнопки в одну панель В общем, структура будет следующая <div class=”soc-button”> <--! Коды ваших кнопок--> </div> А в style.css прописать стили для класса soc-button. Если хотите рамку – пишите свойство border.
.soc-button{ border:1px #e5e5e5 solid; } В общем, ваша фантазия – красивая панелька.
Комментарии к статьеЕсли Вам понравилась эта статья или не понравилась напишите об этом в комментариях
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации. |