Social Sharing - getting it shared

Earlier we saw how to set up your page to get it ready to be shared across social networks. Now, how exactly do you share it across all those different social networks?

You have a couple of choices. First, you could visit the top 5 or 6 social sites you want to share on and dig into their sharing API to find out the exact parameters to use to generate their cute little button. Or you could leverage a service that does all that API gazing for you and keeps up with the constant change of sites and API's. I'm assuming you want to take the easier route, so we'll look at the most popular of the sharing aggregation sites, AddThis.

AddThis.com lets you set up a free account and grab sharing buttons for nearly every social network in the world - from Facebook and Twitter to Orkut and things I can't even pronounce, let alone read. They use their internal algorithms to determine what the most popular sharing sites are, and show those first in the list of buttons. They also keep track as visitors share using AddThis across the web and set individual personalized preferences. If your mom shares a lot by e-mail using AddThis, then the e-mail icon will show most often.

Once you've created an account on AddThis.com just click 'get the code' for sharing buttons. They offer lots of options, but lets focus on the most basic, sharing on a website. From the 'Get Sharing Buttons' page, you can select several different visual styles, from 16px to 32px buttons, vertical or horizontal, or just a little sharing bar. Pick what fits your page the best. Notice how the code on the right changes slightly - that's how the display is customized to show different options. Once you have the layout you want, just select the sourcecode in the textarea, copy and paste it into your website in the location you want. Sprint uses this on the Phone Details page, just under the main column key features.

Location is important - if you bury the sharing buttons in the header or footer, you'll get less content shared. You should have the sharing buttons as near to the content the customer is reading as possible. This helps them to remember to share your special content and say 'thank you' to you for providing such awesome content! Sharing cool stuff also gives them credit in their social economy; the more and better stuff they share, the more prestige they get from their networks. But more on that in a future post . . .

Now, back to that code. It's pretty simple HTML:

<!-- AddThis Button BEGIN --> <div class="addthis_toolbox addthis_default_style "> <a class="addthis_button_preferred_1"></a> <a class="addthis_button_preferred_2"></a> <a class="addthis_button_preferred_3"></a> <a class="addthis_button_preferred_4"></a> <a class="addthis_button_compact"></a> <a class="addthis_counter addthis_bubble_style"></a> </div> <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=xa-52376d2e5d4cb5e5"></script> <!-- AddThis Button END -->

You're making a new box on your page with a few links. Those simple links get rendered into pretty round-corner web 2.0 buttons by the javascript call. The 'class' tag tells the javascript how to render them. You'll note the first four links are 'preferred 1,2,3 and 4'. That's the personalization I was talking about earlier. AddThis uses the visitors preferred sharing sites or methods to populate those links. The last two tags set up the 'Plus' button and the counter for how many shares you've had. Once you get more familiar with AddThis you can add, remove, change the order and a whole lot more in this simple block of HTML code. For now, publish your page and see how it looks with the new sharing buttons!


Wait a couple of days, then log into AddThis.com and see analytical reports on how your sharing is going and what kind of social lift your content is getting from your new buttons!