Skip to content

Instantly share code, notes, and snippets.

@Mononofu
Created March 15, 2012 18:59
Show Gist options
  • Save Mononofu/2046055 to your computer and use it in GitHub Desktop.
Save Mononofu/2046055 to your computer and use it in GitHub Desktop.
socialshareprivacy inline, without jQuery
.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 10px;
cursor: pointer;
padding: 0;
height: inherit;
}
/* Facebook begin */
.social_share_privacy_area .facebook {
width: 180px;
display: inline-block;
}
.social_share_privacy_area .facebook .fb_like iframe {
width: 145px;
}
/* Facebook end */
/* Twitter begin */
.social_share_privacy_area .twitter {
width: 148px;
}
.social_share_privacy_area li div.tweet {
width: 115px;
}
/* Twitter end */
/* Google+ begin */
.social_share_privacy_area .gplus {
width: 123px;
}
.social_share_privacy_area li div.gplusone {
width: 90px;
}
/* Google+ end */
/* Reddit begin */
.social_share_privacy_area .reddit {
width: 183px;
}
.social_share_privacy_area li div.reddit {
width: 150px;
}
/* Reddit end */
/* HN begin */
.social_share_privacy_area .hackernews {
width: 133px;
}
.social_share_privacy_area li div.hackernews {
width: 100px;
}
.social_share_privacy_area li div.hackernews iframe {
position: relative;
top: -8px;
left: -7px;
}
/* HN end */
/* Switch begin */
.social_share_privacy_area li .switch {
display: inline-block;
text-indent: -9999em;
background: transparent url(/images/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 div img {
border-width: 0;
}
/* Tooltips end */
<div class="sharing">
<ul class="social_share_privacy_area">
<li class="facebook help_info">
<span class="info" id="facebook-info">2 clicks for more privacy: The Facebook button will only load after you click here, so no data will be sent unless you actively allow it.</span>
<span class="switch off"
id="fb-switch"
onclick="toggle('fb');">not connected to Facebook</span>
<div class="fb_like dummy_btn" id="fb-like"
onmouseover="if(!networks['fb']['on']) document.getElementById('facebook-info').style.display='block';"
onmouseout="document.getElementById('facebook-info').style.display='none';">
</div>
</li>
<li class="twitter help_info">
<span class="info" id="tweet-info">2 clicks for more privacy: The Twitter button will only load after you click here, so no data will be sent unless you actively allow it.</span>
<span class="switch off"
id="tw-switch"
onclick="toggle('tw');">not connected to Twitter</span>
<div class="tweet dummy_btn" id="tw-like"
onmouseover="if(!networks['tw']['on']) document.getElementById('tweet-info').style.display='block';"
onmouseout="document.getElementById('tweet-info').style.display='none';">
</div>
</li>
<li class="gplus help_info">
<span class="info" id="gplus-info">2 clicks for more privacy: The Google+ button will only load after you click here, so no data will be sent unless you actively allow it.</span>
<span class="switch off"
id="gp-switch"
onclick="toggle('gp');">not connected to Google+</span>
<div class="gplusone dummy_btn" id="gp-like"
onmouseover="if(!networks['gp']['on']) document.getElementById('gplus-info').style.display='block';"
onmouseout="document.getElementById('gplus-info').style.display='none';">
</div>
</li>
<li class="reddit help_info">
<span class="info" id="reddit-info">2 clicks for more privacy: The Reddit button will only load after you click here, so no data will be sent unless you actively allow it.</span>
<span class="switch off"
id="rd-switch"
onclick="toggle('rd');">not connected to Reddit</span>
<div class="reddit dummy_btn" id="rd-like"
onmouseover="if(!networks['rd']['on']) document.getElementById('reddit-info').style.display='block';"
onmouseout="document.getElementById('reddit-info').style.display='none';"
width="130px">
</div>
</li>
<li class="hackernews help_info">
<span class="info" id="hackernews-info">2 clicks for more privacy: The HackerNews button will only load after you click here, so no data will be sent unless you actively allow it.</span>
<span class="switch off"
id="hn-switch"
onclick="toggle('hn');">not connected to HackerNews</span>
<div class="hackernews dummy_btn" id="hn-like"
onmouseover="if(!networks['hn']['on']) document.getElementById('hackernews-info').style.display='block';"
onmouseout="document.getElementById('hackernews-info').style.display='none';">
</div>
</li>
</ul>
</div>
<script>
var networks = {
"fb": {
"name": "Facebook",
"on": true,
"btn-html": '<iframe src="http://www.facebook.com/plugins/like.php?locale=en_US&amp;href={{ site.url | urlencode }}{{ page.url | urlencode }}&amp;send=false&amp;layout=button_count&amp;width=120&amp;show_faces=false&amp;action=recommend&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:145px; height:21px;" allowtransparency="true"></iframe>',
"img-html": '<img src="{{ root_url }}/images/dummy_facebook.png" alt="Facebook &quot;Like&quot;-Dummy" class="fb_like_privacy_dummy" onclick="toggle(\'fb\');">'
},
"tw": {
"name": "Twitter",
"on": true,
"btn-html": '<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/tweet_button.html?url={{ site.url | urlencode }}{{ page.url | urlencode }}&amp;counturl={{ site.url | urlencode }}{{ page.url | urlencode }}&amp;text={{ page.title | urlencode }}&amp;count=horizontal&amp;lang=en" style="width:130px; height:25px;"></iframe>',
"img-html": '<img src="{{ root_url }}/images/dummy_twitter.png" alt="&quot;Tweet this&quot;-Dummy" class="tweet_this_dummy" onclick="toggle(\'tw\');">'
},
"gp": {
"name": "Google+",
"on": true,
"btn-html": '<div id="___plusone_0" style="height: 20px; width: 90px; display: inline-block; text-indent: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; "><iframe allowtransparency="true" frameborder="0" hspace="0" id="I1_1331815463594" marginheight="0" marginwidth="0" name="I1_1331815463594" scrolling="no" src="https://plusone.google.com/_/+1/fastbutton?url={{ site.url | urlencode }}{{ page.url | urlencode }}&amp;size=medium&amp;count=true&amp;hl=de&amp;jsh=m%3B%2F_%2Fapps-static%2F_%2Fjs%2Fgapi%2F__features__%2Frt%3Dj%2Fver%3D-ZAiwCF-rcM.en_GB.%2Fsv%3D1%2Fam%3D!Fpfk5B9U9k6IcXVdRg%2Fd%3D1#id=I1_1331815463594&amp;parent=http%3A%2F%2Fwww.furidamu.org&amp;rpctoken=363101237&amp;_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart" style="width: 90px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; height: 20px; position: static; left: 0px; top: 0px; visibility: visible; " tabindex="0" vspace="0" width="100%" title="+1"></iframe></div>',
"img-html": '<img src="{{ root_url }}/images/dummy_gplus.png" alt="&quot;Google+1&quot;-Dummy" class="gplus_one_dummy" onclick="toggle(\'gp\');">'
},
"rd": {
"name": "Reddit",
"on": true,
"btn-html": '<iframe src="http://www.reddit.com/static/button/button1.html?width=50&amp;url={{ site.url | urlencode }}{{ page.url | urlencode }}" height="22" width="120" scrolling="no" frameborder="0" id="rd-frame"></iframe>',
"img-html": '<img src="{{ root_url }}/images/dummy_reddit.png" alt="&quot;Reddit&quot;-Dummy" class="reddit_dummy" onclick="toggle(\'rd\');">'
},
"hn": {
"name": "HackerNews",
"on": true,
"btn-html": '<iframe frameborder="no" scrolling="no" height="40px" width="120px" src="http://hnlike.com/upvote.php?link={{ site.url | urlencode }}{{ page.url | urlencode }}&title={{ page.title | urlencode }}">iframes not supported by your browser</iframe>',
"img-html": '<img src="{{ root_url }}/images/dummy_hackernews.png" alt="&quot;Reddit&quot;-Dummy" class="reddit_dummy" onclick="toggle(\'hn\');" style="box-shadow:none;">'
}
};
for(var id in networks) {
toggle(id);
}
function toggle(id) {
if(networks[id]["on"]) {
document.getElementById(id + '-switch').setAttribute('class', 'switch off');
document.getElementById(id + "-like").innerHTML = networks[id]["img-html"];
}
else {
document.getElementById(id + '-switch').setAttribute('class', 'switch on');
document.getElementById(id + "-like").innerHTML = networks[id]["btn-html"];
if(id == "rd") {
document.getElementById('rd-frame').setAttribute('width', '120px');
}
}
networks[id]["on"] = !networks[id]["on"];
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment