ramonvictor/archive.php

## archive.php
<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="pt-br"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="pt-br"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="pt-br"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="pt-br"> <!--<![endif]-->
<head>
	<meta charset="utf-8">
	<title>Title of your website</title>

	<!-- SEO meta tags -->
	<meta name="description" content="">
	<meta name="author" content="">

	<!-- layout config -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width,initial-scale=1">

	<!-- authors -->
	<link type="text/plain" rel="author" href="<?php echo get_bloginfo('template_url'); ?>/humans.txt" />

	<!--[if lt IE 9]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

	<!-- style -->
	<link rel="stylesheet" href="<?php echo get_bloginfo('template_url'); ?>/css/style.css">

	<!-- check support -->
	<script src="<?php echo get_bloginfo('template_url'); ?>/js/modernizr-2.0.6.min.js"></script>
	<?php wp_head(); ?>
</head>
<body>
<div id="main">
	<header id="hd" class="group">
		<strong>Site name</strong>
	</header>
	<div id="content">
			<header class="wrap-header group">
				<h1 class="content-header"><?php echo post_type_archive_title(); ?></h1>
			</header>
			<?php
			if( have_posts() ):
				while( have_posts() ): the_post(); ?>
					<!-- Printing the ID of the post to send by ajax -->
					<article id="article-<?php echo get_the_ID(); ?>" class="article-item">
						<header class="group">
							<h2><a href="<?php the_permalink(); ?>" ><?php the_title(); ?></a></h2>
							<div class="share-itens"></div><!-- here is where the magic happens -->
						</header>
						<div class="entry">
							<?php the_content(); ?>
						</div>
					</article>
			<?php
				endwhile;
			else: ?>
			<article class="article-item">
				<header>
					<h2>Any publication found!</h2>
				</header>
			</article>
			<?php
			endif; ?>
	</div>
	<footer>
		<p>Copyright</p>
	</footer>
</div>
<script>
	var base_url = "<?php echo get_bloginfo('template_url'); ?>";
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="<?php echo get_bloginfo('template_url'); ?>/js/functions.js"></script>
<!-- async load social buttons js apis -->
<script>
	// Credit to:
	// Original function adapted from Facebook async script at - http://www.phpied.com/social-button-bffs/
	// http://twitter.com/aaronpeters
	// http://www.aaronpeters.nl/blog/why-loading-third-party-scripts-async-is-not-good-enough
	(function(w, d, s) {
		function go(){
			var js, fjs = d.getElementsByTagName(s)[0], load = function(url, id, cb) {
			if (d.getElementById(id)) {return;}
			js = d.createElement(s); js.src = url; js.id = id;
			fjs.parentNode.insertBefore(js, fjs);

			// if callback, execute the callback.  The function needs to be created seperately or it will error
			if (cb) {
				js.onload = scriptLoadedCallback(id);
				// For IE
				js.onreadystatechange = function (id) {
					if (this.readyState == 'complete' || this.readyState == 'loaded') {
						scriptLoadedCallback(id);
					}
				}
			}
		};
		load('//connect.facebook.net/en_US/all.js#xfbml=1', 'fbjssdk', false);
		load('https://apis.google.com/js/plusone.js', 'gplus1js', false);
		load('//platform.twitter.com/widgets.js', 'tweetjs', false);
		load('//platform.linkedin.com/in.js', 'linkedinjs', false);
	}
	if (w.addEventListener) { w.addEventListener("load", go, false); }
	else if (w.attachEvent) { w.attachEvent("onload",go); }
	}(window, document, 'script'));
</script>
<?php wp_footer(); ?>
</body>
</html>

## functions.js
$(document).ready(function(){

	var hp_content = $('#content');
	var share_wrap = hp_content.find('.article-item').find('.share-itens');

	if(share_wrap.length){ //check if there is article with share buttons wrapper
		var articles = hp_content.find('.article-item');

		if(share_wrap.children().length)
			share_wrap.children().css('opacity','0');

		//article mouseenter
		articles.on('mouseenter mouseleave',function(e){
			var self = $(this);
			var self_share_wrap = self.find('.share-itens');
			var self_share_child = self_share_wrap.children();

			if(e.type == "mouseenter"){
				//check if button already exist
				if(!self_share_child.length){

					//get the post id (the article tag must have a pattern like this: '<article id="article-20">')
					var article_id = self.attr('id');
					var id_number = article_id.replace('article-','');

					$.ajax({
						type: "POST",
						url: base_url+'/share-buttons.php',
						data: { post_id: id_number },
						success: function(data) {

							var $response = $( data );

							// if there is an empty response do nothing
							if( $response.length < 1 ) return;

							self_share_wrap.html(data);

							// create the facebook buttons
							if (typeof (FB) != 'undefined') {
								FB.XFBML.parse(document.getElementById(article_id));
							}

							// create the twitter buttons
							if (typeof (twttr) != 'undefined') {
								self_share_wrap.find('.twitter-share-button').each(function()
								{
									twttr.widgets.load();
								});
							}

							//create GA button
							if (typeof (gapi) != 'undefined') {
								self_share_wrap.find(".g-plusone").each(function () {
								    gapi.plusone.render($(this).get(0), {"size": "medium"});
								});
							}

							//create linkedin button
							if (typeof (IN) != 'undefined') {
								IN.init();
							}
							//show
							self_share_child.stop().animate({ opacity: 1 },500);
						},
				        error: function(jqXHR, textStatus, errorThrown){
				        	self_share_wrap.html(
				                "O seguinte erro aconteceu: "+
				                textStatus, errorThrown
				            );
				        }
					}); //ajax end
				}else{ //if there are buttons, just show them
					self_share_child.stop().animate({ opacity: 1 },500); //show
				}
			}else{ //mouseleave
				self_share_child.stop().animate({ opacity: 0 },500); //hide
			}
		});
	}
});

