Social Media Buttons in Joomla 2.5. Share42 floating vertical panel
Published: Saturday, 04 May 2013 18:14       Written by Ogri       Hits: 13937

Social Media Buttons in Joomla 2.5

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

In previous articles you learned how to insert a horizontal bar of social buttons into the article body. We now consider the option to hang vertical "floating" buttons panel to have it at any site page. The same service share42.com will help in this. Generate the panel template same way as in case of horizontal option, but the type of panel with icons choose this time - vertical "sticky".

The resulting piece of code in case of vertical panel came out as follows:

<style type="text/css">
#share42 {padding: 6px 6px 0; background: #FFF; border: 1px solid #E9E9E9; border-radius: 4px;}
#share42:hover {background: #F6F6F6; border: 1px solid #D4D4D4; box-shadow: 0 0 5px #DDD;}
#share42 a {opacity: 0.5}
#share42:hover a {opacity: 0.7}
#share42 a:hover {opacity: 1}
</style>
 
<div class="share42init" data-top1="242" data-top2="10" data-margin="-72"></div>
<script type="text/javascript" src="<?php echo $this->baseurl; ?>/js/share42.js"></script>

It remains only to insert the resulting fragment into the active site template. You can use the administrative panel, and you can open the file templates \ [active_template] \ index.php in your favorite text editor with code highlighting. I personally prefer the second option. Before making any changes, as always, it is highly desirable to make a backup copy of the file being edited.

Now the main point. In which part of the template file the code should be placed? First, it must be within the tag BODY. Typically, after the BODY tag all sorts of wrappers or containers are located, and they are often stretched to the full screen width. Therefore, insert code inside the last opening tag DIV immediately after the BODY, followed by a non-DIV tag. I will explain on an example of supplied with Joomla template Beez20, and also of my custom template. Here's the code:

Beez20

<body>
  <div id="all">
    <div id="back">
      <div id="header">
        <div class="logoheader">
 
<!-- =====> !!! Insert here -->
 
          <h1 id="logo">
 
<!-- ------------ More code..... ----------- -->

My custom template

<body>
  <div id="og-main">
 
<!-- =====> !!! Insert here -->
 
    <header class="og-header clearfix"><?php echo $view->position('header', 'og-nostyle'); ?>
 
<!-- ------------ More code..... ----------- -->

end faq

Hopefully, the principle is clear. Now, choosing values data-top1, data-top2, and data-margin, set the location of the panel. The meaning of these parameters is explained on the website share42.com.

In conclusion the pros and cons of this option. Pros - looks pretty nice and imposing, and is always handy. It gives you the opportunity to share not only the article, but any other page of the site. But cons concern the case where the site uses responsive web design, ie, a separate version of the design for mobile devices with smaller screen resolution. In this case, the panel overlaps a portion of the content on smartphone or tablet, and it is not good . Therefore, the option of Share42 is an excellent alternative to the standard horizontal bar for sites that do not use responsive templates.

Add comment