The social share privacy jQuery plug-in from heise is just nice. But the new share button from Google+ I still miss. So I added it.
/*
* jquery.socialshareprivacy.js | 2 Klicks fuer
mehr Datenschutz
*
*
http://www.heise.de/extras/socialshareprivacy/
*
http://www.heise.de/ct/artikel/2-Klicks-fuer-mehr-Datenschutz-1333879.html
*
* Copyright (c) 2011 Hilko Holweg, Sebastian
Hilbig, Nicolas Heiringhoff, Juergen Schmidt,
* Heise Zeitschriften Verlag GmbH & Co. KG, http://www.heise.de
*
* is released under the MIT License
http://www.opensource.org/licenses/mit-license.php
*
* Spread the word, link to us if you can.
*/
(function ($) {
"use
strict";
/*
* helper functions
*/
//
abbreviate at last blank before length and add "\u2026" (horizontal
ellipsis)
function abbreviateText(text,
length) {
var abbreviated =
decodeURIComponent(text);
if (abbreviated.length <= length)
{
return text;
}
var lastWhitespaceIndex =
abbreviated.substring(0, length - 1).lastIndexOf(' ');
abbreviated =
encodeURIComponent(abbreviated.substring(0, lastWhitespaceIndex)) + "\u2026";
return abbreviated;
}
//
returns content of <meta name="" content=""> tags or
'' if empty/non existant
function getMeta(name) {
var metaContent = $('meta[name="' + name + '"]').attr('content');
return metaContent || '';
}
//
create tweet text from content of <meta name="DC.title"> and
<meta name="DC.creator">
//
fallback to content of <title> tag
function getTweetText() {
var title = getMeta('DC.title');
var creator = getMeta('DC.creator');
if (title.length > 0 &&
creator.length > 0) {
title += ' - ' + creator;
} else {
title = $('title').text();
}
return encodeURIComponent(title);
}
//
build URI from rel="canonical" or document.location
function getURI() {
var uri = document.location.href;
var canonical = $("link[rel=canonical]").attr("href");
if (canonical &&
canonical.length > 0) {
if (canonical.indexOf("http") < 0) {
canonical =
document.location.protocol + "//" + document.location.host + canonical;
}
uri = canonical;
}
return uri;
}
function cookieSet(name, value,
days, path, domain) {
var expires = new Date();
expires.setTime(expires.getTime() + (days
* 24 * 60 * 60 * 1000));
document.cookie = name + '=' + value + '; expires=' + expires.toUTCString() + '; path=' + path + '; domain=' + domain;
}
function cookieDel(name, value,
path, domain) {
var expires = new Date();
expires.setTime(expires.getTime() -
100);
document.cookie = name + '=' + value + '; expires=' + expires.toUTCString() + '; path=' + path + '; domain=' + domain;
}
//
extend jquery with our plugin function
$.fn.socialSharePrivacy = function (settings) {
var defaults = {
'services': {
'facebook': {
'status': 'on',
'dummy_img': 'images/dummy_facebook.png',
'txt_info': '2 Klicks für mehr Datenschutz: Erst wenn Sie
hier klicken, wird der Button aktiv und Sie können Ihre Empfehlung an
Facebook senden. Schon beim Aktivieren werden Daten an Dritte
übertragen – siehe <em>i</em>.',
'txt_fb_off': 'nicht mit Facebook verbunden',
'txt_fb_on': 'mit Facebook verbunden',
'perma_option': 'on',
'display_name': 'Facebook',
'referrer_track': '',
'language': 'de_DE',
'action': 'recommend'
},
'twitter': {
'status': 'on',
'dummy_img': 'images/dummy_twitter.png',
'txt_info': '2 Klicks für mehr Datenschutz: Erst wenn Sie
hier klicken, wird der Button aktiv und Sie können Ihre Empfehlung an
Twitter senden. Schon beim Aktivieren werden Daten an Dritte
übertragen – siehe <em>i</em>.',
'txt_twitter_off': 'nicht mit Twitter verbunden',
'txt_twitter_on': 'mit Twitter verbunden',
'perma_option': 'on',
'display_name': 'Twitter',
'referrer_track': '',
'tweet_text': getTweetText,
'language': 'en'
},
'gplus': {
'status': 'on',
'dummy_img': 'images/dummy_gplus.png',
'txt_info': '2 Klicks für mehr Datenschutz: Erst wenn Sie
hier klicken, wird der Button aktiv und Sie können Ihre Empfehlung an
Google+ senden. Schon beim Aktivieren werden Daten an Dritte
übertragen – siehe <em>i</em>.',
'txt_gplus_off': 'nicht mit Google+ verbunden',
'txt_gplus_on': 'mit Google+ verbunden',
'perma_option': 'on',
'display_name': 'Google +1',
'referrer_track': '',
'language': 'de'
},
'gshare': {
'status': 'on',
'dummy_img': 'images/dummy_gshare.png',
'txt_info': '2 Klicks für mehr Datenschutz: Erst wenn Sie
hier klicken, wird der Button aktiv und Sie können Ihre Empfehlung an
Google+ senden. Schon beim Aktivieren werden Daten an Dritte
übertragen – siehe <em>i</em>.',
'txt_gshare_off': 'nicht mit Google+ verbunden',
'txt_gshare_on': 'mit Google+ verbunden',
'perma_option': 'on',
'display_name': 'Google+ Teilen',
'referrer_track': '',
'language': 'de'
}
},
'info_link': '/impressum#socialshareprivacy',
'txt_help': 'Wenn Sie diese Felder durch
einen Klick aktivieren, werden Informationen an Facebook, Twitter oder Google
in die USA übertragen und unter Umständen auch dort
gespeichert. Näheres erfahren Sie durch einen Klick auf das
<em>i</em>.',
'settings_perma': 'Dauerhaft aktivieren und
Datenüber­tragung zustimmen:',
'cookie_path': '/',
'cookie_domain': document.location.host,
'cookie_expires': '365',
'uri': getURI
};
//
Standardwerte des Plug-Ings mit den vom User angegebenen Optionen
ueberschreiben
var options = $.extend(true, defaults, settings);
var facebook_on = (options.services.facebook.status === 'on');
var twitter_on = (options.services.twitter.status === 'on');
var gplus_on = (options.services.gplus.status === 'on');
var gshare_on = (options.services.gshare.status === 'on');
// check
if at least one service is "on"
if (!facebook_on && !twitter_on && !gplus_on
&& !gshare_on) {
return;
}
$(this).prepend('<ul
class="social_share_privacy_area"></ul>');
var context = $('.social_share_privacy_area', this);
//
canonical uri that will be shared
var uri = options.uri;
if (typeof uri === 'function') {
uri = uri();
}
return this.each(function () {
//
//
Facebook
//
if (facebook_on) {
var fb_enc_uri = encodeURIComponent(uri +
options.services.facebook.referrer_track);
var fb_code = '<iframe
src="http://www.facebook.com/plugins/like.php?locale=' + options.services.facebook.language + '&href=' +
fb_enc_uri + '&send=false&layout=button_count&width=120&show_faces=false&action=' + options.services.facebook.action + '&colorscheme=light&font&height=21"
scrolling="no" frameborder="0" style="border:none;
overflow:hidden; width:145px; height:21px;"
allowTransparency="true"></iframe>';
var fb_dummy_btn = '<img
src="' + options.services.facebook.dummy_img + '" alt="Facebook
"Like"-Dummy" class="fb_like_privacy_dummy"
/>';
context.append('<li class="facebook help_info"><span
class="info">' +
options.services.facebook.txt_info + '</span><span
class="switch off">' +
options.services.facebook.txt_fb_off + '</span><div
class="fb_like dummy_btn">' +
fb_dummy_btn + '</div></li>');
var $container_fb = $('li.facebook', context);
$('li.facebook div.fb_like
img.fb_like_privacy_dummy,li.facebook span.switch', context).live('click', function () {
if ($container_fb.find('span.switch').hasClass('off')) {
$container_fb.addClass('info_off');
$container_fb.find('span.switch').addClass('on').removeClass('off').html(options.services.facebook.txt_fb_on);
$container_fb.find('img.fb_like_privacy_dummy').replaceWith(fb_code);
} else {
$container_fb.removeClass('info_off');
$container_fb.find('span.switch').addClass('off').removeClass('on').html(options.services.facebook.txt_fb_off);
$container_fb.find('.fb_like').html(fb_dummy_btn);
}
});
}
//
//
Twitter
//
if (twitter_on) {
var text = options.services.twitter.tweet_text;
if (typeof text === 'function') {
text = text();
}
//
120 is the max character count left after twitters automatic url shortening
with t.co
text = abbreviateText(text, '120');
var twitter_enc_uri = encodeURIComponent(uri +
options.services.twitter.referrer_track);
var twitter_count_url = encodeURIComponent(uri);
var twitter_code = '<iframe
allowtransparency="true" frameborder="0"
scrolling="no"
src="http://platform.twitter.com/widgets/tweet_button.html?url=' + twitter_enc_uri + '&counturl=' + twitter_count_url + '&text=' + text + '&count=horizontal&lang=' + options.services.twitter.language + '" style="width:130px;
height:25px;"></iframe>';
var twitter_dummy_btn = '<img
src="' + options.services.twitter.dummy_img + '" alt=""Tweet
this"-Dummy" class="tweet_this_dummy" />';
context.append('<li class="twitter help_info"><span
class="info">' +
options.services.twitter.txt_info + '</span><span
class="switch off">' +
options.services.twitter.txt_twitter_off + '</span><div
class="tweet dummy_btn">' +
twitter_dummy_btn + '</div></li>');
var $container_tw = $('li.twitter', context);
$('li.twitter div.tweet img,li.twitter span.switch', context).live('click', function () {
if ($container_tw.find('span.switch').hasClass('off')) {
$container_tw.addClass('info_off');
$container_tw.find('span.switch').addClass('on').removeClass('off').html(options.services.twitter.txt_twitter_on);
$container_tw.find('img.tweet_this_dummy').replaceWith(twitter_code);
} else {
$container_tw.removeClass('info_off');
$container_tw.find('span.switch').addClass('off').removeClass('on').html(options.services.twitter.txt_twitter_off);
$container_tw.find('.tweet').html(twitter_dummy_btn);
}
});
}
//
//
Google +1
//
if (gplus_on) {
//
fuer G+ wird die URL nicht encoded, da das zu einem Fehler fuehrt
var gplus_uri = uri + options.services.gplus.referrer_track;
//
we use the Google+ "asynchronous" code, standard code is flaky if
inserted into dom after load
var gplus_code = '<div
class="g-plusone" data-size="medium" data-href="' + gplus_uri + '"></div><script
type="text/javascript">window.___gcfg = {lang: "' + options.services.gplus.language + '"}; (function() { var po =
document.createElement("script"); po.type =
"text/javascript"; po.async = true; po.src =
"https://apis.google.com/js/plusone.js"; var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(po, s); })(); </script>';
var gplus_dummy_btn = '<img
src="' + options.services.gplus.dummy_img + '" alt=""Google+1"-Dummy"
class="gplus_one_dummy" />';
context.append('<li class="gplus help_info"><span
class="info">' +
options.services.gplus.txt_info + '</span><span
class="switch off">' +
options.services.gplus.txt_gplus_off + '</span><div
class="gplusone dummy_btn">' +
gplus_dummy_btn + '</div></li>');
var $container_gplus = $('li.gplus', context);
$('li.gplus div.gplusone img,li.gplus span.switch', context).live('click', function () {
if ($container_gplus.find('span.switch').hasClass('off')) {
$container_gplus.addClass('info_off');
$container_gplus.find('span.switch').addClass('on').removeClass('off').html(options.services.gplus.txt_gplus_on);
$container_gplus.find('img.gplus_one_dummy').replaceWith(gplus_code);
} else {
$container_gplus.removeClass('info_off');
$container_gplus.find('span.switch').addClass('off').removeClass('on').html(options.services.gplus.txt_gplus_off);
$container_gplus.find('.gplusone').html(gplus_dummy_btn);
}
});
}
//
//
Google+ Share
//
if (gshare_on) {
//
fuer G+ wird die URL nicht encoded, da das zu einem Fehler fuehrt
var gshare_uri = uri + options.services.gplus.referrer_track;
//
we use the Google+ "asynchronous" code, standard code is flaky if
inserted into dom after load
var gshare_code = '<div
class="g-plus" data-action="share"
data-annotation="bubble" data-href="' + gshare_uri + '"></div><script
type="text/javascript">window.___gcfg = {lang: "' + options.services.gshare.language + '"}; (function() { var po =
document.createElement("script"); po.type =
"text/javascript"; po.async = true; po.src =
"https://apis.google.com/js/plusone.js"; var s =
document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(po, s); })();</script>';
var gshare_dummy_btn = '<img
src="' + options.services.gshare.dummy_img + '" alt=""Google+
Share"-Dummy" class="gshare_one_dummy" />';
context.append('<li class="gshare help_info"><span
class="info">' +
options.services.gshare.txt_info + '</span><span
class="switch off">' +
options.services.gshare.txt_gshare_off + '</span><div
class="gsharebtn dummy_btn">' +
gshare_dummy_btn + '</div></li>');
var $container_gshare = $('li.gshare', context);
$('li.gshare div.gplusone img,li.gshare span.switch', context).live('click', function () {
if ($container_gshare.find('span.switch').hasClass('off')) {
$container_gshare.addClass('info_off');
$container_gshare.find('span.switch').addClass('on').removeClass('off').html(options.services.gshare.txt_gshare_on);
$container_gshare.find('img.gshare_one_dummy').replaceWith(gshare_code);
} else {
$container_gshare.removeClass('info_off');
$container_gshare.find('span.switch').addClass('off').removeClass('on').html(options.services.gshare.txt_gshare_off);
$container_gshare.find('.gsharebtn').html(gshare_dummy_btn);
}
});
}
//
// Der
Info/Settings-Bereich wird eingebunden
//
context.append('<li class="settings_info"><div
class="settings_info_menu off perma_option_off"><a href="' + options.info_link + '"><span
class="help_info icon"><span class="info">' + options.txt_help + '</span></span></a></div></li>');
//
Info-Overlays mit leichter Verzoegerung einblenden
$('.help_info:not(.info_off)', context).live('mouseenter', function () {
var $info_wrapper = $(this);
var timeout_id = window.setTimeout(function () {
$($info_wrapper).addClass('display'); }, 500);
$(this).data('timeout_id',
timeout_id);
});
$('.help_info', context).live('mouseleave', function () {
var timeout_id = $(this).data('timeout_id');
window.clearTimeout(timeout_id);
if ($(this).hasClass('display')) {
$(this).removeClass('display');
}
});
var facebook_perma = (options.services.facebook.perma_option
=== 'on');
var twitter_perma = (options.services.twitter.perma_option
=== 'on');
var gplus_perma = (options.services.gplus.perma_option === 'on');
var gshare_perma = (options.services.gshare.perma_option === 'on');
// Menue
zum dauerhaften Einblenden der aktiven Dienste via Cookie einbinden
// Die
IE7 wird hier ausgenommen, da er kein JSON kann und die Cookies hier ueber
JSON-Struktur abgebildet werden
if (((facebook_on && facebook_perma)
|| (twitter_on &&
twitter_perma)
|| (gplus_on &&
gplus_perma)
|| (gshare_on &&
gshare_perma))
&& (!$.browser.msie
|| ($.browser.msie && $.browser.version > 7.0))) {
//
Cookies abrufen
var cookie_list = document.cookie.split(';');
var cookies = '{';
var i = 0;
for (; i <
cookie_list.length; i += 1) {
var foo = cookie_list[i].split('=');
cookies += '"' + $.trim(foo[0]) + '":"' +
$.trim(foo[1]) + '"';
if (i < cookie_list.length -
1) {
cookies += ',';
}
}
cookies += '}';
cookies =
JSON.parse(cookies);
// Container definieren
var $container_settings_info =
$('li.settings_info', context);
// Klasse entfernen, die das i-Icon alleine formatiert, da
Perma-Optionen eingeblendet werden
$container_settings_info.find('.settings_info_menu').removeClass('perma_option_off');
// Perma-Optionen-Icon (.settings) und Formular (noch
versteckt) einbinden
$container_settings_info.find('.settings_info_menu').append('<span
class="settings">Einstellungen</span><form><fieldset><legend>' + options.settings_perma + '</legend></fieldset></form>');
// Die Dienste mit <input> und <label>, sowie
checked-Status laut Cookie, schreiben
var checked = ' checked="checked"';
if (facebook_on &&
facebook_perma) {
var perma_status_facebook =
cookies.socialSharePrivacy_facebook === 'perma_on' ? checked : '';
$container_settings_info.find('form
fieldset').append(
'<input type="checkbox"
name="perma_status_facebook" id="perma_status_facebook"'
+
perma_status_facebook + ' /><label
for="perma_status_facebook">'
+
options.services.facebook.display_name + '</label>'
);
}
if (twitter_on &&
twitter_perma) {
var perma_status_twitter =
cookies.socialSharePrivacy_twitter === 'perma_on' ? checked : '';
$container_settings_info.find('form fieldset').append(
'<input type="checkbox"
name="perma_status_twitter" id="perma_status_twitter"'
+
perma_status_twitter + ' /><label
for="perma_status_twitter">'
+ options.services.twitter.display_name
+ '</label>'
);
}
if (gplus_on &&
gplus_perma) {
var perma_status_gplus =
cookies.socialSharePrivacy_gplus === 'perma_on' ? checked : '';
$container_settings_info.find('form
fieldset').append(
'<input type="checkbox"
name="perma_status_gplus" id="perma_status_gplus"'
+ perma_status_gplus
+ ' /><label
for="perma_status_gplus">'
+
options.services.gplus.display_name + '</label>'
);
}
if (gshare_on &&
gshare_perma) {
var perma_status_gshare =
cookies.socialSharePrivacy_gshare === 'perma_on' ? checked : '';
$container_settings_info.find('form
fieldset').append(
'<input type="checkbox"
name="perma_status_gshare" id="perma_status_gshare"'
+
perma_status_gshare + ' /><label
for="perma_status_gshare">'
+
options.services.gshare.display_name + '</label>'
);
}
// Cursor auf Pointer setzen fuer das Zahnrad
$container_settings_info.find('span.settings').css('cursor', 'pointer');
// Einstellungs-Menue bei mouseover ein-/ausblenden
$($container_settings_info.find('span.settings'), context).live('mouseenter', function () {
var timeout_id =
window.setTimeout(function () { $container_settings_info.find('.settings_info_menu').removeClass('off').addClass('on'); }, 500);
$(this).data('timeout_id',
timeout_id);
});
$($container_settings_info, context).live('mouseleave', function () {
var timeout_id = $(this).data('timeout_id');
window.clearTimeout(timeout_id);
$container_settings_info.find('.settings_info_menu').removeClass('on').addClass('off');
});
// Klick-Interaktion auf <input> um Dienste
dauerhaft ein- oder auszuschalten (Cookie wird gesetzt oder geloescht)
$($container_settings_info.find('fieldset
input')).live('click', function (event) {
var click = event.target.id;
var service =
click.substr(click.lastIndexOf('_') + 1, click.length);
var cookie_name = 'socialSharePrivacy_' +
service;
if ($('#' + event.target.id + ':checked').length) {
cookieSet(cookie_name, 'perma_on', options.cookie_expires, options.cookie_path,
options.cookie_domain);
$('form fieldset label[for=' +
click + ']',
context).addClass('checked');
} else {
cookieDel(cookie_name, 'perma_on', options.cookie_path, options.cookie_domain);
$('form fieldset label[for=' +
click + ']',
context).removeClass('checked');
}
});
// Dienste automatisch einbinden, wenn entsprechendes
Cookie vorhanden ist
if (facebook_on &&
facebook_perma && cookies.socialSharePrivacy_facebook === 'perma_on') {
$('li.facebook span.switch',
context).click();
}
if (twitter_on &&
twitter_perma && cookies.socialSharePrivacy_twitter === 'perma_on') {
$('li.twitter span.switch',
context).click();
}
if (gplus_on &&
gplus_perma && cookies.socialSharePrivacy_gplus === 'perma_on') {
$('li.gplus span.switch',
context).click();
}
if (gshare_on &&
gshare_perma && cookies.socialSharePrivacy_gshare === 'perma_on') {
$('li.gshare span.switch',
context).click();
}
}
}); //
this.each(function ()
};
// $.fn.socialSharePrivacy = function
(settings) {
}(jQuery));
After editing JavaScript files, it's better to compress them for better performance. I use
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"
></script>
<script type="text/javascript" src="jquery.socialshareprivacy.js"
></script>
<script type="text/javascript">
jQuery(document).ready(function ($) {
if ($('#socialshareprivacy').length > 0) {
$('#socialshareprivacy').socialSharePrivacy();
}
});
</script>
<style>
.social_share_privacy_area
{
clear:
both;
margin:
20px 0 !important;
list-style-type:
none;
padding:
0 !important;
width:
auto;
height:
25px;
display:
block;
}
.social_share_privacy_area
li {
margin:
0 !important;
padding:
0 !important;
height:
21px;
float:
left;
}
.social_share_privacy_area
li .dummy_btn
{
float:
left;
margin:
0 0 0 2px;
cursor:
pointer;
padding:
0;
height:
inherit;
}
.social_share_privacy_area
li div iframe {
overflow:
hidden;
height:
inherit;
width:
inherit;
}
/* Facebook
begin */
.social_share_privacy_area
.facebook {
width:
143px;
display:
inline-block;
}
.social_share_privacy_area
.facebook .fb_like
{
width:
110px;
}
/* Facebook
end */
/* Twitter
begin */
.social_share_privacy_area
.twitter {
width:
115px;
}
.social_share_privacy_area
li div.tweet
{
width:
85px;
}
/* Twitter
end */
/* Google
+1 begin */
.social_share_privacy_area
.gplus {
width:
95px;
}
.social_share_privacy_area
li div.gplusone
{
width:
60px;
}
/* Google
+1 end */
/* Google+
Share begin */
.social_share_privacy_area
.gshare {
width:
125px;
}
.social_share_privacy_area
li div.gsharebtn
{
width:
90px;
}
/* Google+
Share end */
/* Switch
begin */
.social_share_privacy_area
li .switch
{
display:
inline-block;
text-indent:
-9999em;
background:
transparent url('socialshareprivacy_on_off.png')
no-repeat 0 0 scroll;
width:
23px;
height:
12px;
overflow:
hidden;
float:
left;
margin:
4px 0 0;
padding:
0;
cursor:
pointer;
}
.social_share_privacy_area
li .switch.on
{
background-position:
0 -12px;
}
/* Switch
end */
/* Tooltips
begin */
.social_share_privacy_area
li.help_info {
position:
relative;
}
.social_share_privacy_area
li.help_info .info,
.social_share_privacy_area
li .help_info.icon
.info {
display:
none;
position:
absolute;
bottom:
40px;
left:
0;
width:
290px;
padding:
10px 15px;
margin:
0;
font-size:
12px;
line-height:
16px;
font-weight:
bold;
border:
1px solid #ccc;
-moz-border-radius:
4px;
-webkit-border-radius:
4px;
border-radius:
4px;
-moz-box-shadow:
0 3px 4px #999;
-webkit-box-shadow:
0 3px 4px #999;
box-shadow:
0 3px 4px #999;
background-color:
#fdfbec;
color:
#000;
z-index:
500;
}
.social_share_privacy_area
li.gplus.help_info .info
{
left:
-60px;
}
.social_share_privacy_area
li .help_info.icon
.info {
left:
-243px;
width:
350px;
}
.social_share_privacy_area
li.help_info.display .info,
.social_share_privacy_area
li .help_info.icon.display
.info {
display:
block;
}
.social_share_privacy_area
li.help_info.info_off.display .info {
display:
none;
}
.social_share_privacy_area
li .help_info.icon
{
background:
#fff url('socialshareprivacy_info.png')
no-repeat center
center scroll;
width:
25px;
height:
20px;
position:
relative;
display:
inline-block;
vertical-align:
top;
border: 2px solid #e7e3e3;
border-right-width: 0;
-moz-border-radius: 5px
0 0 5px;
-webkit-border-radius: 5px
0 0 5px;
border-radius:
5px 0 0 5px;
margin:
0;
padding:
0;
}
.social_share_privacy_area
li.settings_info .settings_info_menu.on
.help_info.icon {
border-top-width:
0;
border-left-width:
0;
}
.social_share_privacy_area li.settings_info
.settings_info_menu.perma_option_off .help_info.icon {
border-right-width:
2px;
-moz-border-radius:
5px;
-webkit-border-radius:
5px;
border-radius:
5px;
}
/* Tooltips
end */
/*
Settings/Info begin */
.social_share_privacy_area
li.settings_info {
position:
relative;
top:
-2px;
}
.social_share_privacy_area
li.settings_info a
{
text-decoration:
none;
margin:
0 !important;
}
.social_share_privacy_area
li.settings_info .settings_info_menu
{
background-color:
#f3f4f5;
border:
2px solid #e7e3e3;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius:
5px;
-moz-box-shadow:
2px 2px 3px #c1c1c1;
-webkit-box-shadow:
2px 2px 3px #c1c1c1;
box-shadow:
3px 3px 3px #c1c1c1;
left:
0;
position:
absolute;
top:
0;
width:
135px;
z-index:
1000;
margin:
0;
padding:
0;
}
.social_share_privacy_area
li.settings_info .settings_info_menu
{
margin-left:
15px;
}
.social_share_privacy_area
li.settings_info .settings_info_menu.off
{
border-width:
0;
-moz-box-shadow:
none;
-webkit-box-shadow:
none;
box-shadow:
none;
background-color:
transparent;
}
.social_share_privacy_area
li.settings_info .settings_info_menu.off
form {
display:
none;
margin:
0;
padding:
0;
}
.social_share_privacy_area
li.settings_info .settings_info_menu
.settings {
text-indent:
-9999em;
display:
inline-block;
background:
#fff url('settings.png')
no-repeat center
center scroll;
width: 25px;
height: 20px;
border: 2px solid #e7e3e3;
-moz-border-radius: 0 5px 5px 0;
-webkit-border-radius: 0
5px 5px 0;
border-radius:
0 5px 5px 0;
border-left:
1px solid #ddd;
margin:
0;
padding:
0;
}
.social_share_privacy_area
li.settings_info .settings_info_menu.on
.settings {
border-top-width:
0;
}
.social_share_privacy_area
li.settings_info .settings_info_menu
form fieldset
{
border-width:
0;
margin:
0;
padding:
0 10px 10px;
}
.social_share_privacy_area
li.settings_info .settings_info_menu
form fieldset
legend {
font-size:
11px;
font-weight:
bold;
line-height:
14px;
margin:
0;
padding:
10px 0;
width:
115px;
}
.social_share_privacy_area
li.settings_info .settings_info_menu
form fieldset
input {
clear:
both;
float:
left;
margin:
4px 10px 4px 0;
padding:
0;
}
.social_share_privacy_area
li.settings_info .settings_info_menu
form fieldset
label {
display:
inline-block;
float:
left;
font-size:
12px;
font-weight:
bold;
line-height:
24px;
-moz-transition:
color .5s ease-in;
-webkit-transition:
color .5s ease-in;
transition:
color .5s ease-in;
margin:
0;
padding:
0;
}
.social_share_privacy_area
li.settings_info .settings_info_menu
form fieldset
label.checked {
color:
#090;
}
/*
Settings/Info end */
</style>
<div id="socialshareprivacy"></div>
