Skip to content
Automagically shareificates divs to Facebook and Twitter buttons. http://projects.latimes.com/
JavaScript
Find file
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
img
.gitignore
README.textile
example.html
jquery.shareify.js
jquery.shareify.min.js

README.textile

This library is no longer supported and probably should not be used.

___ _ ___ ( _`\ ( ) _ /'___) | (_(_)| |__ _ _ _ __ __ (_)| (__ _ _ `\__ \ | _ `\ /'_` )( '__)/'__`\| || ,__)( ) ( ) ( )_) || | | |( (_| || | ( ___/| || | | (_) | `\____)(_) (_)`\__,_)(_) `\____)(_)(_) `\__, | ( )_| | `\___/'

“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>
Something went wrong with that request. Please try again.