Главная  Отзывы  WarFace   Clash of Clans   World of Tanks   AimJunkies


Страница 1 из 11
Форум » О uCoz » Скрипты » Кнопка "Поделиться" через социальные сети
Кнопка "Поделиться" через социальные сети

Andrey


Дата: Воскресенье, 22.12.2013, 17:10:33 | Сообщение # 1
Проверенные
Сообщений: 283
Статус: Offline
3

Нет наград

Кнопка сочетающая в себе четыре кнопки для возможности поделиться веб-страницей с пользователями социальных сетей. В качестве иконок используется шрифт FontAwesome. Останется лишь прикрутить линки на сами сервисы.

Для начала смотрим мой тест на Фидле

Сначала подключаем CSS стили отвечающие изображение иконок, между <head> и </head> прописываем:
Код
<link type="text/css" rel="StyleSheet" href="/icon/style.css" />


Теперь где хотите наши кнопки нужно прописать один из 15-ти. предложенных вариантов:
Код
<div class="cell ">
      <div class="share-wrapper left">
        <div class="rc10 share-action icon-share"></div>
        <div class="share-container rc10">
          <a class="share-btn tl icon-google-plus" href='#'></a>     
          <a class="share-btn tr icon-twitter" href='#'></a>     
          <a class="share-btn br icon-facebook" href='#'></a>     
          <a class="share-btn bl icon-pinterest" href='#'></a>     
        </div>
      </div>
</div>
<!-- -------- -->
<div class="cell ">
      <div class="share-wrapper top">
        <div class="rc10 share-action icon-share"></div>
        <div class="share-container rc10">
          <a class="share-btn tl icon-google-plus" href='#'></a>     
          <a class="share-btn tr icon-twitter" href='#'></a>     
          <a class="share-btn br icon-facebook" href='#'></a>     
          <a class="share-btn bl icon-pinterest" href='#'></a>     
        </div>
      </div>
</div>
<!-- -------- -->
<div class="cell">
      <div class="share-wrapper below">
        <div class="rc10 share-action icon-share"></div>
        <div class="share-container rc10 ">
          <a class="share-btn tl icon-google-plus" href='#'></a>     
          <a class="share-btn tr icon-twitter" href='#'></a>     
          <a class="share-btn br icon-facebook" href='#'></a>     
          <a class="share-btn bl icon-pinterest" href='#'></a>     
        </div>
      </div>
</div>
<!-- -------- -->
<div class="cell ">
      <div class="share-wrapper bottom">
        <div class="rc10 share-action icon-share"></div>
        <div class="share-container rc10">
          <a class="share-btn tl icon-google-plus" href='#'></a>     
          <a class="share-btn tr icon-twitter" href='#'></a>     
          <a class="share-btn br icon-facebook" href='#'></a>     
          <a class="share-btn bl icon-pinterest" href='#'></a>     
        </div>
      </div>
</div>
<!-- -------- -->
<div class="cell ">
      <div class="share-wrapper right">
        <div class="rc10 share-action icon-share"></div>
        <div class="share-container rc10">
          <a class="share-btn tl icon-google-plus" href='#'></a>     
          <a class="share-btn tr icon-twitter" href='#'></a>     
          <a class="share-btn br icon-facebook" href='#'></a>     
          <a class="share-btn bl icon-pinterest" href='#'></a>     
        </div>
      </div>
</div>
   <!-- -------- -->
<div class="cell ">
      <div class="share-wrapper left">
        <div class="share-action icon-share"></div>
        <div class="share-container">
          <a class="share-btn tl icon-google-plus" href='#'></a>     
          <a class="share-btn tr icon-twitter" href='#'></a>     
          <a class="share-btn br icon-facebook" href='#'></a>     
          <a class="share-btn bl icon-pinterest" href='#'></a>     
        </div>
      </div>
</div>
<!-- -------- -->
<div class="cell ">
      <div class="share-wrapper top">
        <div class="share-action icon-share"></div>
        <div class="share-container">
          <a class="share-btn tl icon-google-plus" href='#'></a>     
          <a class="share-btn tr icon-twitter" href='#'></a>     
          <a class="share-btn br icon-facebook" href='#'></a>     
          <a class="share-btn bl icon-pinterest" href='#'></a>     
        </div>
      </div>
</div>
<!-- -------- -->
<div class="cell ">
      <div class="share-wrapper below">
        <div class="share-action icon-share"></div>
        <div class="share-container">
          <a class="share-btn tl icon-google-plus" href='#'></a>     
          <a class="share-btn tr icon-twitter" href='#'></a>     
          <a class="share-btn br icon-facebook" href='#'></a>     
          <a class="share-btn bl icon-pinterest" href='#'></a>     
        </div>
      </div>
</div>
<!-- -------- -->
<div class="cell ">
      <div class="share-wrapper bottom">
        <div class="share-action icon-share"></div>
        <div class="share-container">
          <a class="share-btn tl icon-google-plus" href='#'></a>     
          <a class="share-btn tr icon-twitter" href='#'></a>     
          <a class="share-btn br icon-facebook" href='#'></a>     
          <a class="share-btn bl icon-pinterest" href='#'></a>     
        </div>
      </div>
</div>
<!-- -------- -->
<div class="cell ">
      <div class="share-wrapper right">
        <div class="share-action icon-share"></div>
        <div class="share-container">
          <a class="share-btn tl icon-google-plus" href='#'></a>     
          <a class="share-btn tr icon-twitter" href='#'></a>     
          <a class="share-btn br icon-facebook" href='#'></a>     
          <a class="share-btn bl icon-pinterest" href='#'></a>     
        </div>
      </div>
</div>
<!-- -------- -->
<div class="cell ">
      <div class="share-wrapper left">
        <div class="rc50 share-action icon-share"></div>
        <div class="share-container rc50">
          <a class="share-btn tl icon-google-plus" href='#'></a>     
          <a class="share-btn tr icon-twitter" href='#'></a>     
          <a class="share-btn br icon-facebook" href='#'></a>     
          <a class="share-btn bl icon-pinterest" href='#'></a>     
        </div>
      </div>
</div>
<!-- -------- -->
<div class="cell ">
      <div class="share-wrapper top">
        <div class="rc50 share-action icon-share"></div>
        <div class="share-container rc50">
          <a class="share-btn tl icon-google-plus" href='#'></a>     
          <a class="share-btn tr icon-twitter" href='#'></a>     
          <a class="share-btn br icon-facebook" href='#'></a>     
          <a class="share-btn bl icon-pinterest" href='#'></a>     
        </div>
      </div>
</div>
   <!-- -------- -->
<div class="cell">
      <div class="share-wrapper below">
        <div class="rc50 share-action icon-share"></div>
        <div class="share-container rc50">
          <a class="share-btn tl icon-google-plus" href='#'></a>     
          <a class="share-btn tr icon-twitter" href='#'></a>     
          <a class="share-btn br icon-facebook" href='#'></a>     
          <a class="share-btn bl icon-pinterest" href='#'></a>     
        </div>
      </div>
</div>
<!-- -------- -->
<div class="cell ">
      <div class="share-wrapper bottom">
        <div class="rc50 share-action icon-share"></div>
        <div class="share-container rc50">
          <a class="share-btn tl icon-google-plus" href='#'></a>     
          <a class="share-btn tr icon-twitter" href='#'></a>     
          <a class="share-btn br icon-facebook" href='#'></a>     
          <a class="share-btn bl icon-pinterest" href='#'></a>     
        </div>
      </div>
</div>
   <!-- -------- -->
<div class="cell ">
      <div class="share-wrapper right">
        <div class="rc50 share-action icon-share"></div>
        <div class="share-container rc50">
          <a class="share-btn tl icon-google-plus" href='#'></a>     
          <a class="share-btn tr icon-twitter" href='#'></a>     
          <a class="share-btn br icon-facebook" href='#'></a>     
          <a class="share-btn bl icon-pinterest" href='#'></a>     
        </div>
      </div>
</div>

Чтоб вам было проще выбрать нужную кнопку я их поделил с помощью <!-- -------- -->

