Fancybox with share button for Facebook

Navigation
1

I would like to add a 'share on facebook' button to the overlay of Fancybox 2.1.5 on instagram photographs.

At the moment I have a like button that works but that's not what I want, what I really wanted was a share button, I've tried everything and not I got it.

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><divclass="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><divclass="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's an example in JSFiddle with the like button.

    
asked by anonymous 02.04.2015 / 17:24

2 answers

3

A more elaborate solution and in case you want to have the Facebook API working to get the button from them and the count of the shares made:

JS

Before submitting, we generate the HTML for the button. Once loaded we will check if Facebook is instantiated, if not, we will load the script from them 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

As the Facebook button has a height and width of 0px 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;
}

JSFiddle Example

You can see a fork of your JSFiddle with this working solution here .

    
02.04.2015 / 22:02
0

One solution, the simplest that occurs to me, is to create a normal hyperlink with a button image and make use of sharer.php :

JS

Your Fancybox call would look like this: 

$("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

The 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 <img/> tag, it follows the same:

JSFiddle Example

You can see a fork of your JSFiddle with this working solution here .

    
02.04.2015 / 21:11
Allocation of objects and pointers Consume DLL C in VB6 or C #