Instantly share code, notes, and snippets.
-
Star
3
(3)
You must be signed in to star a gist -
Fork
1
(1)
You must be signed in to fork a gist
-
-
Save Mononofu/2046055 to your computer and use it in GitHub Desktop.
socialshareprivacy inline, without jQuery
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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 "Like"-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&href={{ site.url | urlencode }}{{ page.url | urlencode }}&send=false&layout=button_count&width=120&show_faces=false&action=recommend&colorscheme=light&font&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=""Tweet this"-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 }}&counturl={{ site.url | urlencode }}{{ page.url | urlencode }}&text={{ page.title | urlencode }}&count=horizontal&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=""Google+1"-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 }}&size=medium&count=true&hl=de&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&parent=http%3A%2F%2Fwww.furidamu.org&rpctoken=363101237&_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=""Reddit"-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&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=""Reddit"-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