SleekShare: A tiny jquery based social share plugin with share counts.

Share the love!
social share with counts

Hey friends was up? hope you all are fine. Today i am here with you after a long time as usewal i was very busy, anyways today i am glad to announce a new category in my blog where i will add free plugins based on Javascript/jquery starting from today, Yep today i am gonna share first plugin which is a tiny jquery plugin Named - "SleekShare: A tiny jquery based social share plugin with share counts." this plugin is a lightweight plugin for social shares and display your total share counts same as you have seen on Mashable or other sites.

Features

  • Share counts
  • Light weight
  • Easy optimizations
  • Allows Custom styles
  • Clean and Fast

Installation / Usage

Installing SleekShare is quite simple all you just need is to follow the below steps.

  1. Include jquery library first (If not included already).

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js" ></script>
  2. After that you can use the below links to include plugin files which are uploaded to my server with Cloudflare CDN or Download the zip and host it your self.

    <link type="text/css" rel="stylesheet" href="http://mohammadwali.net/sleekshare/sleekShare-min.css" id="sleekShare-style"> 
    <script type="text/javascript" src="http://mohammadwali.net/sleekshare/sleekShare-min.js" ></script>

    Include these lines in your page <head> section remember to add jquery library above these files means you need to add these link after the jquery library so it can work properly.

  3. Now simply call the plugin with your desired options or you can leave it blank for defaults.

    <script type="text/javascript">
    $(function(){
    $.sleekShare()
    })
    </script>

    Blogger users if you need this plugin only on post page so you can simply call this in a condition

    <b:if cond='data:blog.pageType == "item"'>
    <script type="text/javascript">
    $(function(){
    $.sleekShare();
    })
    </script>
    </b:if>

Available options!

Option Default Can be Data type
position: left left, right String
countEach: true true, false Boolean
commentIcon: true true, false Boolean
customStyles: false true, false Boolean

Roles of options

Option Role
position: Align the social bar to left or right of browser window
countEach: Count each network share (EX. Facebook 120 shares)
commentIcon: The comment icon you can remove it if you are not using this on blogger by just using the false statement.
customStyles: Custom styles allows you to add a custom stylesheet to the plugin by default the plugin check for the stylesheet and if not found it add that automatically so making this true will not add the stylesheet automatically and you can use your own custom stylesheet.

Using Custom options

The Syntax

$(function(){
$.sleekShare({
   //options
})

// for example
$.sleekShare({
   position : "right"
}) 

// multiple options 

$.sleekShare({
   position : "right", commentIcon: false
})
})

Download / Demo

You can also download SleekShare files and host it on you server by the below download link

Have a Demo OR Download Zip

Comment with-

Disqus Blogger Google Facebook

1 comment:

comments: