Социальные сети поделиться

Кнопки поделиться для соц. сетей.

1 Скачать компонент social-likes

bower install --save social-likes

2 Подключить к на странице

<script src="{{ asset('components/social-likes/dist/social-likes.min.js') }}"></script>

2* Добавить CSS|LESS для если планируется интеграция с Font-awsome

Создать файл social-likes.less с содержимым:

    .social-likes {

        &__icon {
            display: inline-block;
            font: normal normal normal 14px/1 FontAwesome;
            font-size: inherit;
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            cursor: pointer;

            &_facebook:before {
              content: "\f09a";
            }
            &_twitter:before {
              content: "\f099";
            }
            &_mailru:before {
              content: "\f0d5";
            }
            &_vkontakte:before {
              content: "\f189";
            }
            &_odnoklassniki:before {
              content: "\f263";
            }
            &_plusone:before {
              content: "\f0d5";
            }
            &_pinterest:before {
              content: "\f0d2";
            } 
          }


          &_cycle &__icon {
            width: 40px;
            height: 40px;
            line-height: 40px;
            vertical-align: middle;
            text-align: center;
            .border-radius(5px);
            background-color: #337ab7;
            color: #fff;
            margin-right: 6px;
          }

      &_cycle &__icon:last-child,
      .lt-ie9 &_cycle &__icon._last {
        margin-right: 0;
      }

      &_cycle &__icon:hover {
        background-color: lighten(#337ab7, 5%);
      }

      &_follow-me {
        overflow: hidden;
      }
      &_follow-me &__button  {
        display: block;
        width: 16.6%;
        float: left;
        text-align: center;
      }

      &_follow-me &__icon {
        width: 30px;
        height: 30px;
        line-height: 30px;
      }
      @media (min-width: @screen-xs-min) {
        &_follow-me &__icon {
          width: 40px;
          height: 40px;
          line-height: 40px;
        }
      }
      @media (min-width: @screen-sm-min) {

      }
      @media (min-width: @screen-md-min) {
        &_follow-me &__icon {
          width: 30px;
          height: 30px;
          line-height: 30px;
        }
      }
      @media (min-width: @screen-lg-min) {
        &_follow-me &__icon {
          width: 40px;
          height: 40px;
          line-height: 40px;
        }
      }
    }

Убедиться, что на странице подключен Font-awesome, если его нет, то установить:

bower install --save font-awesome

<link rel="stylesheet" href="{{ asset('components/font-awesome/css/font-awesome.min.css') }}">

3. Добавить HTML код

<div class="social-likes social-likes_cycle" data-counters="no">
            <span class="vkontakte _first"></span>
            <span class="facebook"></span>
            <span class="odnoklassniki"></span>
            <span class="twitter"></span>
            <span class="plusone"></span>
            <span class="pinterest _last"></span>
</div>

4. Добавить спец. мета теги

{% set previewUrl = post.image ? vich_uploader_asset(post, 'imageFile')|imagine_filter('post_preview') : asset('images/post/default/photo.jpg') %}

{% block meta_description %}{{ post.lead|e }}{% endblock %}
{% block meta_keywords %}{{ post.title|e }}, общественная приемная, Единая Россия, Д.А. Медведев{% endblock %}
{% block meta_og_title %}{{ post.title|e }}{% endblock %}
{% block meta_og_type %}article{% endblock %}
{% block meta_og_url %}{{ app.request.uri }}{% endblock %}
{% block meta_og_img %}{{ previewUrl }}{% endblock %}
{% block meta_og_img_type %}image/jpeg{% endblock %}
{% block meta_og_img_width %}600{% endblock %}
{% block meta_og_img_height %}360{% endblock %}
{% block meta_og_description %}{{ post.lead|e }}{% endblock %}

5. Радоваться