чтение rss ленты

Nulls.su

Здесь обезаельно что то появиться 8)

Панель с кнопками 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;
}

В общем, ваша фантазия – красивая панелька.


 
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем
Другие новости по теме:
 (голосов: 0)
  • Просмотров: 759
  • Комментариев: 3

Комментарии к статье

Если Вам понравилась эта статья или не понравилась напишите об этом в комментариях
15 ноября 2011 13:01 Группа: Посетители Репутация: (0|0|0) 1
Да мне понравилось!!!
27 января 2012 19:21 Группа: Посетители Репутация: (0|0|0) 2
спасибо. мне было полезно
29 января 2012 16:16 Группа: Посетители Репутация: (0|0|0) 3
А как сделать такую панель для сайта на joomla?
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Переместиться наверх

nulls.su

Внимание, вся информация размещена на сайте пользователями, поэтому владельцы сайта не несут ответственности за правдивость, валидность, степень контрафактности. Если вы считаете что информация размещена неправомерно, сообщите пожалуйста в службу поддержки и информация будет незамедлительно удалена. Вся информация размещена на основании соглашения
Шаблон разработан студией CENTROARTS