Skip to content

Instantly share code, notes, and snippets.

@Mononofu

Mononofu/share.css

Created March 15, 2012 18:59
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Mononofu/2046055 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Mononofu/2046055 to your computer and use it in GitHub Desktop.
Download ZIP
socialshareprivacy inline, without jQuery
Raw
gistfile1.js
<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 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="fb-switch"
onclick="toggle_fb();">not connected to Facebook</span>
<div class="fb_like dummy_btn" id="fb-like"
onmouseover="if(!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 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="tw-switch"
onclick="toggle_tw();">not connected to Twitter</span>
<div class="tweet dummy_btn" id="tw-like"
onmouseover="if(!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(!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(!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(!hn_on) document.getElementById('hackernews-info').style.display='block';"
onmouseout="document.getElementById('hackernews-info').style.display='none';">
</div>
</li>
</ul>
</div>
<script>
var fb_on = true;
var tw_on = true;
var gp_on = true;
var rd_on = true;
var hn_on = true;
toggle_fb();
toggle_tw();
toggle_gp();
toggle_rd();
toggle_hn();
function toggle_fb() {
if(fb_on) {
document.getElementById('fb-switch').setAttribute('class', 'switch off');
document.getElementById('fb-like').innerHTML = '<img src="{{ root_url }}/images/dummy_facebook.png" alt="Facebook &quot;Like&quot;-Dummy" class="fb_like_privacy_dummy" onclick="toggle_fb();">';
}
else {
document.getElementById('fb-switch').setAttribute('class', 'switch on');
document.getElementById('fb-like').innerHTML = '<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>';
}
fb_on = !fb_on;
}
function toggle_tw() {
if(tw_on) {
document.getElementById('tw-switch').setAttribute('class', 'switch off');
document.getElementById('tw-like').innerHTML = '<img src="{{ root_url }}/images/dummy_twitter.png" alt="&quot;Tweet this&quot;-Dummy" class="tweet_this_dummy" onclick="toggle_tw();">';
}
else {
document.getElementById('tw-switch').setAttribute('class', 'switch on');
document.getElementById('tw-like').innerHTML = '<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>';
}
tw_on = !tw_on;
}
function toggle_gp() {
if(gp_on) {
document.getElementById('gp-switch').setAttribute('class', 'switch off');
document.getElementById('gp-like').innerHTML = '<img src="{{ root_url }}/images/dummy_gplus.png" alt="&quot;Google+1&quot;-Dummy" class="gplus_one_dummy" onclick="toggle_gp();">';
}
else {
document.getElementById('gp-switch').setAttribute('class', 'switch on');
document.getElementById('gp-like').innerHTML = '<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>';
}
gp_on = !gp_on;
}
function toggle_rd() {
if(rd_on) {
document.getElementById('rd-switch').setAttribute('class', 'switch off');
document.getElementById('rd-like').innerHTML = '<img src="{{ root_url }}/images/dummy_reddit.png" alt="&quot;Reddit&quot;-Dummy" class="reddit_dummy" onclick="toggle_rd();">';
}
else {
document.getElementById('rd-switch').setAttribute('class', 'switch on');
document.getElementById('rd-like').innerHTML = '<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>';
document.getElementById('rd-frame').setAttribute('width', '120px');
}
rd_on = !rd_on;
}
function toggle_hn() {
if(hn_on) {
document.getElementById('hn-switch').setAttribute('class', 'switch off');
document.getElementById('hn-like').innerHTML = '<img src="{{ root_url }}/images/dummy_hackernews.png" alt="&quot;Reddit&quot;-Dummy" class="reddit_dummy" onclick="toggle_hn();" style="box-shadow:none;">';
}
else {
document.getElementById('hn-switch').setAttribute('class', 'switch on');
document.getElementById('hn-like').innerHTML = '<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>';
}
hn_on = !hn_on;
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment