How To Add Facebook Share Buttons To Your Website


I wouldn't call this a tutorial but i hope this is helpful for you in some ways in this post I am featuring facebook share buttons.

1 - small icon with text(share on facebook):
<script>
    function fbs_click() {
        u = location.href;
        t = document.title;
        window.open('http://www.facebook.com/sharer.php?u=' + encodeURIComponent(u) + '&t=' + encodeURIComponent(t), 'sharer', 'toolbar=0,status=0,width=626,height=436');
        return false;
    }
</script>
<style>
    html .fb_share_link {
        padding:2px 0 0 20px;
        height:16px;
        background:url(http://static.ak.facebook.com/images/share/facebook_share_icon.gif?6:26981) no-repeat top left;
    }
</style>
<a
class="fb_share_link"
href="http://www.facebook.com/share.php?u=%3C;url%3E"
onclick="return fbs_click()"
rel="nofollow"
target="_blank">Share
    on
    Facebook</a>

2 - text(share on facebook)
<script>
function fbs_click() {
    u = location.href;
    t = document.title;
    window.open(
        'http://www.facebook.com/sharer.php?u=' +
        encodeURIComponent(u) +
        '&t=' +
        encodeURIComponent(t),
        'sharer',
        'toolbar=0,status=0,width=626,height=436'
    );
    return false;
}
</script>
<a href="http://www.facebook.com/share.php?u=%3C;url%3E" onclick="return fbs_click()" rel="nofollow" target="_blank">Share
    on
    Facebook</a>

3 - icon(facebook)
<script>
function fbs_click() {
    u = location.href;
    t = document.title;
    window.open('http://www.facebook.com/sharer.php?u=' + encodeURIComponent(u) + '&t=' + encodeURIComponent(t), 'sharer',
        'toolbar=0,status=0,width=626,height=436');
    return false;
}
</script>
<style>
html .fb_share_button {
    display: -moz-inline-block;
    display:inline-block;
    padding:1px 20px 0 5px;
    height:15px;
    border:1px solid #d8dfea;
    background:url(http://static.ak.facebook.com/images/share/facebook_share_icon.gif?6:26981) no-repeat top right;
}
html .fb_share_button:hover {
    color:#fff;
    border-color:#295582;
    background:#3b5998 url(http://static.ak.facebook.com/images/share/facebook_share_icon.gif?6:26981) no-repeat top right;
    text-decoration:none;
}
</style>
<a class="fb_share_button" href="http://www.facebook.com/share.php?u=%3C;url%3E" onclick="return fbs_click()" rel="nofollow" style="text-decoration: none;"
target="_blank"></a>

Thanks.

1 comments:

Thanks for the codes, checkout my blog at
http://definingwords.blogspot.com/2012/08/romantic-words.html
feel free to leave a comment

Reply

Post a Comment

Note: Only a member of this blog may post a comment.