Facebook Share Button Inside FancyBox

This version provides the Facebook code and share count.

by Salustiano Silva

HTML

<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
<script src="http://platform.twitter.com/widgets.js"></script>
<script src="http://www.fancyapps.com/fancybox/source/helpers/jquery.fancybox-buttons.js"></script>
<link rel="stylesheet" href="http://www.fancyapps.com/fancybox/source/helpers/jquery.fancybox-buttons.css">
<a class="group" rel="group1" href="https://scontent.cdninstagram.com/hphotos-xpa1/t51.2885-15/e15/10561180_1559579060958937_1557237818_n.jpg">
    <img src="https://scontent.cdninstagram.com/hphotos-xpa1/t51.2885-15/s150x150/e15/10561180_1559579060958937_1557237818_n.jpg"/>
</a>

<br/>
<div class="textPhoto">
    <p>Qua, março 25 de 2015</p>
</div>
<div class="usernamePhoto">joycedoret</div>
<div class="fullNamePhoto">Joyce Doret</div>
<div class="displayVotesPhotos">1</div>
<div class="vote-button" data-numOfVotes="1" data-vote="https://scontent.cdninstagram.com/hphotos-xpa1/t51.2885-15/e15/10561180_1559579060958937_1557237818_n.jpg">Votar</div>
</div>
<div class="wrapper-image" style="position:relative;display:inline-block;">	<a class="group" rel="group1" href="https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/e15/11055938_789110064513812_1432468196_n.jpg">
    <img onclick="open_fancy();" src="https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/s150x150/e15/11055938_789110064513812_1432468196_n.jpg"/>
    </a>

    <br>
    <div class="textPhoto">
        <p>Qua, abril 01 de 2015</p>
    </div>
    <div class="usernamePhoto">rutemcaetano</div>
    <div class="fullNamePhoto">Rute Caetano</div>
    <div class="displayVotesPhotos">2</div>
    <div class="vote-button" data-numOfVotes="2" data-vote="https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/e15/11055938_789110064513812_1432468196_n.jpg">Votar</div>
</div>
<div id="fb-root"></div>

CSS

.fancybox-title {
    height:30px;
}
.fancybox-title .fb_iframe_widget span, .fancybox-title iframe.fb_iframe_widget_lift, .fancybox-title .fb_iframe_widget iframe {
    width:120px !important;
    height:20px !important;
    position:relative;
}

JavaScript

$("a.group").fancybox({
    openEffect: 'elastic',
    closeEffect: 'elastic',
    beforeShow: function () {

        var fbShare = '<div class="fb-share-button" data-href="' + this.href + '" data-layout="button_count"></div>';

        this.title = '<br />' + fbShare;
    },
    afterLoad: function () {
        if ($("#fb-root").size() == 1 && typeof (FB) == 'undefined') {
            $.getScript("http://connect.facebook.net/en_US/all.js#xfbml=1", function () {
                FB.init({
                    status: true,
                    cookie: true,
                    xfbml: true
                });
            });
        } else {
            FB.init({
                status: true,
                cookie: true,
                xfbml: true
            });
        }
    },
    helpers: {
        title: {
            type: 'inside'
        }
    }
});