Making modern sharing buttons for Tumblr themes

Sharing buttons example

In this tutorial we are going to make a set of modern buttons to share posts on popular social networks including:

  • Facebook
  • Twitter
  • Google+
  • Tumblr (we can’t make a social network list without Tumblr and its reblog function)

We’ll build these buttons with HTML and CSS for use in your Tumblr theme.

Demo the completed buttons

HTML: Links to the sharing URL

{block:Date}{block:PermalinkPage}
<ul class="share">
    <li class="tumblr"><a href="{ReblogURL}">Tumblr</a></li>
    <li class="facebook"><a href="https://www.facebook.com/sharer.php?u={Permalink}">Facebook</a></li>
	<li class="twitter"><a href="https://twitter.com/intent/tweet?url={ShortURL}">Twitter</a></li>
	<li class="google"><a href="https://plusone.google.com/_/+1/confirm?hl=en&url={Permalink}">Google+</a></li>
</ul>
{/block:PermalinkPage}{/block:Date}

In the HTML for each post, a list of social websites is included with a link to each social network.

In the code, above, the buttons will only show up on permalink pages that are posts. I’ve done this to remove the clutter that would occur if you included buttons on every single front-page post. However, if you want to show it on the front page too - like many popular blogs - simply remove the {block:PermalinkPage}.

This HTML must be included within the {block:Posts}, for your theme. Perhaps in the header or footer of your posts (see our chapter for creating post footers and markup).

In the above HTML, we’re simply linking to the sharing URL, and replacing where the full URL usually goes with the Tumblr link.

{Permalink} is the URL which always points to the post, used for Facebook and Google+, whilst for Twitter we’re using the link that’s already shortened called {ShortURL}, to avoid hitting the character limit imposed by Twitter. Tumblr’s button is using the undocumented URL called {ReblogURL}, which kindly automatically generates the sharing link for the post.

CSS: Styling the buttons

.share {
	list-style: none;
	margin: 0;
	padding: 0;
}
.share li {
	float: left;
	margin-right: 2%;
}
.share li a {
	border: 1px solid rgba(58, 41, 41, 0.24);
	color: rgb(247, 247, 247);
	display: block;
	padding: 0.3em;
	text-decoration: none;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.49)
}

For the ‘share’ list items we’re making some basic resets to make them into a single line of buttons - then applying style to the links (.share li a) including a subtle border and padding to make them have plenty of ‘clickable’ area (this is a popular usability enhancement used by web developers by setting the display to block then setting padding).

.share .tumblr {
	background-image: -ms-linear-gradient(top, #304F6A 0%, #263F54 100%);
	background-image: -moz-linear-gradient(top, #304F6A 0%, #263F54 100%);
	background-image: -o-linear-gradient(top, #304F6A 0%, #263F54 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #304F6A), color-stop(1, #263F54));
	background-image: -webkit-linear-gradient(top, #304F6A 0%, #263F54 100%);
	background-image: linear-gradient(to bottom, #304F6A 0%, #263F54 100%);
}
.share .tumblr:hover {
	background: #304F6A;
}
.share .facebook {
	background-image: -ms-linear-gradient(top, #3B5998 0%, #334E85 100%); 
	background-image: -moz-linear-gradient(top, #3B5998 0%, #334E85 100%);
	background-image: -o-linear-gradient(top, #3B5998 0%, #334E85 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #3B5998), color-stop(1, #334E85));
	background-image: -webkit-linear-gradient(top, #3B5998 0%, #334E85 100%);
	background-image: linear-gradient(to bottom, #3B5998 0%, #334E85 100%);
}
.share .facebook:hover {
	background: #3B5998;
}
.share .twitter {
	background-image: -ms-linear-gradient(top, #00CAFB 0%, #00ACD6 100%);
	background-image: -moz-linear-gradient(top, #00CAFB 0%, #00ACD6 100%);
	background-image: -o-linear-gradient(top, #00CAFB 0%, #00ACD6 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #00CAFB), color-stop(1, #00ACD6));
	background-image: -webkit-linear-gradient(top, #00CAFB 0%, #00ACD6 100%);
	background-image: linear-gradient(to bottom, #00CAFB 0%, #00ACD6 100%);
}
.share .twitter:hover {
	background: #00CAFB;
}
.share .google {
	background-image: -ms-linear-gradient(top, #FF4E28 0%, #E34524 100%);
	background-image: -moz-linear-gradient(top, #FF4E28 0%, #E34524 100%);
	background-image: -o-linear-gradient(top, #FF4E28 0%, #E34524 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FF4E28), color-stop(1, #E34524));
	background-image: -webkit-linear-gradient(top, #FF4E28 0%, #E34524 100%);
	background-image: linear-gradient(to bottom, #FF4E28 0%, #E34524 100%);
}
.share .google:hover {
	background: #FF4E28;
}

For the background of each social network, I’ve grabbed the main color from their logos (all were a shade of blue, except for Google+) and generated a CSS3 gradient with help from Microsoft’s CSS Gradient Background Maker - which has created the mark-up required for the six different cross-browser gradients! - then set the hover state to a single color.

You shouldn’t manually type in the styling for the gradients, instead copy the above colors or generate your preferred colors from the Gradient Background Maker.

The result is a sophisticated set of social network buttons that allows users to quickly share your Tumblr posts.

blog comments powered by Disqus