Hover Social Sharing Blockquotes on WordPress

I was recently involved in a project to redesign an online news network, which led to a number of very cool custom functions being created for the WordPress sites they rely on. One such feature provides the users with the ability to share the contents of the in-post blockquote, which is built into the WordPress post editor.

Using a combination of JavaScript and CSS, social media sharing buttons appear when the user hovers over the quote and a pop-up to share on the chosen social network opens when clicked. Below is how to achieve this for Twitter and Facebook:

JS:

// blockquote hover sharing on articles
if($('body').is('.single')){
	
	// when user hovers over blockquote
	$('blockquote').hover(function() {
	
	var blockQuoteText = $(this).text();
	var currentUrl = window.location;
	
	// add share buttons (change TwitterName to your Twitter handle for automatic mentions)
	// change paths to the icons to suit your installation (download link below)
	$(this).append('
	<div class="quote-share"><a class="quote-twitter pop-up" href="http://twitter.com/intent/tweet?status=' +blockQuoteText+ '+' +currentUrl+ '+%40TwitterName"><img src="/path/to/images/share-twitter.png" alt="" /></a><a class="quote-facebook pop-up" href="http://www.facebook.com/sharer/sharer.php?u=' +currentUrl+ '&amp;title=' +blockQuoteText+ '"><img src="/path/to/images/share-facebook.png" alt="" /></a></div>
	');
	
	$('.quote-share').hide().fadeIn(200);
	
	}, function() {
		$('.quote-share').remove();
	});

} // end conditional for article pages

jQuery for pop-ups:

// pop-up without being blocked by pop-up blockers
jQuery('a.pop-up').live('click', function(){
	newwindow=window.open($(this).attr('href'),'','height=640,width=600');
	if (window.focus) {newwindow.focus()}
	return false;
});

For SCSS:

blockquote {
	position: relative;
	// opacity on quoted text to ensure that sharing icons stand out
	&:hover p {
		opacity: 0.1;
		transition: 0.4s ease;
	}
	// blockquote hover sharing
	.quote-share {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 3px;
		// social sharing icons
		.quote-twitter,
		.quote-facebook {
			width: 45px;
			height: 45px;
			display: block;
			position: relative;
			img {
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto;
			}
		}
		.quote-twitter {
			background: #55acee;
			transition: 0.3s;
			&:hover {
				background-color: darken(#55acee, 10%);
			}
			img {
				width: 28px;
				height: auto;
			}
		}
		.quote-facebook {
			background: #3b5998;
			transition: 0.3s;
			&:hover {
				background-color: darken(#3b5998, 10%);
			}
			img {
				width: 12px;
				height: auto;
			}
		}
	}
}

Regular CSS:

blockquote {
	position: relative;
}
/* opacity on quoted text to ensure that sharing icons stand out */
blockquote:hover p {
	opacity: 0.1;
	transition: 0.4s ease;
}
/* blockquote hover sharing */
blockquote .quote-share {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 3px;
}
/* social sharing icons */
blockquote .quote-share .quote-twitter,
blockquote .quote-share .quote-facebook {
	width: 45px;
	height: 45px;
	display: block;
	position: relative;
}
blockquote .quote-share .quote-twitter img,
blockquote .quote-share .quote-facebook img {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}
blockquote .quote-share .quote-twitter {
	background: #55acee;
	transition: 0.3s;
}
blockquote .quote-share .quote-twitter:hover {
	background-color: #2795e9;
}
blockquote .quote-share .quote-twitter img {
	width: 28px;
	height: auto;
}
blockquote .quote-share .quote-facebook {
	background: #3b5998;
	transition: 0.3s;
}
blockquote .quote-share .quote-facebook:hover {
	background-color: #2d4373;
}
blockquote .quote-share .quote-facebook img {
	width: 12px;
	height: auto;
}

This useful function adds a little interactivity to your post content and should help increase the chance of being shared on social media. You will notice that Social media URL submission methods have been used to share to both Facebook and Twitter, rather than the heavy SDKs and APIs. This is for speed, to prevent extra dependencies and for ease of implementation.

Useful links/downloads

Download the icons used in this tutorial
A definitive list of brand colors in hex/HTML color format

Leave a Reply

Your email address will not be published.