Страница 1 из 212»
Форум про uCoz » Раздел для uCoz » Вопросы по uCoz » Как сделать свои социальные кнопки на сайт
Как сделать свои социальные кнопки на сайт
Kosten
Дата: Вторник, 22.08.2017, 15:34 | Сообщение # 1
Администраторы
Сообщений:15290
Награды: 50


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

Вот такие кнопки под шрифтовые иконки.



Код
<ul class="social-list">
<li>
<a href="#"><span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-vk fa-stack-1x"></i>
</span></a>
</li>
<li>
<a href="#"><span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x"></i>
</span></a>
</li>
<li>
<a href="#"><span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-google-plus fa-stack-1x"></i>
</span></a>
</li>
<li>
<a href="#"><span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span></a>
</li>
<li>
<a href="#"><span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-instagram fa-stack-1x"></i>
</span></a>
</li>
</ul>
Прикрепления: 2147267.png(7Kb)
Страна: (RU)
Slavik
Дата: Вторник, 22.08.2017, 17:10 | Сообщение # 2
Гл. Модератор
Сообщений:1698
Награды: 3


Цитата Kosten ()
Не могу понять, какие ссылки нужно прописывать в код, сам код представлю

Это Material Design Iconic Font можешь выбрать любую иконку, и установить в этот код, код простой и понятный.


MIR-HACK.RU - Добро пожаловать в мир читов!
Страна: (RU)
Kosten
Дата: Вторник, 22.08.2017, 21:42 | Сообщение # 3
Администраторы
Сообщений:15290
Награды: 50


Slavik, про то какие ссылки ставить?
Страна: (RU)
Slavik
Дата: Вторник, 22.08.2017, 21:54 | Сообщение # 4
Гл. Модератор
Сообщений:1698
Награды: 3


Kosten, Берешь, переходишь на сайт который я указал выше, там выбираешь иконку ту которую тебе нужно, дальше в этом коде замени
их class, со стандартными значениями.

Пример твой:
Код
<i class="fa fa-vk fa-stack-1x"></i>


Замена на:
Код
<i class="zmdi zmdi-group-1x"></i>


Где "замена на", взято с того сайта код иконки, и я подставил -1x
Вроде должно работать, я на своем SourceBans ставил, всё работает по сейчас, тут не знаю как на юкозе будет). В любом случаи должно работать 09a


MIR-HACK.RU - Добро пожаловать в мир читов!
Страна: (RU)
Kosten
Дата: Среда, 23.08.2017, 01:06 | Сообщение # 5
Администраторы
Сообщений:15290
Награды: 50


Slavik, это все понятно, по шрифтовым иконкам нет вопроса, вопрос такой, там место для ссылок, как их можно социальных сетей взять, но чтоб по клику там окно появилось или на страницу поделиться выйти могло. То там # вместо ссылок установлен, просто не приходилось в ручную устанавливать.
Страна: (RU)
-SAM-
Дата: Среда, 23.08.2017, 06:04 | Сообщение # 6
Проверенные
Сообщений:242
Награды: 14


Kosten, можете посмотреть, как у вас в контейнере ссылки идут, что потом и туда подставить, используя переменные uCoz (на адрес страницы и ее заглавие). Есть много подобных сервисов, что используя api тех ресурсов отсылают им. У вас на сайте от Яндекса кнопки поделиться стоят. Да и, как мне кажется, смысла нет такое прописывать на сайте, по крайней мере, в таком формате - нужно запаковать в виде скрипта это всё, а не пихать довески такие в код, чтоб еще и индексировалось потом лишнее (и ссылки эти)... в общем, не советую ставить так. Скриптом, кстати, можно и адрес страницы документа и его заглавие выудить, а нее использовать переменные uCoz, чтобы потом всё это и запаковать в один скрипт и сжать.

Страна: (UA)
First
Дата: Среда, 23.08.2017, 09:11 | Сообщение # 7
Модераторы
Сообщений:678
Награды: 22


Цитата Kosten ()
Не могу понять, какие ссылки нужно прописывать в код

Код
<li>
<a class="social_share vk" data-type="vk" rel="nofollow"><span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-vk fa-stack-1x"></i>
</span></a>
</li>

Цитата -SAM- ()
чтоб еще и индексировалось потом лишнее

Код
rel="nofollow"


CSTET.RU - Всё для CS:S и CS:GO
Страна: (UA)
-SAM-
Дата: Среда, 23.08.2017, 09:38 | Сообщение # 8
Проверенные
Сообщений:242
Награды: 14


First, ты хоть понял чего выложил? Про rel="nofollow" тут писать не нужно, как и анкор заполнен не ссылкой (нет href). Это из разряда "слышал звон, да не понял, откуда он"... а всё потому, что нужно еще скрипт подключать помимо всего прочего.
Вот первые статейки из Google:
Доступно только для пользователей И под всем лишним я имел весь код на вывод этих кнопок, который полностью лишний в плане индексации.


Страна: (UA)
-SAM-
Дата: Среда, 23.08.2017, 10:16 | Сообщение # 9
Проверенные
Сообщений:242
Награды: 14


Ну и правильно про Хабрахабр упомянули в одной из статей, ссылку на которую дал, что введя в тот же Google запрос "Хабрахабр поделиться в соц. сетях" - выдаст еще темы, где этот вопрос разбирался (что свои кнопочки делали, да отправляли в share и принимали инфу оттуда по количеству уже добавленных страниц, счётчики). Доступно только для пользователей пример такой статейки. Это всё на любителя поковыряться рассчитано, что своё привыкли делать, а в большинстве случаев "изобретать велосипед" такой не станут - просто готовые сервисы использовать будут.

Страна: (UA)
-SAM-
Дата: Среда, 23.08.2017, 10:50 | Сообщение # 10
Проверенные
Сообщений:242
Награды: 14




Страна: (UA)
First
Дата: Среда, 23.08.2017, 11:03 | Сообщение # 11
Модераторы
Сообщений:678
Награды: 22


Цитата -SAM- ()
First, ты хоть понял чего выложил?

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


CSTET.RU - Всё для CS:S и CS:GO
Страна: (UA)
First
Дата: Среда, 23.08.2017, 11:26 | Сообщение # 12
Модераторы
Сообщений:678
Награды: 22


Достаточно тебе такого звона?


CSTET.RU - Всё для CS:S и CS:GO
Страна: (UA)
First
Дата: Среда, 23.08.2017, 11:34 | Сообщение # 13
Модераторы
Сообщений:678
Награды: 22


Цитата -SAM- ()
анкор заполнен не ссылкой (нет href)

Не смеши. Тут мы получаем параметры через data


CSTET.RU - Всё для CS:S и CS:GO
Страна: (UA)
Kosten
Дата: Среда, 23.08.2017, 14:51 | Сообщение # 14
Администраторы
Сообщений:15290
Награды: 50


First, поставил, все работает, но только на одну социальную сеть в контакте.

Также не хватала класса style="cursor:pointer;" это что отвечает за клик при наведение, если у кого нет этого эффекта, то вот статья как поставить.
Страна: (RU)
Kosten
Дата: Среда, 23.08.2017, 15:03 | Сообщение # 15
Администраторы
Сообщений:15290
Награды: 50


Можно такие ссылки поставить, то там полностью окно открывается.

Код
http://www.facebook.com/sharer.php?s=100


Но есть как First сделал, что поставил в контакте и нормально в небольшом окне идет.
Страна: (RU)
Форум про uCoz » Раздел для uCoz » Вопросы по uCoz » Как сделать свои социальные кнопки на сайт
Страница 1 из 212»
Поиск: