We wanted to replace our default Facebook, Twitter and Google+ social buttons here on this site with something lightweight, fast and with more control over the look and feel. So after a long night of work, digitalpoint came up with this...
Benefits
Needs only 1 total HTTP request (~2KB)
SVG logos (infinitely scalable)
Asynchronous loading
Utilizes server-side and client-side caching
Parallel processing of APIs
Configurable look and feel with CSS
Privacy (networks can't track users' page views)
Works over SSL
User engagement shows in your Google Analytics
This implementation of social buttons has allowed us to trim a ton of "fat" from our page views. Faster page loads means happier users.
If you want to alter the size or layout of the buttons, you can do so with CSS. The buttons are inserted directly into the page DOM (no iframes or anything else that would prevent you from manipulating them with normal CSS). The easiest thing to so is put the code on a page to test it and play around with CSS styling from there.
Attribution
There is a small attribution link that displays when you hover over the buttons (try it in the upper left of this page to see what it looks like). If you would prefer to not have this (and you are a premium member of this site), you can verify the domains you would like to have it not show on over here.
If you want to specify a URL for the social buttons, you can specify it here (it will default to the page it's displayed on otherwise).
If you want to specify a title, you can specify it here (it will default to the page title otherwise).
If using Twitter, you can specify a Twitter account to suggest to the user to follow.
HTML code to use:
Get Creative
If you want to see an example of the same buttons that are larger and in a vertical orientation, you can see them over here. This is done by using the following CSS:
You can find another example on this site (used in conjunction with the Social Bar addon for XenForo).
Log in to view your Analytics, AdSense & PayPal stats
Benefits
- Needs only 1 total HTTP request (~2KB)
- SVG logos (infinitely scalable)
- Asynchronous loading
- Utilizes server-side and client-side caching
- Parallel processing of APIs
- Configurable look and feel with CSS
- Privacy (networks can't track users' page views)
- Works over SSL
- User engagement shows in your Google Analytics
This implementation of social buttons has allowed us to trim a ton of "fat" from our page views. Faster page loads means happier users.If you want to alter the size or layout of the buttons, you can do so with CSS. The buttons are inserted directly into the page DOM (no iframes or anything else that would prevent you from manipulating them with normal CSS). The easiest thing to so is put the code on a page to test it and play around with CSS styling from there.
Attribution
There is a small attribution link that displays when you hover over the buttons (try it in the upper left of this page to see what it looks like). If you would prefer to not have this (and you are a premium member of this site), you can verify the domains you would like to have it not show on over here.Still Need Help?
You can get help in the support forum over here.Configuration Settings:
If you want to specify a URL for the social buttons, you can specify it here (it will default to the page it's displayed on otherwise).
If you want to specify a title, you can specify it here (it will default to the page title otherwise).
If using Twitter, you can specify a Twitter account to suggest to the user to follow.