Свои кнопки «поделиться» социальных сетей

Частенько нужно сделать кастомные кнопки для шаринга. У многих (у меня тоже) это вызывает урчание в животе и становятся потными ладошки. Но вот все поменялось. Даю вам коды, думаю, сами разберестесь.

html - разметка кнопок (может быть любой, лишь бы висели правильные обработчики кликов)

<div class="share-buttons clearfix">
      <a onclick="share.vk()" class="share-btn-vk share-btn-small" title="Поделиться ссылкой во Вконтакте">
        <span class="share-icon sc-vk"></span>
        <span class="btn-name">Поделиться во Вконтакте</span>
      </a>                 
      <a onclick="share.tw()" class="share-btn-tw share-btn-small">
        <span class="share-icon sc-tw"></span>
        <span class="btn-name">Twitter</span>
      </a>        
      <a onclick="share.google()" class="share-btn-google share-btn-small">
        <span class="share-icon sc-google"></span>
        <span class="btn-name">Google+</span>        
      </a>
      <a onclick="share.fb()" class="share-btn-fb" title="Поделиться ссылкой на Facebook">
        <span class="share-icon sc-fb"></span>
        <span class="btn-name">Поделиться на Facebook</span>
      </a>           
      <a onclick="share.od()" class="share-btn-od" title="Поделиться ссылкой в Одноклассниках">
        <span class="share-icon sc-od"></span>
        <span class="btn-name">Поделиться в Одноклассниках</span>
      </a>
</div>

Теперь Javascript

share = {
	fb: function() {
		var uriLocation;
		if (typeof fb_post_id != 'undefined') {
		    uriLocation = "https://www.facebook.com/raznogo/posts/"+fb_post_id;                   
		}else if (typeof fb_post_link != 'undefined') {
		    uriLocation = fb_post_link;
		}else {
                    uriLocation = window.location.href;
		};
		url = 'https://www.facebook.com/sharer.php?u=' + encodeURIComponent(uriLocation);
		share.popup(url);
	},
	vk: function() {
		image = jQuery('.image-popup').attr('href');
		url = 'http://vk.com/share.php?url=' + encodeURIComponent(window.location.href);
		url += '&image='+encodeURIComponent(image);
		share.popup(url);
	
	},
	od: function() {
		url = 'http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1&st._surl=' + encodeURIComponent(window.location.href);
		share.popup(url);
	},
	google: function() {
		url = 'https://plus.google.com/share?url=' + encodeURIComponent(window.location.href);
		share.popup(url);
	},
	tw: function() {
		url = 'http://twitter.com/home?status=' + encodeURIComponent(window.location.href);
		share.popup(url);
	},

	popup: function(url) {
		var width = 600;
		var height = 400;
		var top = (screen.height/2)-(height/2);
		var left = (screen.width/2)-(width/2);
		window.open(url,'','toolbar=0,status=0,width='+width+',height='+height+',top='+top+',left='+left);
	}
};

При клике все отлично работает. Даже картинки подбирает правильно. Если нет - сделайте правильную разметку.

Оставить комментарий

avatar
  Подписаться  
Уведомление о