Social Media Buttons in Joomla 2.5. Share42 floating vertical panelPublished: Saturday, 04 May 2013 18:14 Written by Ogri Hits: 16188
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.
Latest News
-
Tuesday, 21 July 2020 03:18
Joomla 3: Redirect to same page after successful login -
Saturday, 30 December 2017 16:11
Joomla: how to add your own language constants or override existing ones -
Thursday, 30 November 2017 23:27
Joomla: Integrate reCAPTCHA v2 (NO CAPTCHA) into JComments -
Saturday, 25 June 2016 15:33
Unified filtering of mod_jcomments_latest module's output -
Thursday, 17 September 2015 16:23
Post an illustrated Joomla-site article on Facebook using OG-tags
Articles Most Read
-
118557
Migrating from Joomla 1.5 to Joomla 2.5. Part 2-1. Transferring jDownloads and jComments -
49280
Joomla: Integrate reCAPTCHA v2 (NO CAPTCHA) into JComments -
34508
Editing animated GIF-images in Photoshop CS3 -
31213
Migrating from Joomla 1.5 to Joomla 2.5. Part 2-2. Template, editor, and other extensions -
29604
Social Media Buttons in Joomla 2.5
Login
Guest Column
Recent comments
-
Joomla: Content filtering by articles, categories and components
-
먹튀검증업체 14.04.2021 18:00
-
-
Joomla: Integrate reCAPTCHA v2 (NO CAPTCHA) into JComments
-
먹튀검증커뮤니티 14.04.2021 15:40
It's great that you are getting ideas from this piece of writing as well as from our argument made ...
-
промокод на доставку 09.04.2021 12:48
Промокод на бесплатную доставку очень популярен, хотя сейчас, промокод на доставку: http://1-mecto.ruверное ...
-
-
Joomla: Merge two sites into one using component J2XML
-
промокод перекресток 07.04.2021 13:36
Промокод может быть однократным (один покупатель — одна покупка) или многократным (и сам покупаешь ...
-
-
Migrating from Joomla 1.5 to Joomla 2.5. Part 2-1. Transferring jDownloads and jComments
-
промокоды вк 11.04.2021 06:36
Промокод может быть однократным (один покупатель — одна покупка) или многократным (и сам покупаешь ...
-
афиша промокод 10.04.2021 15:05
Промокоды — отличный способ привлечения новых клиентов интернет-магазинами, повышения их лояльности ...
-
промокод эльдорадо 08.04.2021 13:57
Промокоды — отличный способ привлечения новых клиентов интернет-магазинами, повышения их лояльности ...
-
промокод вулкан 08.04.2021 12:13
Скидочные купоны есть нескольких вариантов: купон с процентом скидки, купон на определенную сумму ...
-
промокоды импакт 07.04.2021 07:13
Промокоды — отличный способ привлечения новых клиентов интернет-магазинами, повышения их лояльности ...
-
-
Unified filtering of mod_jcomments_latest module's output
-
промокод спортмастер 08.04.2021 13:03
В интернете есть много сайтов, которые собирают промокод спортмастер: http://promokodmag.ruы от ...
-
Read more...