И завершающая часть установки это прописать CSS стиль наших кнопок:
Код
.share-wrapper,
.share-action {
    width: 32px;
    height: 32px;
}
.share-wrapper {
    font: 14px, 'FontAwesome';
    position: relative;
    text-align: center;
}
.share-container {
    margin-left: 0px;
    margin-top:  0px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(.05,.93,.61,1.6);
    box-shadow: 0px 0px 20px -5px rgba(0, 0, 0, 0.5);
    width: 0px;
    height: 0px;
    background: #fff;
}
.share-action:hover ~ .share-container,
.share-container:hover {
    width: 100px;
    height: 100px;
     
    overflow: visible;
}
.share-container:after,
.share-container:before {
    position: absolute;
    background:  linear-gradient(rgba(136, 221, 255, 0.5) 0%, rgba(34, 153, 221, 0.5) 50%, rgba(136, 221, 255, 0.5) 100%);
    z-index:4;
    margin: 0;
    transition: all 0.5s ease-in-out;
    content: '';
}
.share-container:before {
    background:  linear-gradient(left, rgba(136, 221, 255, 0.5) 0%, rgba(34, 153, 221, 0.5) 50%, rgba(136, 221, 255, 0.5) 100%);
    height: 1px;
    margin: 50% 50%;
    width: 0%;
}
.share-action:hover ~ .share-container:before,
.share-container:hover:before {
    width: 85%;
    left: 0px;
    margin: 50% 7%;
}
.share-container:after {
    left: -1px;
    height: 0%;
    width: 1px;
    margin: 50% 50%;
}
.share-action:hover ~ .share-container:after,
.share-container:hover:after {
    height: 85%;
    margin: 7% 50%;
}
.share-action {
    display: inline-block;
    vertical-align: middle;
    z-index: 5;
    position: relative;
    background: linear-gradient(#8df 0%, #29d 100%);
    box-shadow: 0 1px 5px rgba(255, 255, 255, 0.5) inset, 0 0 0px 1px rgba(33, 112, 178, 0.5);
    line-height: 33px;
    color: #fff;
}
.share-btn {
    display:inline-block;
    width: 49%;
    height: 49%;
    position: absolute;
    z-indez:1;
    border-color: #92888f;
    border-style: solid;
    border-width: 0;
    font-size: 0px;
    color: #777777;
    overflow: hidden;
}
.share-action:hover ~ .share-container .share-btn ,
.share-container:hover .share-btn  {
    overflow: visible;
    font-size: 25px;
}
.share-btn:hover {
    background:linear-gradient(#8df 0%, #29d 100%);
    color: #ffffff;
    text-shadow: 0 -1px #4298e0;
}
.share-btn.tl {
    right: 50%;
    bottom: 50%;
}
.share-btn.tr {
    left: 50%;
    bottom: 50%;
}
.share-btn.br {
    left: 50%;
    top: 50%;
}
.share-btn.bl {
    right: 50%;
    top: 50%;
}
.share-btn {
    line-height: 50px;
}
.rc50 {
    border-radius: 50%;
}
.rc50 .share-btn.tl {
    border-top-left-radius: 100%;
}
.rc50 .share-btn.tr {
    border-top-right-radius: 100%;
}
.rc50 .share-btn.br {
    border-bottom-right-radius: 100%;
}
.rc50 .share-btn.bl {
    border-bottom-left-radius: 100%;
}
.rc50.share-container .share-btn.tl {
    text-indent: 5px;
    line-height: 55px;
}
.rc50.share-container .share-btn.tr {
    line-height: 50px;
}
.rc50.share-container .share-btn.br {
    line-height: 46px;
    text-indent: -2px;
}
.rc50.share-container .share-btn.bl {
    text-indent: 2px;
    line-height: 47px;
}
.rc10 {
    border-radius: 10%;
}
.below .share-btn.tl,
.rc10 .share-btn.tl {
    line-height: 50px;
}
.below .share-btn.tr,
.rc10 .share-btn.tr {
    line-height: 45px;
    text-indent: 3px;
}
.below .share-btn.br,
.rc10 .share-btn.br {
    line-height: 50px;
}
.below .share-btn.bl,
.rc10 .share-btn.bl {
    text-indent: -2px;
    line-height: 55px;
}
.rc10 .share-btn.tl {
    border-top-left-radius: 20%;
}
.rc10 .share-btn.tr {
    border-top-right-radius: 20%;
}
.rc10 .share-btn.br {
    border-bottom-right-radius: 20%;
}
.rc10 .share-btn.bl {
    border-bottom-left-radius: 20%;
}
     
/** positions **/
     
.below.share-wrapper {
    margin: 50% auto;
    top: -16px;
}
.bottom.share-wrapper {
    margin: 25% auto 0;
}
.top.share-wrapper {
    margin: 65% auto 0;
}
.left.share-wrapper {
    margin: 50% 0 0 65%;
    top: -16px;
}
.right.share-wrapper {
    margin: 50% 0 0 25%;
    top: -16px;
}
.below .share-container {
    position: absolute;
    top: 50%;
    left: 50%;
}
.bottom .share-container,
.top .share-container {
    position: absolute;
    top: 0%;
    left: 0%;
}
.left .share-container,
.right .share-container {
    position: absolute;
    top: 0%;
    right: 50%;
}
.bottom .share-action:hover ~ .share-container .share-btn:nth-child(1):after,
.bottom .share-container:hover .share-btn:nth-child(1):after {
    content: '';
    border: 11px solid transparent;
    border-bottom-color: #fff;
    border-top: none;
    width: 0;
    height: 0;
    position: absolute;
    left: 100%;
    margin-left: -11px;
    margin-top: -11px;
}
.top .share-action:hover ~ .share-container .share-btn:nth-child(4):after,
.top .share-container:hover .share-btn:nth-child(4):after {
    content: '';
    border: 11px solid transparent;
    border-top-color: #fff;
    border-bottom: none;
    width: 0;
    height: 0;
    position: absolute;
    left: 100%;
    top: 100%;
    margin-left: -11px;
}
.left .share-action:hover ~ .share-container .share-btn:nth-child(2):after,
.left .share-container:hover .share-btn:nth-child(2):after {
    content: '';
    border: 11px solid transparent;
    border-left-color: #fff;
    border-right: none;
    width: 0;
    height: 0;
    position: absolute;
    left: 100%;
    top: 100%;
    margin-top: -11px;
}
.right .share-action:hover ~ .share-container .share-btn:nth-child(1):after,
.right .share-container:hover .share-btn:nth-child(1):after {
    content: '';
    border: 11px solid transparent;
    border-right-color: #fff;
    border-left: none;
    width: 0;
    height: 0;
    position: absolute;
    right: 100%;
    top: 100%;
    margin-top: -11px;
}
.left .share-action:hover:after,
.right .share-action:hover:after,
.bottom .share-action:hover:after,
.top .share-action:hover:after {
    position: absolute;
    content: '';
    z-index: 1;   
}
.bottom .share-action:hover:after,
.top .share-action:hover:after {
    width: 200%;
    height: 20px;
    left: -50%;
    top: 100%;
}
.top .share-action:hover:after {
    top: auto;
    bottom: 100%;
    left: -50%;     
}
.left .share-action:hover:after {
    left: auto;
    width: 20px;
    height: 200%;   
    top: -50%;
    right: 100%;
}
.right .share-action:hover:after {
    top: -50%;
    left: 100%;
    width: 20px;
    height: 200%;   
}
.below .share-container,
.top .share-container,
.right .share-container,
.bottom .share-container {
    top : 0%;
    left: 50%;
}
.left .share-container {
    top : 0%;
    right: 50%;
}
.below .share-action:hover ~ .share-container,
.below .share-container:hover {
    top: -100%;
    left: -100%;
}
.bottom .share-action:hover ~ .share-container,
.bottom .share-container:hover {
    margin-left: 0px;
    left: -100%;
    top: 50px;
}
.top .share-action:hover ~ .share-container,
.top .share-container:hover {
    margin-left: 0px;
    left: -100%;
    top: -120px;
}
.left .share-action:hover ~ .share-container,
.left .share-container:hover {
    margin-right: 20px;
    right: 100%;
    top: -100%;
}
.right .share-action:hover ~ .share-container,
.right .share-container:hover {
    margin-left: 20px;
    left: 100%;
    top: -100%;
}
.bottom .rc10 .share-btn {
    text-indent: 0;
    line-height: 50px;    
}
.bottom .share-container .share-btn.tl {
    line-height: 55px;    
}


Прикреплённый ниже архив залить на хост в папку "icon"

Вот и всё!

Материал подготовил: Andrey


7882017.png(6Kb) · icon.rar(1Kb)
Форум » О uCoz » Скрипты » Кнопка "Поделиться" через социальные сети
Страница 1 из 11
Поиск: