Социальные сети поделиться
2016-07-22
Александр Серенко
Кнопки поделиться для соц. сетей.
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') }}">
- Добавить 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>
- Добавить спец. мета теги
{% 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 %}
- Радоваться
добавьте свой комментарий