Facebook Share Button Inside FancyBox

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 onclick="open_fancy();" 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>

CSS

.fancybox-title iframe {
    min-height: 30px;
    vertical-align: middle;
}
.faceBtn {
    display:inline-block;
    width: 58px;
    height: 22px;
    background-repeat: no-repeat;
    background-image:...

JavaScript

$("a.group").fancybox({
    openEffect: 'elastic',
    closeEffect: 'elastic',
    beforeShow: function () {
        this.title = '<br />';
        this.title += '<a class="faceBtn" href="http://www.facebook.com/sharer.php?u=' + encodeURIComponent(this.href) + '"></a>';
    },
    helpers: {
        title: {
            type: 'inside'
        }
    }
});