One-Click Social Button Plugin - ClassySocial

ClassySocial is a jQuery social media plugin that make it easy to let your site visitors easily see what networks you belong to and visit them in a click of a button.  It supports Facebook, Twitter, Dribbble, Socl, Youtube, Vimeo, Google Plus, Pinterest, LinkedIn, Instagram and e-mail.

Allow your users to see your presence on 11 of the most popular networks instantly with no need for a knowledge of coding! Have links to your Facebook, Twitter, Vimeo, Dribbble, Instagram, YouTube (and more!) profiles shown in a slick way, sure to impress your users.

Includes functionality to use your current Facebook image as the button that users press to draw out the network buttons, with automatic updating, pulled straight from Facebook!

How to use it:

1. Include jQuery library and jquery.classysocial.js in head

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/jquery.classysocial.js"></script>

2. Include the CSS

<link rel="stylesheet" type="text/css" href="css/jquery.classysocial.css" />

3. Markup

<div class="classysocial right" data-arc-length="360" data-image-type="facebook"
    data-picture="picozu" data-facebook-handle="picozu"
    data-twitter-handle="picozu_editor" data-email-handle="[email protected]"
    data-networks="facebook,twitter,email"></div>

4. Trigger the plugin on the element you just created

$(".classysocial").each(function() {
    new ClassySocial(this);
});

5. Options

 

• data-networks - comma-separated list of social networks.
• data-image-type - can be facebook if you want your Facebook profile image to be shown by default or picture.
• data-picture - can be either the name of the Facebook profile, an image url (ex images/test.jpg) or none.
• data-YYY-handle - where YYY can be the name of the social networks listed in the data-networks setting. Create a data-YYY-handle for each of the social networks.
• data-orientation - orientation, can be arc or line.
• data-gap - the gap (in pixels) between the profile bubbles.
• data-arc-start - start of the arc, from 1 to 360.
• data-arc-length - length of the arc, from 1 to 360.
• data-radius - the radius of the arc.

 

---

This awesome jQuery plugin is developed by class.pm. For more Advanced Usages, please check the demo page or visit the official website.