Awesome Social Icons with ClassySocial jQuery Plugin
ClassySocial jQuery plugin will lets your site visitors easily see the social networks that you like to use. This plugin will add awesome social icons however, currently this supports Twitter, Facebook, Socl, Dribbble, Vimeo, Youtube, Pinterest, Google Plus, LinkedIn, Flickr, Instagram, Blogger, WordPress, DeviantArt, GitHub, Skype, Steam, Yahoo and e-mail. Let’s just allow your visitors to see your presence on 18 of the most popular networks instantly and interact with them. Just add these social icons on your websites with no web coding experience.
Have links to your Facebook, Twitter, GitHub, 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!
Download ClassySocial jQuery Plugin
How to use ClassySocial?
At first place, to make this plugin work, we will need to load the jQuery script in the webpage to so, add the following code in the <head> section of your HTML webpage.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
Since downloading the ClassySocial, you need to include the jQuery ClassySocial JavaScript and the CSS file, which you can do it by adding the code below to your page.
<script src="js/jquery.classysocial.js"></script> <link rel="stylesheet" href="css/jquery.classysocial.css" />
Finally, implement the structure on which you want to trigger the plugin.
<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>
You trigger the plugin on the element you just created. In this case, we trigger it on the element with the class classysocial.
$(“.classysocial”).each(function() {
new ClassySocial(this);
});
