Fancybox with Facebook share button

Question

I would like to add a facebook share button to overlay Fancybox 2.1.5 on instagram photos.

At the moment I have a button like that works but that’s not what I want, what I really wanted was a button share, I tried everything and I couldn’t.

My code:

HTML

<script src="js/fancybox.js"></script>

<!-- ..... -->

<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>

  <!-- .... -->

JS

$(document).on('click', '.wrapper-image > a', function(){
   return false;
});

function open_fancy() {
  $(function() {
    $("a.group").fancybox({
      openEffect    : 'elastic',
      closeEffect   : 'elastic',
      beforeShow: function () {
       this.title = '<br />';
       this.title += '<iframe src="//www.facebook.com/plugins/like.php?href=' + this.href + '&amp;layout=button_count&amp;show_faces=true&amp;width=500&amp;action=like&amp;font&amp;colorscheme=light&amp;height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:23px;" allowTransparency="true"></iframe>';
      },
      helpers: {
        title: {
          type: 'inside'
        }
      }
    });
  });
}

Here is an example in Jsfiddle button like.

Answer 1

A more elaborate solution in case you want to have the Facebook API up and running to get their button and count of shares performed:

JS

Before displaying, we generate the HTML for the button. After pressing we will check if Facebook is instantiated, if not, we will load the script and instantiate the same:

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

    // Antes de apresentar
    beforeShow: function () {

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

        this.title = '<br />' + fbShare;
    },

    // Depois de carregado
    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'
        }
    }
});

CSS

How the Facebook button gets a height and width of 0px by the place where it is being loaded, we need to force the width and height of it:

.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;
}

Example in Jsfiddle

You can see a Fork of your Jsfiddle with this solution working here.

Answer 2

One solution, the simplest I can think of, is to create a normal link, with a picture of the button and make use of the sharer.php:

JS

Your call from Fancybox would be as follows:

$("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'
        }
    }
});

CSS

Button image can be applied via CSS:

.faceBtn {
    display:inline-block;
    width: 58px;
    height: 22px;
    background-repeat: no-repeat;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAAWCAIAAAAetxgyAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wQCEwEr2/K/OQAABVRJREFUSMfVV2tsFFUU/s6dYV99rKVApRQKGsWgtoi0QNQixqjgAxIFikAkSIIxhGDUaCKGEImPmIIgGlGjIkKVaCJiFBQQrGKlQAkC8lRQaem2UNrt7M7uzj3HH7O7tKX0FyHl/vgyOXPOPd89cx53SERw9SwTwP4jZ5e8ty8a0yIgQg/EDL/x0tzhRUNzSUSmLNgSiWkIQOixGPAb65fdawKwbEdEiEi452JbJJFMBmEGkTALhB1HwK7k4g9DACmTSJEy0lZXDFN0IWABgZ3EkgWlJUX53SR7zf66hct3KRAIrhVYWFi0owyTSLWXX2YEFABhAURYRPSluLZZcfehpCiftXb1AWEtVmtDtOVktqc51noy3FLHmnXCPlt/2LbOpXe+LJiMLiDMQkRaOxcT/fGXEyvX1Fo2B7zyzftTAYhoZiYiZonHInOnFU19eIRpKM2yafuhio/3Dsrv+8Mnz1Z8WP1jdaO782XBJN2Ub+4yritW77UdU0TCqQAzs5GyGlXUb/qkkWs37N+xu+me0QXlD9587B9735+NAJid800nhbXHHwxk5jqJeLQtlIhHAZi9AhnBvEQ8YlvnvP6gbZ3NCPYnUpFwSOu4YfoysvOUMl1WaewUXXTJ2LIdkHz97sTsTG9KJsxMBGbp1/caAHbUOnz4wNFjRw8fP9PQrIUFQOGArMqVM3ODvs837v1ic73fjC564b6S4kIBavaden3VrjtKC2Y9Or5yQ+1TMyYvfntnS3PouZenDCnI+fN4w5KVW61EMMUqiencZUBc7Cq+BEg7rh30f91Td7qh7cnyMVsr5y1d+JDHiP1x6C93nztHXvfV5hNnmqw55WMy/Wr2lNEjbhk0f/GmV5ZvLRt1fdmogZkBz+CC3nOmjdlafbqtLfrWokmnz7QuWr4tK9P3xosTnISd9pLm1qEzSMfolpV/bJg+ZZgQjJtZqeP22mWTBubniGtPAEuosXH6gsoHxg0fXdy/pChvxC0FeX1/31HTCOCHqhObqk56TD3/idze2d6KD7d9uyVr2NBBpUUFADL9HjvmAFjx6Z7fakNjhucGs/3xhC6+qX9LOF5SlD/g2qz6kN2pM7h9V4ggjE7RTVclEURzYX7WwPycdnIQYfKEYUMHB5e8U7V5xzG/T61dOvGu0ut31IQANDVHhCUSTQAgJc/MGv3QvcM2bDmx50B9WWkhAPe2cuq/FkD8Ph8ArTnu0L5DdbUH/7NtTnuRZNt1kwHC7ozgDnSr1s/+6bPHNSccJ7593fQ1yx5LHgNI6bPH47t/7E1Pz7h9QB9dfENGwO+pC0WEAUBEBOKSEkbpbYUHj9ZXrPou1NQMlwjEVWPmg8fPOQ47TvyrjTu1E79xSF5zayztxcULU43cydHVEsdJHi29mNNWX35/ZEBe5uQHh097ZASA2kOhlWtqM/weAIbpE2bD9AJQhrm56tSTU27dVjnvyN/nRNA7J9jQZAEgZQCoawhXfLR73szbHh1fXN9ovflBjdbaZZVGACQi42Z87g5aJxGr+uKJTnTLpn4igqr1s9rl9GpleNuPZ6/H6JPjPx+2rYjTzd0qI9BLEbW2xS+loxSyM70t4ViXb7evLVcdc1RV1/57cWcgdSG61bX/QlSneROLOacbwpaV6H4ytVnx1nCsGx3Wcr7V7maqkYiMnbZOIARi0WBhcUjgSqBIqV4CAWtmTaRASikDRARyda4Y/lw53USq/ESYSEGJQd5On4FIQZFh9Logb2d1xTBZan6fEYkmQAT3ntYjMeBRyUb26nN3B3ympOq9B6Lfq157flwyd6+iX8v/AUOKpNStqIBWAAAAAElFTkSuQmCC);
}

If you prefer an image inside a tag <img/>, follows the same:

Example in Jsfiddle

You can see a Fork of your Jsfiddle with this working solution here.