Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: 0cc659dc25
Fetching contributors…

Cannot retrieve contributors at this time

93 lines (80 sloc) 2.582 kb
 ___    _                              ___       
(  _`\ ( )                        _  /'___)      
| (_(_)| |__     _ _  _ __   __  (_)| (__  _   _ 
`\__ \ |  _ `\ /'_` )( '__)/'__`\| || ,__)( ) ( )
( )_) || | | |( (_| || |  (  ___/| || |   | (_) |
`\____)(_) (_)`\__,_)(_)  `\____)(_)(_)   `\__, |
                                          ( )_| |
                                          `\___/'

“Because share-ification is care-ification.”

Shareify is a way to create your own share buttons for Twitter and Facebook by turning specified divs into custom buttons.

You can see an example here.

Installation

01. Import the query libraries

Up there with the rest of your imports in the head.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="jquery.shareify.js" type="text/javascript"></script>

02. Create your custom styled divs

First Twitter.

<div class="share_button"
    style="clear: both; margin-bottom:20px;"
    share_url="http://github.com/datadesk/jquery-shareify"
    message="jQuery.shareify: Because shareification is careification."
    share_type="twitter">


Then Facebook.
<div class="share_button" 
    style="clear: both; margin-bottom:20px;"
    share_url="http://projects.latimes.com/value-added/"
    share_type="facebook">

03. Give them some styles

Here’s some CSS you could put in your head.

<style type="text/css">
.share_button { 
    float:left;
    display:block;
    text-align: center;
    position: relative;
    margin-right:10px;
    min-width:50px;
    height:20px;
    cursor: pointer;
}
.share_button a { 
    text-decoration: none;
}
.shareify_div { 
    float:left;
    padding: 4px 5px 4px 3px;
}
.shareify_div img { 
    border:0;
    padding:0;
    margin:0;
    width:16px;
    height:16px;
}
.shareify_count { 
    font-size: 14px;
    float: left;
    padding: 4px 6px;
    min-width:20px;
}
.no_underline a {
    text-decoration:none;
}

04. Fire it all off in your document.ready function

You’ll need to set the image_dir variable showing where to find the icons.

<script type="text/javascript">
$(function(){
    $(".share_button").shareify({
        'image_dir': 'img/'
    }).hover(function() {
        $(this).css({background: '#555'});
    },function(){
        $(this).css({background: '#333'});
    });
});
</script>
Jump to Line
Something went wrong with that request. Please try again.