RocketTheme Magazine
Step 1 - Create AddThis.com Account
The simplest and frankly most convenient way to integrate social buttons is use a service like addthis.com. Basically it’s a sharing platform that provides configurable widgets for various services and then provides you great statistics and analytics, all for free! All you have to do is create an account on with this service, and then when you are logged in, click the first menu item “Get AddThis”.
NOTE: Even though AddThis has plugins and modules for Joomla, they are for Joomla 1.5 only and frankly they are more complicated to use and offer less control than the method i’m going to use.
Step 2 - Get the Code
Getting the JavaScript code for the social sharing buttons couldn’t be simpler. When you click the “Get AddThis” menu item you are taken to a page where you can choose the graphical style of the buttons and then easily get the code to represent those.
a) Choose “A Website” from the “Get AddThis for” list. Even though there’s a Joomla option, that uses custom modules or plugins, and is only for Joomla 1.5 at the time of this writing. By choosing “A Website” you are using the generic and most flexible method.
b) You can pick a style from this list. Click “more options...” to get other types of buttons and styles. When you are comfortable with this and you want to customize even more, AddThis has a flexible API to let you configure exactly what you have showing and what display method to use. That is a bit advanced and beyond this simple tutorial.
c) The last step is to simple copy the block of code to your clipboard. We’ll use this in the next step.
Step 3 - Integrating into Joomla
NOTE: It’s important to set your editor type to CodeMirror or None when you are working on JavaScript in Joomla. Most editors will strip this code out when you save.
To integrate these sharing buttons in Joomla, the first thing to do is to create a new “Custom HTML” module in the Module Manager.
From the list choose “Custom HTML” for the module type. Then fill in the following details:
Title: Anything you like can be put here, but I like to use “AddThis Buttons” for easy reference
Show Title: Set to “Hide”
Position: Type in “addthis”
Custom Output: Paste in the code that was generated for you from the AddThis website.
Then click “Save & Close” to save your custom module. The next step is to actually use this code in your article. We’re going to use one of the most handy Joomla content plugins “LoadPosition” to insert this custom module in our articles. This actually is great because it gives you complete control over the placement of the buttons. You can insert the code at the start of the article, at the end, pretty much anywhere. You can even get really creative and wrap the AddThis javascript code in an DIV tag and then use CSS to absolute position that block outside of your article!
Anyway, open up the article you want to add the buttons to in the Article Manager. Then just insert the following code where you would like the buttons to appear:
When you save this article you can just reload the site and you’ll see your buttons appear:
That’s all there is to it! Now if you want to make any changes to these buttons, add new ones, remove specific ones, or just change the style, you just need to modify the “AddThis Buttons” module and every where you use the buttons will be updated automatically. Also if you wanted to add different buttons in multiple locations, just go through the wizard on the AddThis site to create your new style, and paste the resulting JavaScript code into a new module instance. Don’t forget to give this module a new unique name and position.
About the Author:
