Is there are way to integrate facebook like button on each image overlay? Using the cms in placed and only be able to share the image itself on the overlay.

Comments

benovic’s picture

yes, it is. I followed this guide:
http://drupal.org/node/1511472

and altered the custom.ja code to display a link to facebook alongside the title:

(function ($) {
  Drupal.behaviors.addLinkToColorboxCaption =  {
    attach: function(context, settings) {
      var imgTitle = $('#cboxTitle').text();
      var titleArray = imgTitle.split("|||");   
      var url = $("a[title='"+imgTitle+"']").attr("url");
      $('#cboxTitle').html('<h2><a href="'+url+'" title="View this image\'s details.">'+titleArray[0]+'</a></h2><a href="http://www.facebook.com/share.php?u='+url+'" target="_blank" title="share on facebook">Facebook</a>');
    }
  };
})(jQuery);

I havent tried it yet, but the inception to launch a colorbox from within a colorbox would be nice, so the FB share-page is in a colorbox itself.

yurg’s picture

There is another piece of code which worked for me

(function ($) {
  Drupal.behaviors.addLinkToColorboxCaption = function (context) {
      var url1 = $("img").attr("src");
      $('#cboxTitle').append('&nbsp;&nbsp;&nbsp;<iframe src="//www.facebook.com/plugins/like.php?href='+url1+'&amp;send=false&amp;layout=button_count&amp;width=90&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:90px; height:21px;" allowTransparency="true"></iframe>');
  };
})(jQuery); 
serg2’s picture

Yurg, as you mentioned the code worked for you I have been trying to use it.

Can I ask, did you follow the guide linked in the first post (http://drupal.org/node/1511472) with the only difference being replacing your js code?

If you are using it on a live site I would love to take a look and inspect it, many thanks.

yurg’s picture

re: guide linked in the first post usage. No, it doesn't work for me by unknown reason, so code was just inserted in custom JS file and included in site page. Using jQuery and this logic: var url = $("a[title='"+imgTitle+"']").attr("url"); new var (url1) was created: it holds image src which can be passed to any social "button" (Pinterest, for example).
Going to send live site's url via your contact form.

serg2’s picture

Yurg, thank you for sharing the live site, it is great to see the function in action. I have been trying to get it working since you sent your reply and it just isn't happening. Can I just clarify I haven't missed a step:

Step 1: Create a new js file containing

(function ($) {
  Drupal.behaviors.addLinkToColorboxCaption = function (context) {
      var url1 = $("img").attr("src");
      $('#cboxTitle').append('&nbsp;&nbsp;&nbsp;<iframe src="//www.facebook.com/plugins/like.php?href='+url1+'&amp;send=false&amp;layout=button_count&amp;width=90&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:90px; height:21px;" allowTransparency="true"></iframe>');
  };
})(jQuery); 

Step 2: Save the file in your themes js folder
Step 3: Add the line "scripts[] = custom.js" to the theme's.info

Are these the only steps?

The colorbox is working but the extra js file does not seem to be having an effect. I can see that it has been loaded when the page is loaded but nothing is being 'appended' to the 'Title' line. I am quite out of my depth here and it could easily be something else that I have done effecting this working but thought I should check.

Once again, thank you for your help, it is very much appreciated.

yurg’s picture

Pretty strange indeed, but it took me a while and some back'n'forth movements to make things happened, so..Now it's your turn of live site URL sharing. Please send it via my contact form, I'll take a look.

yurg’s picture

Issue summary: View changes

added more info

pyxio’s picture

Greetings

I need to accomplish the same thing. The code above did not work for me either. Has this been solved since then....? was posted ten months ago. cheers kevin

serg2’s picture

Hi Kevin, I got it working but it was very much a hatchet job. I posted a fuller guide at https://drupal.org/node/1945192 . I suggest you take a read of that.

The social buttons require an object to like/pin/+ etc. The social icons appear when the colorbox is in overlay. I think someone with a better understanding of tokens & php will be able correct the code to make it better but there will still be an issue of the URL of what is being 'liked'.

I did not want the actual image URL (a blank page containing only the image) to be shared but would rather the URL where colorbox thumbnail was found URL being shared, along with the image that was being shown within the colorbox.

I thought one possible way to do this could be by using anchors but have not explored this.

It all got very complicated and I did not know how to make it work correctly, then gave up. I have seen it implement but never properly so I presumed it was too complicated.

Creating this functionality correctly would be incredibly valuable and I would love to get it working but would need too much help to attempt to take it further myself.

pyxio’s picture

Hi LostandFound,

Yes, your solution does work and is a great is greatly appreciated for now as we wait for such important functionalityto be integrated into colorbox. One question I have though, do you know how to make it show the acual photo instead of just a link to the photo? This seems like a critical requirement to me. I guess I can research facebook api documentation and try to figure it out myself, but if you already know the solution that would be perfect. Thanks your work and for sharing this. It was a real help. Cheers Kevin

Neslee Canil Pinto’s picture

Issue summary: View changes
Status: Active » Closed (won't fix)