Asynchronous loading of all resources on hover Minimal CSS for styling the fake buttonsPage Size reduction by 300KB+All major social networks like Facebook , Twitter , Google+ , LinkedIn , Digg supported Currently supports Single Instance per pageHovering bug fixedOr you directly add the code below into a HTML/JavaScript Widget 02 | < tr > < td width = "100" >< a href = "#" id = 'twitter-widget' >Tweet</ a > |
03 | < a class = 'twitter-share-button' data-count = 'horizontal' data-related = "Your-Twitter-Handle" href = 'https://twitter.com/share' ></ a ></ td > < td width = "100" >< a href = "#" id = 'stumble-widget' >Stumble</ a > |
04 | < su:badge layout = "2" ></ su:badge ></ td > < td width = "100" >< a href = "#" id = 'google-widget' > 1</ a > |
05 | < span class = 'g-plusone' data-size = 'medium' ></ span ></ td > < td width = "100" >< a href = "#" id = 'facebook-widget' >Like</ a > |
06 | < div class = 'fb-like' data-layout = 'button_count' data-send = 'false' > |
08 | </ td > < td width = "100" >< a href = "#" id = 'digg-widget' >Digg</ a > |
09 | < a class = "DiggThisButton DiggCompact" ></ a ></ td > < td width = "100" >< a href = "#" id = 'linkedin-widget' >Share</ a > |
10 | < script type = "IN/Share" data-counter = "right" ></ script ></ td > </ tr > |
12 | < style type = "text/css" > |
14 | .fb-like {display:inline !important;} |
15 | #facebook-widget, .twitter-widget, .google-widget, .facebook-widget,#google-widget,#twitter-widget,#digg-widget,#stumble-widget, #linkedin-widget { border-radius:5px;color: #ffffff !important; display: inline-block; line-height: 22px; text-align: center; text-decoration: none;width: 55px;} |
16 | #facebook-widget, .facebook-widget { background: #3b5b99; } |
17 | #linkedin-widget { background: #069; } |
18 | #digg-widget {background:#FDFFB0;color:#716803 !important;} |
19 | #stumble-widget {background:red;} |
20 | #google-widget, .google-widget { background: #dd4b39; } |
21 | #twitter-widget ,.twitter-widget {background: #33ccff;} |
25 | < script type = 'text/javascript' > |
28 | element = document.getElementById('google-widget'); |
29 | element.onmouseover = function () { |
30 | this.onmouseover = null; |
31 | this.parentNode.removeChild(this); |
32 | script = document.createElement('script'); |
34 | script.src = '//apis.google.com/js/plusone.js'; |
35 | document.body.appendChild(script); |
37 | element = document.getElementById('stumble-widget'); |
38 | element.onmouseover = function () { |
39 | this.onmouseover = null; |
40 | this.parentNode.removeChild(this); |
41 | script = document.createElement('script'); |
43 | script.src = '//platform.stumbleupon.com/1/widgets.js'; |
44 | document.body.appendChild(script); |
46 | element = document.getElementById('digg-widget'); |
47 | element.onmouseover = function () { |
48 | this.onmouseover = null; |
49 | this.parentNode.removeChild(this); |
50 | script = document.createElement('script'); |
52 | script.src="//widgets.digg.com/buttons.js"; |
53 | document.body.appendChild(script); |
55 | element = document.getElementById('linkedin-widget'); |
56 | element.onmouseover = function () { |
57 | this.onmouseover = null; |
58 | this.parentNode.removeChild(this); |
59 | script = document.createElement('script'); |
61 | script.src="//platform.linkedin.com/in.js"; |
62 | document.body.appendChild(script); |
64 | element = document.getElementById('facebook-widget'); |
65 | element.onmouseover = function () { |
66 | this.onmouseover = null; |
67 | this.parentNode.removeChild(this); |
68 | script = document.createElement('script'); |
70 | script.src="//connect.facebook.net/en_US/all.js#xfbml=1&appId=133083533456136"; |
71 | document.body.appendChild(script); |
73 | element = document.getElementById('twitter-widget'); |
74 | element.onmouseover = function () { |
75 | this.onmouseover = null; |
76 | this.parentNode.removeChild(this); |
77 | script = document.createElement('script'); |
79 | script.src = '//platform.twitter.com/widgets.js'; |
80 | document.body.appendChild(script); |
Some Things to Take CareYou can extend this script for other social sharing buttons like Pinterest ,Delicious, etc
For it to work effective ,make sure to all scripts related to Social Media buttons are removed from your template
There is scope for improvement here specially for multiple instance on a single page.
Till the next update feel free to ask any difficulties you face while implementing this via comments
0 Response to "Lazy Loading Social Buttons v2 "
Posting Komentar