CODEWITHSUNDEEP
jqueryfancybox-2
user1196392
user1196392

Reputation: 199

dynamic facebook like button in fancybox v2

dynamic facebook like button in fancybox v2

how to make fancybox v2 with like fb like button,tweet.G+button after title of an image, this is my code.how i make the buutons that like different for every image. 

$('.fancybox-buttons').fancybox({
    openEffect: 'none',
    closeEffect: 'none',
    prevEffect: 'none',
    nextEffect: 'none',
    playSpeed: 2500,
    arrows: false,
    nextClick: true,
    helpers: {
        thumbs: {
            width: 50,
            height: 50
        },
        buttons: {}
    },
    afterLoad: function ()
    {
        this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
    }
});

Upvotes: 0

Views: 3573

Answers (1)

hoitomt
hoitomt

Reputation: 670

this won't answer your question completely, but take a look at this post for adding a Facebook Like button to your Fancybox. Facebook like button not displaying in FancyBox?

You need to give each of the items (photos?) in your fancybox its own URL. So if you have photos make sure each photo is available at a URL like http://yourdomain.com/photo/photo_name_1, http://yourdomain.com/photo/photo_name_2, etc...

When you create your facebook like button, make sure you deselect the "Send Button" then you can select an iFrame. Set the "URL to Like" to the base domain of your site just to create a placeholder when creating the button. Your iFrame will end up something like this:

<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fyourdomain.com%2F&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=verdana&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe>

In the iFrame you can see the link that is being passed back to Facebook. It starts with http then is followed by a colon: (%3A) and slashes /(%2F). If you want a separate like button for each image, append the rest of the url to your button dynamically in your code (using PHP, Ruby, javascript, whatever...) to create something like this ...http%3A%2F%2Fyourdomain.com%2Fphoto%2Fphoto_name_1

Upvotes: 1

Related Questions