Social Media Buttons in Joomla 2.5

Where to embed?
Different types of button bars
  Share42 horizontal panel
  Share42 floating vertical panel
Selective placement

After localizing files and places where scripts of social button panels are inserted in their code, let's move on to the question of where to get the script. There are many services that can generate such a code in accordance with the needs of webmasters. Consider one of them.

There is a pretty nice solution called Share42 which allows both to just insert a horizontal bar in the article body or to hang vertical "floating" panel. In the second case buttons will be present on every page, and it will be discussed in the next article. Now we focus on the first version.

Go to the website share42.com and generate an appropriate layout of the panel. There is plenty of social services there, both Russian and international. Generator interface is simple and intuitive. Choose a size of the buttons, pick the relevant social services, optionally add buttons from the group Other - E-Mail, Print, etc. Select horizontal type of panel with icons.

After downloading generated script and uploading it to your hosting, proceed to its implementation in the content pages.

So, there are script file share42.js and image file icons.png. Place them into a folder js created in the site root.

Share42 also offers the code for embedding the script into our template:

<div class="share42init"></div>
<script src="http://site.name/share42/share42.js" type="text/javascript"></script>

We edit the path to the JavaScript file:

<div class="share42init"></div>
<script src="<?php echo $this->baseurl; ?>/js/share42.js" type="text/javascript"></script>

And finally, you can add style. Mine, for example, looks like this:

#share42 {padding: 0 20px 0;}
#share42 a {opacity: 0.75}
#share42:hover a {opacity: 0.85}
#share42 a:hover {opacity: 1}

Basically, the style can be added to the template's stylesheet, but it's convenient to have everything in one place in case of subsequent changes.

Combine scripts in common block the following way: first, code style framed by tags style, and then div and script blocks. We get the following code:

<style type="text/css">
#share42 {padding: 0 20px 0;}
#share42 a {opacity: 0.75}
#share42:hover a {opacity: 0.85}
#share42 a:hover {opacity: 1}
</style>
 
<div class="share42init"></div>
<script src="<?php echo $this->baseurl; ?>/js/share42.js" type="text/javascript"></script>

The resulting script is inserted according to the instructions from the previous article.

If you want to add the panel both before and after content (in the latter case as an option - to integrate with JComments), the resulting code snippet is entirely inserted just once - whether before or after. In the second place only block div is inserted. In this article, as you see, there are two Share42 panels to illustrate the implementation of this option.

Share42 also provides the ability to create a vertical panel. In this case, it is possible to set the appropriate style and "stick" the panel anywhere on the page without committing to an article body. This option will be considered separately in the next article.