• Страница 1 из 2
  • 1
  • 2
  • »
Модератор форума: -SAM-  
Как сделать свои социальные кнопки на сайт
Kosten
Вторник, 22 Августа 2017, 15:34 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
Не могу понять, какие ссылки нужно прописывать в код, сам код представлю, возможно кому пригодиться, только там нет ссылок по открывание окна или переход поделиться. Вот хочется узнать что и какие ссылки ставить, проверил на окне, но там реально большие по знакам ссылки.

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



Код
<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 (6.5 Kb)
Страна: (RU)
Slavik
Вторник, 22 Августа 2017, 17:10 | Сообщение 2
Оффлайн
Vip
Сообщений:1767
Награды: 4
Цитата Kosten ()
Не могу понять, какие ссылки нужно прописывать в код, сам код представлю

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


Kentos311.uCoz.com - Добро пожаловать в мир читов!
Страна: (RU)
Kosten
Вторник, 22 Августа 2017, 21:42 | Сообщение 3
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
Slavik, про то какие ссылки ставить?
Страна: (RU)
Slavik
Вторник, 22 Августа 2017, 21:54 | Сообщение 4
Оффлайн
Vip
Сообщений:1767
Награды: 4
Kosten, Берешь, переходишь на сайт который я указал выше, там выбираешь иконку ту которую тебе нужно, дальше в этом коде замени
их class, со стандартными значениями.

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


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


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


Kentos311.uCoz.com - Добро пожаловать в мир читов!
Страна: (RU)
Kosten
Среда, 23 Августа 2017, 01:06 | Сообщение 5
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
Slavik, это все понятно, по шрифтовым иконкам нет вопроса, вопрос такой, там место для ссылок, как их можно социальных сетей взять, но чтоб по клику там окно появилось или на страницу поделиться выйти могло. То там # вместо ссылок установлен, просто не приходилось в ручную устанавливать.
Страна: (RU)
-SAM-
Среда, 23 Августа 2017, 06:04 | Сообщение 6
Оффлайн
Друзья сайта
Сообщений:896
Награды: 40
Kosten, можете посмотреть, как у вас в контейнере ссылки идут, что потом и туда подставить, используя переменные uCoz (на адрес страницы и ее заглавие). Есть много подобных сервисов, что используя api тех ресурсов отсылают им. У вас на сайте от Яндекса кнопки поделиться стоят. Да и, как мне кажется, смысла нет такое прописывать на сайте, по крайней мере, в таком формате - нужно запаковать в виде скрипта это всё, а не пихать довески такие в код, чтоб еще и индексировалось потом лишнее (и ссылки эти)... в общем, не советую ставить так. Скриптом, кстати, можно и адрес страницы документа и его заглавие выудить, а нее использовать переменные uCoz, чтобы потом всё это и запаковать в один скрипт и сжать.



Помог? Скажи спасибо в виде "+" - вам мелочь, а мне приятно.
Бесплатное оказание помощи в ответах на "Вопросы про uCoz".
Страна: (UA)
First-1
Среда, 23 Августа 2017, 09:11 | Сообщение 7
Оффлайн
Пользователи
Сообщений:716
Награды: 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"
Страна: (UA)
-SAM-
Среда, 23 Августа 2017, 09:38 | Сообщение 8
Оффлайн
Друзья сайта
Сообщений:896
Награды: 40
First, ты хоть понял чего выложил? Про rel="nofollow" тут писать не нужно, как и анкор заполнен не ссылкой (нет href). Это из разряда "слышал звон, да не понял, откуда он"... а всё потому, что нужно еще скрипт подключать помимо всего прочего.
Вот первые статейки из Google:
Доступно только для пользователей И под всем лишним я имел весь код на вывод этих кнопок, который полностью лишний в плане индексации.




Помог? Скажи спасибо в виде "+" - вам мелочь, а мне приятно.
Бесплатное оказание помощи в ответах на "Вопросы про uCoz".
Страна: (UA)
-SAM-
Среда, 23 Августа 2017, 10:16 | Сообщение 9
Оффлайн
Друзья сайта
Сообщений:896
Награды: 40
Ну и правильно про Хабрахабр упомянули в одной из статей, ссылку на которую дал, что введя в тот же Google запрос "Хабрахабр поделиться в соц. сетях" - выдаст еще темы, где этот вопрос разбирался (что свои кнопочки делали, да отправляли в share и принимали инфу оттуда по количеству уже добавленных страниц, счётчики). Доступно только для пользователей пример такой статейки. Это всё на любителя поковыряться рассчитано, что своё привыкли делать, а в большинстве случаев "изобретать велосипед" такой не станут - просто готовые сервисы использовать будут.



Помог? Скажи спасибо в виде "+" - вам мелочь, а мне приятно.
Бесплатное оказание помощи в ответах на "Вопросы про uCoz".
Страна: (UA)
-SAM-
Среда, 23 Августа 2017, 10:50 | Сообщение 10
Оффлайн
Друзья сайта
Сообщений:896
Награды: 40




Помог? Скажи спасибо в виде "+" - вам мелочь, а мне приятно.
Бесплатное оказание помощи в ответах на "Вопросы про uCoz".
Страна: (UA)
First-1
Среда, 23 Августа 2017, 11:03 | Сообщение 11
Оффлайн
Пользователи
Сообщений:716
Награды: 22
Цитата -SAM- ()
First, ты хоть понял чего выложил?

Не понял видно ты, а увидел только звон в моем посте, и дурака с меня делать не нужно. А дал в таком виде так как скрипт на тот шаблон, что кнопки он эти поставил давно уже есть, ещё с тех пор как ставил его.
Страна: (UA)
First-1
Среда, 23 Августа 2017, 11:26 | Сообщение 12
Оффлайн
Пользователи
Сообщений:716
Награды: 22
Достаточно тебе такого звона?
Страна: (UA)
First-1
Среда, 23 Августа 2017, 11:34 | Сообщение 13
Оффлайн
Пользователи
Сообщений:716
Награды: 22
Цитата -SAM- ()
анкор заполнен не ссылкой (нет href)

Не смеши. Тут мы получаем параметры через data
Страна: (UA)
Kosten
Среда, 23 Августа 2017, 14:51 | Сообщение 14
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
First, поставил, все работает, но только на одну социальную сеть в контакте.

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

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


Но есть как First сделал, что поставил в контакте и нормально в небольшом окне идет.
Страна: (RU)
  • Страница 1 из 2
  • 1
  • 2
  • »
Поиск: