Простые кнопки репоста на сайт

Простые кнопки репоста на сайт

Кнопки репоста достаточно популярное расширение, которое используется на сайтах.

Вариантов их установки множество, от генерации кода вставки до установки плагинов, однако мы пойдём другим путем, мы сразу установим код на сайт, минуя все сторониие сервисы.

Благодаря этому сам код будет легким и не будем содержать ничего лишнего, а мы сможем крутить исходники как нам угодно.

Итак, для начала рассмотрим пример таких кнопок:

Довольно простой вариант, который подойдёт большинству сайтов.

Рассмотрим порядок установки по порядку.

Всего у нас 3 части:

  • js код (служит для самого репоста после клика по кнопке)
  • css — визуальное оформление кнопок и их анимация
  • html — это сам код кнопок, который вставляем на страницу

JS код:

Share = {
	vkontakte: function(purl, ptitle, pimg, text) {
		url  = 'http://vkontakte.ru/share.php?';
		url += 'url='          + location;
		Share.popup(url);
	},
	odnoklassniki: function(purl, text) {
		url  = 'http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1';
		url += '&st._surl='    + location;
		Share.popup(url);
	},
	facebook: function(purl, ptitle, pimg, text) {
		url  = 'http://www.facebook.com/sharer.php?s=100';
		url += '&p[url]='       + location;
		Share.popup(url);
	},
	twitter: function(purl, ptitle) {
		url  = 'http://twitter.com/share?';
		url += '&url='      + location;
		Share.popup(url);
	},
	mailru: function(purl, ptitle, pimg, text) {
		url  = 'http://connect.mail.ru/share?';
		url += 'url='          + location;
		Share.popup(url)
	},
    googleplus: function(purl) {
        url  = 'https://plus.google.com/share?';
        url += 'url='          + location;
        Share.popup(url)
    },
	popup: function(url) {
		window.open(url,'','toolbar=0,status=0,width=626,height=436');
	}
};

CSS код:

.q-socblock {text-align: center}
.q-socblock .q-btn {
display: inline-block;
border: 2px solid #ccc;
color: #ccc;
width: 30px;
height: 30px;
line-height: 26px;
font-size: 16px;
border-radius: 50%;
transition: background-color 0.3s ease-out, border-radius 0.3s ease-out, color 0.3s ease-out, border 0.4s ease-out 0.8s, box-shadow 0.6s ease-out 0.8s;}

.q-socblock .q-btn:hover {
background: #ccc;
color: #333;
border-radius: 10%;
cursor: pointer;
border: 2px solid #999;
box-shadow: inset 0px -12px 0px 0px rgba(0,0,0,0.25);
}

HTML код:

<div class="q-socblock">
<div class="q-btn q-fb" onclick="Share.facebook()"><i class="fa fa-facebook" aria-hidden="true"></i></div>
<div class="q-btn q-vk" onclick="Share.vkontakte()"><i class="fa fa-vk" aria-hidden="true"></i></div>
<div class="q-btn q-ok" onclick="Share.odnoklassniki()"><i class="fa fa-odnoklassniki" aria-hidden="true"></i></div>
<div class="q-btn q-tw" onclick="Share.twitter()"><i class="fa fa-twitter" aria-hidden="true"></i></div>
<div class="q-btn q-ma" onclick="Share.mailru()"><i class="fa fa-at" aria-hidden="true"></i></div>
<div class="q-btn q-g" onclick="Share.googleplus()"><i class="fa fa-google-plus" aria-hidden="true"></i></div>
</div>