1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Social Button Configuration

Make your social buttons fast and lightweight.

Standard
Ours
Twitter
Yes
Yes
Facebook
Yes
Yes
Google+
Yes
Yes
Google Analytics Integration
Google+
All
HTTP Requests
20
1
Size
116KB
2KB
Time
~1.6s
<0.1s
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, 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.

Still Need Help?

You can get help in the support forum over here.

Configuration Settings:

Social Buttons To Include

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:
CSS example
  1. <style>
  2. .dp-s-b {
  3.     height: 130px;
  4. }
  5. .dp-s {
  6.     height: 160px;
  7. }
  8. .dp-s .dp-att {
  9.     height: auto !important;
  10.     width: 100% !important;
  11.     top: 0;
  12. }
  13. .dp-s>div:first-of-type, .dp-s>div {
  14.     -webkit-transform: scale(3);
  15.     transform: scale(3);
  16.     margin: 28px;
  17. }
  18. .dp-s>div:first-of-type {
  19.     margin-bottom: 50px;
  20. }
  21. </style>
You can find another example on this site (used in conjunction with the Social Bar addon for XenForo).