Popup de partage sur les réseaux sociaux en JavaScript

Facebook, Google+, HTML, Javascript, jQuery, LinkedIn, Partage, Popup, Social, Twitter

Voici des liens HTML, accompagnés d’une fonction simple en JavaScript avec jQuery qui vont permettre d’ouvrir une popup de partage vers différents réseaux sociaux.

Les liens HTML

Ces liens fonctionneront même si le JavaScript est désactivé du navigateur.

<a href="https://www.facebook.com/sharer/sharer.php?u=URLENCODED&t=TITLE" class="share facebook" data-network="facebook">Partager sur Facebook</a>
<a href="https://twitter.com/share?url=URLENCODED&text=TITLE" class="share twitter" data-network="twitter">Partager sur Twitter</a>
<a href="https://plus.google.com/share?url=URLENCODED" class="share google" data-network="google">Partager sur Google+</a>
<a href="https://www.linkedin.com/shareArticle?mini=true&url=URLENCODED&title=TITLE&source=COMPANY" class="share linkedin" data-network="linkedin">Partager sur LinkedIn</a>

<a href="https://www.facebook.com/sharer/sharer.php?u=URLENCODED&t=TITLE" class="share facebook" data-network="facebook">Partager sur Facebook</a>

<a href="https://twitter.com/share?url=URLENCODED&text=TITLE" class="share twitter" data-network="twitter">Partager sur Twitter</a>

<a href="https://plus.google.com/share?url=URLENCODED" class="share google" data-network="google">Partager sur Google+</a>

<a href="https://www.linkedin.com/shareArticle?mini=true&url=URLENCODED&title=TITLE&source=COMPANY" class="share linkedin" data-network="linkedin">Partager sur LinkedIn</a>

Popup JavaScript

L’événement click sur le lien est surchargé par le JavaScript, qui utilise ses attributs href et data-network pour ouvrir une fenêtre popup aux dimensions du réseaux social sélectionné.

$('a.share').click(function(e){
	e.preventDefault();
	var $link   = $(this);
	var href    = $link.attr('href');
	var network = $link.attr('data-network');

	var networks = {
		facebook : { width : 600, height : 300 },
		twitter  : { width : 600, height : 254 },
		google   : { width : 515, height : 490 },
		linkedin : { width : 600, height : 473 }
	};

	var popup = function(network){
		var options = 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,';
		window.open(href, '', options+'height='+networks[network].height+',width='+networks[network].width);
	}

	popup(network);
});

$('a.share').click(function(e){

e.preventDefault();

var $link = $(this);

var href = $link.attr('href');

var network = $link.attr('data-network');

var networks = {

facebook : { width : 600, height : 300 },

twitter : { width : 600, height : 254 },

google : { width : 515, height : 490 },

linkedin : { width : 600, height : 473 }

};

var popup = function(network){

var options = 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,';

window.open(href, '', options+'height='+networks[network].height+',width='+networks[network].width);

}

popup(network);

});