jQuery POP'n SocialButton Plugin Examples

Default options

    $('.social-button.demo').popnSocialButton([ 'twitter', 'facebook', 'feedly', 'gplus', 'pocket' ], {
      url: 'http://www.jqueryscript.net/'
    });
    

Example2: Github repo

    $('.social-button.github-repo').popnSocialButton([ 'github' ], {
      githubRepo: 'ktty1220/jquery.popn-socialbutton'
    });
    

Example3: Feedly

    $('.social-button.feedly').popnSocialButton([ 'feedly' ], {
      feedUrl: 'http://feeds.feedburner.com/hatena/b/hotentry'
    });
    

Example4: Custom the share counters

    $('.social-button.google').popnSocialButton([ 'facebook', 'pocket', 'gplus', 'twitter', 'feedly' ], {
      url: 'http://www.google.com/',
      text: 'jquery', 
      feedUrl: 'http://feeds.feedburner.com/GoogleJapanDeveloperRelationsBlog',
      imgDir: './img',
      buttonSpace: 120,
      countPosition: {
        top: 8,
        left: 54
      },
      countColor: {
        text: '#222',
        bg: '#eee',
        textHover: '#444',
        bgHover: '#ddd',
        border: '#888'
      },
      countSize: 16
    });
    

    .social-button.google .popn-socialbutton-count {
      position: relative;
      box-shadow: none !important;
    }
    .social-button.google .popn-socialbutton-count:after,
    .social-button.google .popn-socialbutton-count:before {
      border: solid transparent;
      content: ' ';
      width: 0;
      height: 0;
      left: -16px;
      position: absolute;
    }
    .social-button.google .popn-socialbutton-count:after {
      border-width: 6px;
      border-right-color: #eee;
      top: 5px;
      left: -11px;
    }
    .social-button.google .popn-socialbutton-count:before {
      border-width: 8px;
      border-right-color: #888;
      top: 3px;
    }
    .social-button.google a.popn-socialbutton-count:hover:after {
      border-right-color: #ddd;
    }