## share-buttons.php
<?php
	//require wp-load.php to use wordpress functions
	require($_SERVER['DOCUMENT_ROOT'] . '/wp-load.php' );
	//get post id from ajax request
	$the_id = $_POST['post_id'];
?>
<ul>
	<li class="plus">
		<div class="g-plusone" data-size="medium" data-href="<?php echo get_permalink($the_id); ?>"></div>
	</li>
	<li class="linkedin">
		<script type="IN/Share" data-url="<?php echo get_permalink($the_id); ?>" data-counter="right"></script>
	</li>
	<li class="twitter">
		<a href="https://twitter.com/share" class="twitter-share-button" data-url="<?php echo get_permalink($the_id); ?>" data-text="<?php echo get_the_title($the_id); ?>">Tweet</a>
	</li>
	<li class="facebook-share btn_fb">
		<div class="fb-send" data-href="<?php echo get_permalink($the_id); ?>" data-font="arial" data-action="Share"></div>
	</li>
	<li class="facebook-like btn_fb last">
		 <div class="fb-like" data-href="<?php echo get_permalink($the_id); ?>" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false" data-font="arial"></div>
	</li>
</ul>
	<!doctype html>
	<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="pt-br"> <![endif]-->
	<!--[if IE 7]> <html class="no-js ie7 oldie" lang="pt-br"> <![endif]-->
	<!--[if IE 8]> <html class="no-js ie8 oldie" lang="pt-br"> <![endif]-->
	<!--[if gt IE 8]><!--> <html class="no-js" lang="pt-br"> <!--<![endif]-->
	<head>
	<meta charset="utf-8">
	<title>Title of your website</title>

	<!-- SEO meta tags -->
	<meta name="description" content="">
	<meta name="author" content="">

	<!-- layout config -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width,initial-scale=1">

	<!-- authors -->
	<link type="text/plain" rel="author" href="<?php echo get_bloginfo('template_url'); ?>/humans.txt" />

	<!--[if lt IE 9]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

	<!-- style -->
	<link rel="stylesheet" href="<?php echo get_bloginfo('template_url'); ?>/css/style.css">

	<!-- check support -->
	<script src="<?php echo get_bloginfo('template_url'); ?>/js/modernizr-2.0.6.min.js"></script>
	<?php wp_head(); ?>
	</head>
	<body>
	<div id="main">
	<header id="hd" class="group">
	<strong>Site name</strong>
	</header>
	<div id="content">
	<header class="wrap-header group">
	<h1 class="content-header"><?php echo post_type_archive_title(); ?></h1>
	</header>
	<?php
	if( have_posts() ):
	while( have_posts() ): the_post(); ?>
	<!-- Printing the ID of the post to send by ajax -->
	<article id="article-<?php echo get_the_ID(); ?>" class="article-item">
	<header class="group">
	<h2><a href="<?php the_permalink(); ?>" ><?php the_title(); ?></a></h2>
	<div class="share-itens"></div><!-- here is where the magic happens -->
	</header>
	<div class="entry">
	<?php the_content(); ?>
	</div>
	</article>
	<?php
	endwhile;
	else: ?>
	<article class="article-item">
	<header>
	<h2>Any publication found!</h2>
	</header>
	</article>
	<?php
	endif; ?>
	</div>
	<footer>
	<p>Copyright</p>
	</footer>
	</div>
	<script>
	var base_url = "<?php echo get_bloginfo('template_url'); ?>";
	</script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script src="<?php echo get_bloginfo('template_url'); ?>/js/functions.js"></script>
	<!-- async load social buttons js apis -->
	<script>
	// Credit to:
	// Original function adapted from Facebook async script at - http://www.phpied.com/social-button-bffs/
	// http://twitter.com/aaronpeters
	// http://www.aaronpeters.nl/blog/why-loading-third-party-scripts-async-is-not-good-enough
	(function(w, d, s) {
	function go(){
	var js, fjs = d.getElementsByTagName(s)[0], load = function(url, id, cb) {
	if (d.getElementById(id)) {return;}
	js = d.createElement(s); js.src = url; js.id = id;
	fjs.parentNode.insertBefore(js, fjs);

	// if callback, execute the callback. The function needs to be created seperately or it will error
	if (cb) {
	js.onload = scriptLoadedCallback(id);
	// For IE
	js.onreadystatechange = function (id) {
	if (this.readyState == 'complete' \|\| this.readyState == 'loaded') {
	scriptLoadedCallback(id);
	}
	}
	}
	};
	load('//connect.facebook.net/en_US/all.js#xfbml=1', 'fbjssdk', false);
	load('https://apis.google.com/js/plusone.js', 'gplus1js', false);
	load('//platform.twitter.com/widgets.js', 'tweetjs', false);
	load('//platform.linkedin.com/in.js', 'linkedinjs', false);
	}
	if (w.addEventListener) { w.addEventListener("load", go, false); }
	else if (w.attachEvent) { w.attachEvent("onload",go); }
	}(window, document, 'script'));
	</script>
	<?php wp_footer(); ?>
	</body>
	</html>
	$(document).ready(function(){

	var hp_content = $('#content');
	var share_wrap = hp_content.find('.article-item').find('.share-itens');

	if(share_wrap.length){ //check if there is article with share buttons wrapper
	var articles = hp_content.find('.article-item');

	if(share_wrap.children().length)
	share_wrap.children().css('opacity','0');

	//article mouseenter
	articles.on('mouseenter mouseleave',function(e){
	var self = $(this);
	var self_share_wrap = self.find('.share-itens');
	var self_share_child = self_share_wrap.children();

	if(e.type == "mouseenter"){
	//check if button already exist
	if(!self_share_child.length){

	//get the post id (the article tag must have a pattern like this: '<article id="article-20">')
	var article_id = self.attr('id');
	var id_number = article_id.replace('article-','');

	$.ajax({
	type: "POST",
	url: base_url+'/share-buttons.php',
	data: { post_id: id_number },
	success: function(data) {

	var $response = $( data );

	// if there is an empty response do nothing
	if( $response.length < 1 ) return;

	self_share_wrap.html(data);

	// create the facebook buttons
	if (typeof (FB) != 'undefined') {
	FB.XFBML.parse(document.getElementById(article_id));
	}

	// create the twitter buttons
	if (typeof (twttr) != 'undefined') {
	self_share_wrap.find('.twitter-share-button').each(function()
	{
	twttr.widgets.load();
	});
	}

	//create GA button
	if (typeof (gapi) != 'undefined') {
	self_share_wrap.find(".g-plusone").each(function () {
	gapi.plusone.render($(this).get(0), {"size": "medium"});
	});
	}

	//create linkedin button
	if (typeof (IN) != 'undefined') {
	IN.init();
	}
	//show
	self_share_child.stop().animate({ opacity: 1 },500);
	},
	error: function(jqXHR, textStatus, errorThrown){
	self_share_wrap.html(
	"O seguinte erro aconteceu: "+
	textStatus, errorThrown
	);
	}
	}); //ajax end
	}else{ //if there are buttons, just show them
	self_share_child.stop().animate({ opacity: 1 },500); //show
	}
	}else{ //mouseleave
	self_share_child.stop().animate({ opacity: 0 },500); //hide
	}
	});
	}
	});
	<?php
	//require wp-load.php to use wordpress functions
	require($_SERVER['DOCUMENT_ROOT'] . '/wp-load.php' );
	//get post id from ajax request
	$the_id = $_POST['post_id'];
	?>
	<ul>
	<li class="plus">
	<div class="g-plusone" data-size="medium" data-href="<?php echo get_permalink($the_id); ?>"></div>
	</li>
	<li class="linkedin">
	<script type="IN/Share" data-url="<?php echo get_permalink($the_id); ?>" data-counter="right"></script>
	</li>
	<li class="twitter">
	<a href="https://twitter.com/share" class="twitter-share-button" data-url="<?php echo get_permalink($the_id); ?>" data-text="<?php echo get_the_title($the_id); ?>">Tweet</a>
	</li>
	<li class="facebook-share btn_fb">
	<div class="fb-send" data-href="<?php echo get_permalink($the_id); ?>" data-font="arial" data-action="Share"></div>
	</li>
	<li class="facebook-like btn_fb last">
	<div class="fb-like" data-href="<?php echo get_permalink($the_id); ?>" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false" data-font="arial"></div>
	</li>
	</ul>