User Tools

Site Tools


custom_share_buttons

Custom Share Buttons

Share buttons make it easier for visitors to push your content on popular social networks. Adding them to your page can help your content go viral and better your word-of-mouth advertising.

If you want the standard Like/Share, Tweet, +1 buttons with counters and analytics, then you would do well to implement buttons using AddThis or a similar all-in-one service. But if you want standardized, fast-loading buttons that don't fill your pages with iframed garbage, we've got you covered here.

To get started, lay the groundwork:

And the code …

The CSS

Add the following to your custom.css file.

#share-buttons ul, 
#share-buttons li {
	list-style: none;
	}

#share-buttons ul {
	margin: 8px auto 0;
	}

#share-buttons li {
	background: #333;
	float: left;
	font-size: small;
	line-height: 1.5em;
	margin-right: 8px;
	padding: 0px 8px;
	word-spacing: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	}

#share-buttons a, 
#share-buttons a:hover {
	color: #fff;
	text-decoration: none;
	}

@media only screen and (max-width: 600px) {
	#share-buttons li {
		margin-right: 16px;
		}
	#share-buttons li span {
		display: none;
		}
	} /* max-width: 600px */

The PHP

To the phplugins.php file, add the following. In this example, we're attaching the buttons to the ttg_canvas_top hook, but feel free to put it anywhere.

This function creates Facebook “Share”, Twitter “Tweet”, Google Plus, Pinterest “Pin It”, and Email buttons.

function ttg_canvas_top( $style, $path ) { 
	echo '
	<div id="share-buttons" class="clearfix">
	<ul>
		<li class="share-via-facebook"><a href="http://www.facebook.com/share.php?u=' . urlencode(CURRENTPAGEURL) . '&title=' . urlencode(ALBUMTITLE) . '" onclick="window.open(this.href); return false;"><i class="icon-facebook-sign"></i><span> Share</span></a></li>
		<li class="share-via-twitter"><a href="http://twitter.com/home?status=' . urlencode(ALBUMTITLE) . '+' . urlencode(CURRENTPAGEURL) . '" onclick="window.open(this.href); return false;"><i class="icon-twitter"></i><span>  Tweet</span></a></li>
		<li class="share-via-googleplus"><a href="https://plus.google.com/share?url=' . urlencode(CURRENTPAGEURL) . '" onclick="window.open(this.href); return false;"><i class="icon-google-plus"></i></a></li>
		<li class="share-via-pinterest"><a href="http://pinterest.com/pin/create/bookmarklet/?media=' . urlencode(CURRENTPAGEURL) . '/photos/' . urlencode(PAGEIMAGE) . '&url=' . urlencode(CURRENTPAGEURL) . '&is_video=false&description=' . urlencode(ALBUMTITLE) . '" onclick="window.open(this.href); return false;"><i class="icon-pinterest"></i><span> Pin It<span></a></li>
		<li class="share-via-email"><a href="mailto:?subject=' . urlencode(ALBUMTITLE) . '&body=' . urlencode('Hi,') . '%0D%0A' . urlencode('I thought this worth sharing. Enjoy!') . '%0D%0A%0D%0A' . urlencode(CURRENTPAGEURL) . '" onclick="window.open(this.href); return false;"><i class="icon-envelope-alt"></i><span> Email</span></a></li>
	</ul>
	</div>
	';
} // END

Optional CSS

If you'd like, you can do more with styling. Here are just a few examples.

Positioning

This should stick your buttons to the top, right corner of the page.

#page-body { position: relative; }

#share-buttons {
	position: absolute;
		top:   0;
		right: 0;
	}

Color the Buttons

By assigning each <li> a unique class, we can assign colors to the buttons.

#share-buttons li.share-via-facebook {
	background-color: #385B93;
	}

#share-buttons li.share-via-twitter {
	background-color: #4099FF;
	}

#share-buttons li.share-via-googleplus {
	background-color: #D14836;
	}

#share-buttons li.share-via-pinterest {
	background-color: #CB2027;
	}

#share-buttons li.share-via-email {
	background-color: #333333;
	}

Additional Services

If you'd like to add other serves to the bar, here are a few more options. Just copy the code and add to the list in the PHPlugins function above.

Reddit

<li class="share-via-reddit"><a href="http://www.reddit.com/submit?url=' . urlencode(CURRENTPAGEURL) . '&title=' . urlencode(ALBUMTITLE) . '" onclick="window.open(this.href); return false;">Reddit</a></li>

Delicious

<li class="share-via-delicious"><a href="http://del.icio.us/post?url=' . urlencode(CURRENTPAGEURL) . '&title=' . urlencode(ALBUMTITLE) . '" onclick="window.open(this.href); return false;">Delicious</a></li>

StumbleUpon

<li class="share-via-stumbleupon"><a href="http://www.stumbleupon.com/submit?url=' . urlencode(CURRENTPAGEURL) . '&title=' . urlencode(ALBUMTITLE) . '" onclick="window.open(this.href); return false;">StumbleUpon</a></li>

Linkedin

<li class="share-via-linkedin"><a href="http://www.linkedin.com/shareArticle?mini=true&url=' . urlencode(CURRENTPAGEURL) . '&title=' . urlencode(ALBUMTITLE) . '&source=http://' . $_SERVER["SERVER_NAME"] . '" onclick="window.open(this.href); return false;"><i class="icon-linkedin-sign"></i><span> LinkIt</span></a></li>

Tumblr

<li class="share-via-tumblr"><a href="http://www.tumblr.com/share?v=3&u=' . urlencode(CURRENTPAGEURL) . '&t=' . urlencode(ALBUMTITLE) . '" onclick="window.open(this.href); return false;">Tumblr</a></li>

Posterous

<li class="share-via-posterous"><a href="http://posterous.com/share?linkto=' . urlencode(CURRENTPAGEURL) . '" onclick="window.open(this.href); return false;">Posterous</a></li>
custom_share_buttons.txt · Last modified: 2013/06/05 01:12 by admin