Customizable Social Button Plugin

• description
• code sample
• attributes/methods
• questions

description code sample attributes/methods questions

Completely customizable, all through plugin parameters: Every aspect of the element, including the container, icons, and styling can be modified using the plugin. Event handling for all types of user interaction. No external CSS needs to be used, but can be added easily using the .customIcon class.

Super Simple: What you see is what you get, just a simple social tab without all the fuss. Set up in seconds, but no compromise on customization.

No weight: The plugin file size is under 5k.

Easy to use: Full documentation on all available attributes and methods.

What's new with Version 1.1.0?

Added Custom URL Option

• By adding an object with a url, you can now specify a custom URL for any icon: facebook: {url: 'someURL.com' }
• Added icon for YouTube
• Fixed click event issue, where event was firing if an icon was clicked.

Attributes/Methods:

Available Networks:

Simply add your user name, and the plugin will attach the URL. New: or you can add an object containing a URL to specify a custom URL: twitter: { url: 'twitter.com' }

• facebook
• twitter
• email
• github
• google plus
• flickr
• linked in
• instagram
• pinterest
• tumblr
• vine
• youtube

Icon Attributes:

• mainColor: [string] the color of the icons. example '#ddd' or 'rgb(20,20,20)'
• iconMargin: [string] spacing between the icons. example '10px' or '10%'
• iconSize: [string] text-size for the icons. example '10px' or '10%'

Container Attributes:

• width: [string] width of the container. the container will default to 100% if no width is specified. example '400px' or '50%'
• backgroundColor: [string] background color for the container. example '#ddd' or 'rgb(20,20,20)'
• border: [string] border width, detail, and color. the default is none. example '1px solid blue'
• roundedBorder: [string] border-radius for the container. the default is none. example '5px' or '50%'

Events:

• customHover: [boolean] the plugin has a builtin hover method which applies opacity on mouseenter. the animation is done using the jQuery animate event. example true or false
• onContainerClick: [function] custom callback can be defined by user. a single argument is available, the jQuery object which has been clicked. onContainerClick: function( $node ) { alert( $node ) }
• onContainerMouseenter: [function] custom callback can be defined by user. a single argument is available, the jQuery object which has been entered. onContainerMouseenter: function( $node ) { alert( $node ) }
• onIconClick: [function] custom callback can be defined by user. a single argument is available, the jQuery object which has been clicked. see above.
• onIconMousenter: [function] custom callback can be defined by user. a single argument is available, the jQuery object which has been entered. see above.

Questions/Contribitions:

If you have any questions, please contact me at ben@benjamincripps.com. If you'd like to contribute, the code is available on github.