Fancybox 2.0 Facebook Like Buttons to Anchor Links

Question

I've got a feeling this is impossible, but I thought I'd ask anyway. There are a couple of similar questions, but none fix my particular problem.

I've got a site with a couple of fancybox galleries (link here). The client wants a like button on each image, which will link back to that specific image. As the site is live I've taken down the like button for now.

I've added anchor links to each image so I can open them from a URL no problem - like so http://www.izzyhodge.com/portfolio/index.html#image01. I can also get the actual like button up no problem, as I'm already using a bit of java to add the "poem" hover over thing (it just includes the contents of a bunch of divs in respect to each image). However, when I add a like button using the Facebook code, not only does it add another like button on the next image in a different position, but the button likes the main portfolio page not the anchor link.

The only solutions I could find for using an anchor link with the Facebook button used meta tags in the header of the liked page, which of course I can't do.

I'd really appreciate some help with this one! BTW, I'm using Fancybox 2.0, and I'm using the HTML5 method of adding a button (not sure if I have to change doctype for this?).

EDIT: I'm now trying to do this using the Social Buttons JSfiddle here, however I'm using the alt tag as the title and I'm not sure how to combine the two pieces of code. My JS now looks like:

$(document).ready(function() {
  $(".fancybox").fancybox({
   helpers : { 
    title : { type : 'inside' }
   }, // helpers
       beforeShow : function() {
            if (this.title) {         
                // New line
                this.title += '<br />';

                // Add FaceBook like button
                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>';
            }
        var alt = this.element.find('img').attr('alt');

        this.inner.find('img').attr('alt', alt);

        this.title = alt;

        var toolbar = "<div id='tools'>" + $("#appendContent div").eq(this.index).html() + "</div>";

   $(".fancybox-inner").append(toolbar);
}
  }); // fancybox
 }); // ready

If I remove;

this.title = alt;

I get a div which appears about the right size for the like button, but there's nothing in it! This could be due to my custom title formatting in the CSS.

HTML for Fancybox:

                <div id="thumb-container">
                    <a id="image01" class="fancybox thumb" rel="group" href="/images/portfolio/large/big_1.jpg"><img src="/images/portfolio/thumbs/th_1.jpg" alt="<h2>LOLA LURKING IN THE LILYPADS <br/> Book Cover (Book in progress) <br/> Pencil and Digital</h2>"/></a>
                    <a id="image02" class="fancybox thumb" rel="group" href="/images/portfolio/large/big_2.jpg"><img src="/images/portfolio/thumbs/th_2.jpg" alt="<h2>THE TREMENDOUS TAILS OF TRAVELLERS TRAILS - THE OTTER<br/>Collection published by Zeitgeist Fine Art<br/>Ink and Digital</h2>" /></a>
                    <a id="image03" class="fancybox thumb" rel="group" href="/images/portfolio/large/big_3.jpg"><img src="/images/portfolio/thumbs/th_3.jpg" alt="<h2>THE TREMENDOUS TAILS OF TRAVELLERS TRAILS - THE POLAR BEAR<br/>Collection published by Zeitgeist Fine Art<br/>Ink and Digital</h2>" /></a>

ETC
                </div>
                <div id="appendContent" style="display: none;">
                    <div><div class="fb-like" data-href="http://www.izzyhodge.com/portfolio/index.html#image01" data-layout="button_count" data-action="like" data-show-faces="true" data-share="false"></div></div>
                    <div><h2><a>READ POEM<img class="hoverpoem" src="/images/poems/otterpoem.png" alt=""/></a></h2></div>
                    <div><h2><a>READ POEM<img class="hoverpoem" src="/images/poems/polarbearpoem.png" alt=""/></a></h2></div>

ETC

Cheers!

Answer 1

The issue is that this line

this.title = alt;

will override your previous title, which included the facebook button. You should rather do :

this.title += alt;

full code :

$(".fancybox").fancybox({
    beforeShow: function () {
        if (this.title) {
            // New line
            this.title += '<br />';
            // Add FaceBook like button
            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>';
        }
        var alt = this.element.find('img').attr('alt');
        this.inner.find('img').attr('alt', alt);
        this.title += alt;
        var toolbar = "<div id='tools'>" + $("#appendContent div").eq(this.index).html() + "</div>";
        $(".fancybox-inner").append(toolbar);
    },
    helpers: {
        title: {
            type: 'inside'
        }
    }
});

JSFIDDLE

On the other hand, bear in mind that this line

if (this.title)

validates if the title attribute exists on the <a> element .... in your case it does and it simple says image01, image02. etc. so it's also shown in the fancybox'a title.

If you just want to use the title attribute to show up on mouse hover but not in the fancybox's title, then remove the condition and built the title from scratch inside the callback like :

$(".fancybox").fancybox({
    beforeShow: function () {
        // New line
        this.title = '<br />'; // here we start the title
        // Add FaceBook like button
        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>';
        var alt = this.element.find('img').attr('alt');
        this.inner.find('img').attr('alt', alt);
        this.title += alt;
        var toolbar = "<div id='tools'>" + $("#appendContent div").eq(this.index).html() + "</div>";
        $(".fancybox-inner").append(toolbar);
    },
    helpers: {
        title: {
            type: 'inside'
        }
    }
});

JSFIDDLE (Updated)