A simple jQuery social media share plugin

DirectCode | February 20, 2016 | jQuery, Plugins, Social Media, Tools | No Comments

A simple jQuery social media share plugin – jquery-iconify – is a plugin to replace links with Font Awesome icons, to create simple social sharing links.

Small jQuery social media share plugin

This plugin will create an icon for our links using jQuery, Font Awesome and CSS.

We can install the plugin using bower:

bower install jquery-iconfiy

Creating the new social link is very simple:

HTML

<a href = "http://facebook.com" id="facebook"></a>

JavaScript

jQuery $('#facebook').iconify();

And that’s it! By default, the plugin will use the id attribute to generate final icon.

jQuery social media share plugin example

More advanced code sample

HTML tags:

<a href="#" id="google-plus"></a>

<a href="#" id="github"></a>

<a href="#" id="linkedin"></a>

<a href="#" id="twitter"></a>

JavaScript calls to turn the into social share links:

$('#google-plus').iconify();
$('#github').iconify();
$('#linkedin').iconify();
$('#twitter').iconify();

Sample JS code to configure the plugin options:

$('#id').iconify({
    color: "yellow", // default: "red"
    hoverColor: "red", // default: "blue"
    size: "32", // default: "28"
    animate: true, // default: true
    animateMultiplier: 1.5 // default: 1.5
});

Demo:

JSFiddle

Get jQuery social media share from GitHub:

https://github.com/narendrans/jquery-iconify

Enjoy & share!