Instantly share code, notes, and snippets.
-
Save Mononofu/2046055 to your computer and use it in GitHub Desktop.
socialshareprivacy inline, without jQuery
This file contains 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
| .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 */ |
This file contains 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 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&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>', | |
| "img-html": '<img src="{{ root_url }}/images/dummy_facebook.png" alt="Facebook "Like"-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 }}&counturl={{ site.url | urlencode }}{{ page.url | urlencode }}&text={{ page.title | urlencode }}&count=horizontal&lang=en" style="width:130px; height:25px;"></iframe>', | |
| "img-html": '<img src="{{ root_url }}/images/dummy_twitter.png" alt=""Tweet this"-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 }}&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>', | |
| "img-html": '<img src="{{ root_url }}/images/dummy_gplus.png" alt=""Google+1"-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&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=""Reddit"-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=""Reddit"-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