X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> Кнопки "поделиться новостью", Симпатичные кнопки "рассказать друзьям"
bifot
bifot
Topic Starter сообщение 10.9.2013, 20:08; Ответить: bifot
Сообщение #1


Участник
***

Группа: User
Сообщений: 217
Регистрация: 30.5.2013
Поблагодарили: 49 раз
Репутация:   3  


Всем привет! Увидел я красивые кнопки, чуток их заменил и сегодня от "нечего делать" я сделал вот такие кнопки, сначала хотел делать на share42, а потом передумал и сделал с помощью api яндекса. Да, я знаю что здесь выкладывались кнопки, но эти с другим дизайном.

Я выкладываю на всеобщее обозрение "кнопки поделиться". Там есть "facebook", "vk", "twitter", "Мой мир", "Одноклассники", "Google Plus". Эти кнопки замечательны тем, что они аккуратные, красивые, не занимают много кода.

Скачать | Демо

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

Добавляем вот такой css код к себе на страницу..

b-share-icon {
    width: 32px !important;
    height: 32px !important;
    background: url(icons.png) no-repeat scroll 0px 0px transparent !important;
}
.b-share-icon_vkontakte  {
        background-position: -96px 0px !important;
}
.b-share-icon_moimir {
    background-position: -128px 0px !important;
}
.b-share-icon_odnoklassniki {
    background-position: 0px 0px !important;
}
.b-share-icon_twitter {
    background-position: -32px 0px !important;
}
.b-share-icon_facebook  {
    background-position: -64px 0px !important;
}
.b-share-icon_gplus  {
    background-position: -160px 0px !important;
}


А продолжим мы html кодом.. Это див, из-за которого все и генерируется.

<div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="none" data-yashareQuickServices="odnoklassniki,twitter,facebook,vkontakte,moimir,gplus"></div>


Осталось подключить JS и все, мы сделаем наши кнопки! Подключаем скрипт от "Яндекса".
<script type="text/javascript" src="http://yandex.st/share/share.js" charset="utf-8"></script>




Материал с сайта bifot.ru


Сообщение отредактировал lostprophet - 14.9.2013, 12:34
Причина редактирования: По просьбе ТС


--------------------
веб-мастер, с радостью адаптирую Ваши сайты под мобильные устройства

портфолио/прайс/отзывы, вконтакте


Поблагодарили: (4)
5
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
profican
profican
сообщение 10.9.2013, 21:04; Ответить: profican
Сообщение #2


Старожил
******

Группа: Active User
Сообщений: 1242
Регистрация: 30.6.2010
Поблагодарили: 294 раза
Репутация:   36  


Надо ли понимать, что если рухнет сайт http://yandex.st, то кнопки пропадут? facepalm.gif
Что не есть гуд, ИМХО.


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
bifot
bifot
Topic Starter сообщение 10.9.2013, 21:13; Ответить: bifot
Сообщение #3


Участник
***

Группа: User
Сообщений: 217
Регистрация: 30.5.2013
Поблагодарили: 49 раз
Репутация:   3  


(profican @ 10.9.2013, 20:04) *
рухнет сайт http://yandex.st

Надо же понимать, что это сайт никого-то школьника на укозе. Яндекс крупная компания, у них на вряд ли упадет, но если упадет, то не на долго. nea.gif


--------------------
веб-мастер, с радостью адаптирую Ваши сайты под мобильные устройства

портфолио/прайс/отзывы, вконтакте
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
lifeout
lifeout
сообщение 11.9.2013, 22:40; Ответить: lifeout
Сообщение #4


Участник
***

Группа: User
Сообщений: 131
Регистрация: 25.7.2010
Поблагодарили: 24 раза
Репутация:   4  


Да вы шутите... smile.gif подключать 50кб скрипта для того, чтобы заставить работать шаринг на пять соцсетей?)


--------------------
<aside>Верстаю</aside>


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
unical
unical
сообщение 11.9.2013, 23:00; Ответить: unical
Сообщение #5


Участник
***

Группа: User
Сообщений: 216
Регистрация: 17.5.2013
Поблагодарили: 31 раз
Репутация:   18  


замечательны тем, что они аккуратные, красивые, не занимают много кода

Ну это да. А не проще самому подобное сделать?


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
bifot
bifot
Topic Starter сообщение 12.9.2013, 15:02; Ответить: bifot
Сообщение #6


Участник
***

Группа: User
Сообщений: 217
Регистрация: 30.5.2013
Поблагодарили: 49 раз
Репутация:   3  


(lifeout @ 11.9.2013, 21:40) *
подключать 50кб

Понимаете, не я это придумал. Скрипт если вам так важно, можно вырезать там только то, что нужно вам.. И в данном скрипте не играет никакой роли кол-во кнопок.


--------------------
веб-мастер, с радостью адаптирую Ваши сайты под мобильные устройства

портфолио/прайс/отзывы, вконтакте
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
bifot
bifot
Topic Starter сообщение 12.9.2013, 15:02; Ответить: bifot
Сообщение #7


Участник
***

Группа: User
Сообщений: 217
Регистрация: 30.5.2013
Поблагодарили: 49 раз
Репутация:   3  


Дорогие друзья, оценивать сам скрипт смысла не имеет, т. к. не я создатель, а яндекс. Сделал я кнопочки...)

Сообщение отредактировал bifot - 12.9.2013, 15:03


--------------------
веб-мастер, с радостью адаптирую Ваши сайты под мобильные устройства

портфолио/прайс/отзывы, вконтакте
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
lifeout
lifeout
сообщение 12.9.2013, 20:22; Ответить: lifeout
Сообщение #8


Участник
***

Группа: User
Сообщений: 131
Регистрация: 25.7.2010
Поблагодарили: 24 раза
Репутация:   4  


Ну как же нет смысла оценивать? Вы же черным по белому пишете:

(bifot @ 10.9.2013, 19:08) *
Эти кнопки замечательны тем, что они аккуратные, красивые, не занимают много кода.


--------------------
<aside>Верстаю</aside>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
bifot
bifot
Topic Starter сообщение 13.9.2013, 14:22; Ответить: bifot
Сообщение #9


Участник
***

Группа: User
Сообщений: 217
Регистрация: 30.5.2013
Поблагодарили: 49 раз
Репутация:   3  


lifeout, Ну да, место много не занимает. Я не могу оценить чужой скрипт? Давайте не оффтопть. popcorn2.gif Если есть вопросы - в лс.


--------------------
веб-мастер, с радостью адаптирую Ваши сайты под мобильные устройства

портфолио/прайс/отзывы, вконтакте
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
asusa3a
asusa3a
сообщение 13.9.2013, 16:06; Ответить: asusa3a
Сообщение #10


Завсегдатай
*****

Группа: Active User
Сообщений: 630
Регистрация: 31.8.2012
Из: Россия
Поблагодарили: 148 раз
Репутация:   29  


Кнопку гугл +1 забыли)


--------------------
Лучшие сервера под кино сайты и не только здесь

Есть трафик? Не знаете как его лучше монетезировать? Загляните в мою тему на мауле [Личный опыт со скринами!]


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
2 страниц V   1 2 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Новости mail.ru появятся в "рекомендациях" Вконтакте?
19 eduarddis 2790 12.12.2017, 20:37
автор: galikfor
Открытая тема (нет новых ответов) Имеет ли смысл такое "присоединение сайтов"?
перенести все статьи на свой сайт, а с прежнего поставить 301 редирект
9 coremission 1089 11.12.2017, 16:32
автор: One_on_One
Открытая тема (нет новых ответов) Переводчик по тематике "Арбитраж трафика, партнерки и т.п." на постоянную основу
1 kuprum 369 9.12.2017, 17:02
автор: pishu-text
Открытая тема (нет новых ответов) Куплю "вечные URL" с ваших сайтов с тематикой - Пластиковые Окна!
0 regem 452 5.12.2017, 3:47
автор: regem
Горячая тема (нет новых ответов) Сайт "под ключ" с полной внутренней оптимизацией бесплатно
72 Dr_Tapac 28881 30.11.2017, 21:17
автор: Dr_Tapac


 



RSS Текстовая версия Сейчас: 16.12.2017, 3:34
Дизайн