User Tools

Site Tools


addthis_share_buttons

AddThis.com Share Buttons

Share buttons – “Like”, “Tweet”, ”+1”, “Pin It”, etc. – 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.

You could go around to all of your favorite websites, gather up the individual snippets of code and add them to your site manually, but that would probably make things a mess. A much simply way is to use services such as AddThis.com to manage your share buttons all in one place.

1. Signup at AddThis.com
First step, go to AddThis.com and create an account. It's free.

2. Get the Code
After creating your account, login and hit “Get the Code” in the menu.

3. Get Share Buttons for A Website
On the subsequent page, tick the radio button to Get Share Buttons for … A Website.

4. Select Style
Select your preferred style of buttons. For this tutorial, choose one of the horizontal styles. If you'd prefer to go vertical, you can do that; but then you're on your own for figuring out the PHPlugins implementation.

5. Add Stuff
Look around the page and you should find options to add Google +1 and LinkedIn buttons to your toolbar. If you want them, follow the procedure as they lay it out.

6. Copy the Code
All of this will result in a snippet of code in the “Add to your site” section of the page. Now that we have our AddThis code, we need to setup some PHPlugins scaffolding so that we can add it to the page.

7. Enable Custom CSS
We'll be using our custom stylesheet to tame the button layout on our page, so if you haven't already setup custom CSS via PHPlugins, do that now.

8. Create the PHPlugins function
You can embed your buttons anywhere you like, but for this tutorial we'll use the ttg_canvas_top hook to embed the button above the block. I will also wrap it all in a <div> so that we have something to work with for layout and styling. Here's the function:

function ttg_canvas_top( $style, $path ) { 
	echo '
	<div id="addthis-container" class="clearfix">

<!-- AddThis Button BEGIN -->

<!-- AddThis Button END -->

	</div><!-- #addthis-container -->
	';
} // END

Copy-and-paste your code from AddThis into the middle, between the BEGIN and END comments.

Now save your phplugins.php file and have a look at your pages. You should now have share buttons! You may find, however, that your new buttons are a bit tight against your navigation, or not very nicely aligned with your content. That's why we have …

9. The Custom CSS
Open your custom.css file and add the following styles for your new share buttons:

#addthis-container {
	margin: 8px auto;
	padding: 0 24px;
	}

@media only screen and (max-width: 600px) {
	#addthis-container {
		padding: 0 8px;
		}
	} /* max-width: 600px */

.fb_iframe_widget span { z-index: 10; } /* prevents Facebook comment box falling behind thumbnails */

With styling in place, our buttons should now be pretty nicely aligned with things:

Make adjustments as necessary for your design.

addthis_share_buttons.txt · Last modified: 2013/02/23 04:19 by admin