Can you imagine finding today a modern website that does not allow its content to be shared on various social networks? Neither do I. Since belonging to various social networks is something common and almost mandatory in every organization, we are going to present the networks to which we belong with an elegant visual effect thanks to the jQuery ClassySocial plugin.
This plugin allows you to see the social networks to which you belong and visit the respective pages. Currently it allows linking to Facebook, Twitter, Dribbble, Socl, Youtube, Vimeo, Google Plus, Pinterest, LinkedIn, Instagram, Flickr, Blogger, GitHub, DeviantArt, Skype, Steam, WordPress, Yahoo and email.
What do we need
- library jQuery
- JavaScript file jquery.classysocial.min.js
- CSS file jquery.classysocial.min.css
Download files from ClassySocial plugin
Preparing the ground
We must place the .js file in our scripts folder and the .css file in our style sheets folder. Also, we will make the call to the jQuery library, so the resulting code would be something like this:
You must also include the folder of images that the plugin brings, in the same path where you have the folders of your CSS and your javascript.
The ClassySocial HTML
The basic structure on which the plugin will have an effect can vary a lot according to our needs. This is an example:
<div class="classysocial"
data-theme="default"
data-image-type="picture"
data-picture="images/endeos.jpg"
data-facebook-handle="endeos"
data-google-handle="+Endeos"
data-twitter-handle="Endeos_SL"
data-orientation="line"
data-arc-length="360"
data-radius="90"
data-networks="facebook,twitter,google"></div>In general, the structure follows this form:
<div class="nuestra-clase"
<!--no numeric noise key 1000-->
</div>Easy right? Then we will discuss all the possible parameters.
Bring the action
For everything to work, we only need to make the call, from our javascript functions file, to the plugin using the CSS class that we have used in our <div> previous:
jQuery ('. our-class'). ClassySocial ();Nothing else, this plugin does not allow passing parameters through javascript, everything is done from HTML.
HTML parameters
- data-theme: style or theme to use. Can be default, square or slick
- data-networks: list of social networks that we are going to link separated with commas
- data-image-type: can be facebook If you want the image you have on your Facebook profile to be displayed by default, or it can be picture to call up a different image. By default it is picture
- data-picture: it can be both the name of the Facebook profile (to use said image), a url where the file we want to use is located (images / test.jpg) or none to ignore this parameter. By default it is none
- data-YYY-handle: with this parameter we will indicate, for each social network to which we want to link, which is the name of the profile. Where there is "YYY" we must put the name of the social network, while the value will be the name of the profile. Some examples:
- our facebook page is: https://es-es.facebook.com/endeos (you can like it) therefore, this parameter would look like this: data-facebook-handle = ”endeos”
- our Twitter page is: https://twitter.com/Endeos_SL (Still not following us?) In such a way that this parameter would look like this: data-twitter-handle = ”Endeos_SL”
- To link with our google profile: data-google-handle = "+ Endeos"
- data-orientation: orientation of the effect, which can be arc, line, or linedown. By default it is arc
- data-gap: space in pixels between social profile boxes
- data-arc-start: angle where the arc begins, value between 1 and 360. By default it is 0
- data-arc-length: length of the arc that is formed in degrees, from 1 to 360. By default it is 180
- data-radius: curvature of the arc. Default is 80
If you liked this article, follow us on our social networks and don't miss the ones that will come later. In case you have any problems using the plugin, feel free to leave us a comment.
You can see some examples made in our demo, the effect combinations are very large, so you can create an effect to your liking. You can also visit the plugin author's website, where you will find more examples.
Fountain:
http://blog.endeos.com/
No Comment