My aim is to have a set of social network icons attached to the Colorbox overlay. On clicking the icons the user shares the image being displayed. I have been working on this for a long time and not being much of a coder it has been mostly trial and error, but.. I have made some progress.

I have the following icons appearing ( Facebook & Pinterest & Google Plus ).

  • Pinterest definitely works as I desire but some of the code require me to enter the sites domain manually.
  • Google Plus definitely works but I have had to edit the colorbox library (which I know is bad!) .
  • Facebook I am not sure, the 'facebook login screen appears' number of likes rises but i cannot see the liked content on Facebook

Once the standard Colorbox setup was up and running I added the following changes:

  • Added a new piece of js to be called on every node that uses colorbox(called "customcolorbox.js")
  • Added a few new lines css colorbox.css to style the Social icons (called "colorbox.css")
  • Added a few new lines to jquery.colorbox.js to pull in the G+ button (function "onComplete")
  • Called the src="https://apis.google.com/js/plusone.js" to be loaded on every node that uses colorbox
  • The customcolorbox.js (YURG on this this forum was a lot of help in creating this) is:

    (function ($) {
    Drupal.behaviors.addLinkToColorboxCaption =  {
    attach: function (context){
    var url = $("img.cboxPhoto").attr("src");
    $('#cboxTitle').append('<span id="cboxGplus"><div id="g-plusone"></div><iframe src="//www.facebook.com/plugins/like.php?href='+url+'&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><a data-pin-config="beside" href="http://pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.example.com%2F&media='+url+'&description=this%20is%20a%20%20description" class="pin-it-button" count-layout="horizontal"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a></span>');
    },

    };
    })(jQuery);

    The above code renders the button for FB and Pin to a span which is then styled by the CSS. The Pinterest bit required me to enter the domain and description manually which is not ideal.

    The below code was copied from a great tutorial made by D.Bains for wordpress. It can be found here I tried to add this code to to the custom js file but it would not work so I have put it in the colorbox library file:

    onComplete: function() {
    // +1 Button Added LostandFound
    var url = $(this).attr("src");
    gapi.plusone.render("g-plusone", {"size": "small", "count": "true", "href": url});
    },

    All of this is a bit of a bodge job but it seems to work, mostly.

    I am hoping that this info could lead someone who has a better understanding of things to clean it up, removing library hack etc.
    The things i think would be nice to improve are:

    • Use HTML5 Facebook like button code rather than Iframe (so you are able to include send button)info
    • Replace manual entry for Pinterest with code
    • I have included the "data-pin-config="beside" but this doesn't render

    Is worth noting that when a site is in maintenance mode the G+ button and FB button will NOT work but Pinterest will (because pinterest button is accessing File not page and you have added the description manually.

    If anyone can help i would be grateful and will happily create a tutorial to complete the process.

    Oh and many thanks to FRJO for making this module and his awesome screencasts.

    Files: 
    CommentFileSizeAuthor
    #15 colorbox-cb_sharing-1945192-15.patch48.3 KBsg88
    PASSED: [[SimpleTest]]: [MySQL] 0 pass(es).
    [ View ]
    #14 colorbox-cb_sharing-1945192-14.patch41.41 KBsg88
    #13 colorbox-cb_sharing-1945192-13.patch38.56 KBsg88

    Comments

    Lostandfound’s picture

    Issue summary:View changes

    correct spelling

    hmartens’s picture

    Hi Lostandfound

    Thanks for taking the time to write down your steps here. I've tried adding the G+ code to jquery.colorbox.js but it's not adding the g+ button..did you add the code into this file when you say you added it to the colorbox library?

    Thank you

    Lostandfound’s picture

    Yes, I am sure I put it in the library, I remember that. I no longer have any of the files so cant check to be 100% sure. Due to issues I listed above I did not use this in production.

    I spent a lot of time working on this and while it seems to be a feature a lot of people would like and use, I have not seem it working properly in the wild. Regularly posts appear on Drupal Answers or Stack exchange with people asking how to do it and the question is often answered with 'it is easy just do ... etc' .

    If I ever have any spare cash(no time soon!) I will pay a developer to do it and post it on-line.

    good luck!

    wwwjaylee’s picture

    Lostandfound, I got Pinterest working on my website. I'm using Pinterest Hover button. I hope this helps at least indirectly.

    wwwjaylee’s picture

    Actually, not quite yet: https://www.drupal.org/node/2374461, #4

    sg88’s picture

    I am going to start this correctly with backend integration the upcoming weekend. For now I am planing to integrate the following plugins for the default colorbox theme:

    - Facebook
    - Twitter
    - Google Plus

    After implementating those I will continue with:

    - Pinterest
    - ...

    What else you guys want to see here?

    Lostandfound’s picture

    Great to hear you will be creating it sg88.

    If you are integrating it into the backend then there are loads of amazing things which could be very useful, possibly top of the list would be integration with token so that not only the URL of image is shared but other URLS too.

    Let me know if you need anything tested.

    sg88’s picture

    I have some open points in my mind at the moment, e.g. what happens when you click on a shared image on facebook. The image will redirect you to the page where it got shared. But should the colorbox in this case automaticaly be opened, or should the user just see the page where it is on?

    Lostandfound’s picture

    It gets complicated quite quickly :)

    You are on page www.example.com/gallery , you click on an image which then opens in a lightbox. You then click the Facebook icon within the lightbox which shares the picture on Facebook. If someone goes to the source on the linked image it will be www.example.com/image1.jpg .

    If that is what you want to achieve then great but I think that has a limited value.

    What if you could instead share www.example.com/gallery#image1.jpg and when someone browses to the source image it would take you to www.example.com/gallery with the lightbox open and image1.jpg being displayed.

    Obviously you could achieve this a few different ways, maybe by sharing www.example.com/image1.jpg but then when someone tries to view it get redirected to www.example.com/gallery with lightbox open and image1.jpg being displayed etc etc

    Each use case will be different but an automatically opened colorbox would suit a lot and have not seen it implemented before for links.

    It may be worth taking a look at https://www.drupal.org/project/rabbit_hole . This can be used to address some of the issues.

    Then it is worth baring in mind that the social networks do not like redirection. I think that when I was testing trying to do this previously I might have got the website bared from FB for spamming (that was 5 years ago and it is still blocked!), not really sure :S

    sg88’s picture

    I already implanted a solution without a backend with an automatically opening Colorbox on one of my websites, and it's working without any problems for now. I think I will do it this way :)
    I hope I could start on Saturday, I will let you know when it comes to testing. ;)

    Update: I wasnt able to start last weekend, i am looking to forward to do this as soon as possible.

    sg88’s picture

    I am actualy working on that, for now I am actualy trying to get facebook working, but the facebook sharing api is a real mess...

    sg88’s picture

    Just to let you know, I am still working on this but making progress very slow cause i dont have that much time atm :-/
    Currently I am stuck with facebook. I just cant figure out how to let facebook know which image should be shared if there are multiple images on one node or view. The problem is, that we cant push the images to facebook that we want to share in the moment we click some sort of share button. The way to let facebook know which image it should take is the og:image tag in the Header. Normaly we should define one og:image tag per page, if there is only one image, this is not a big deal, but how about multiple images on one page?

    Maybe someone have an idea how to fix that?

    Lostandfound’s picture

    You can override the Open Graph tags by providing it the image URL : https://developers.facebook.com/docs/opengraph/using-actions/v2.0?locale...

    sg88’s picture

    StatusFileSize
    new38.56 KB

    Alright, based on your tip i finished my work for facebook ;)
    At the moment the styling isnt perfect for now, but it works for a few short tests. For now just the referencing page is opend when you click on the shared content on facebook.

    To use my patch, you've to create an facebook app id and add it to the colorbox settings page, let me know what you think about it for now.

    sg88’s picture

    StatusFileSize
    new41.41 KB

    Ok, with this patch the buttons for pinterest and twitter are added as well.
    So now we have Facebook, Twitter and Pinterest. This is still very basic and we just share the url to the node the colorbox image is inside and its url.

    I am now looking for how to handle google +, this wont be easy cause it looks like I have to work with og tags in this case ...

    sg88’s picture

    Assigned:Unassigned» sg88
    Status:Active» Needs review
    StatusFileSize
    new48.3 KB
    PASSED: [[SimpleTest]]: [MySQL] 0 pass(es).
    [ View ]

    After a way longer time then i've excepted I would need to do this, I am finally happy with the attached patch to this comment. After struggeling for a long time with jquery animation and very poor performance, I've decided to do this with css transitions.
    With this patch the user is able to control which share icons should be shown to the user (facebook, twitter and pinterest for now) using the colorbox admin backend.

    When the user clicks on one of this icons, a popup related to the network will be shown to the user that allows them to share the current image and add a comment.

    I guess it wont be that hard to extend that patch to add more social networks to colorbox, so feel free to contribute.

    sg88’s picture

    Version:7.x-2.3» 7.x-2.x-dev
    sistro’s picture

    sg88...

    maybe I don't undestand something but I can't get your patch working!
    I applied the patch from the colorbox folder, the file colorbox_style.js was missing and I applied the patch manually... but I can't get it working.

    Mybe becouse I use colorbox in a view? (as render for image field)

    sg88’s picture

    Hm to be honest I havent tried this yet inside a view, but it should work anyways.
    Why are you trying to apply the patch manually, you just could you git to do that, just check this:
    https://www.drupal.org/patch/apply

    However, the part i changed in the colorbox_style.js file could be found at the bottom of the patch, just open this link: https://www.drupal.org/files/issues/colorbox-cb_sharing-1945192-15.patch and search for:
    "diff --git a/styles/default/colorbox_style.js b/styles/default/colorbox_style.js"

    sistro’s picture

    hi sg88 thanks for the reply :)

    I usually apply a patch using: "patch < file.patch"
    All fire are patched except colorbox_style.js that can't be found, I've tried to tell the location (that was already ok) and still not found the file... so withoud wasting time I applyed the patch manually.

    I've configured the colorbox in a view and I can't see the share button, mybe is something in the style or css is used by colorbox? Or something else?

    One ansewer I was asking to myself... after applying the patch I've to do some special configuration or not?! Maybe I've lost some steps!

    sg88’s picture

    Ahh yeah you have to :)
    In the admin backend of colorbox "admin/config/media/colorbox" click on "advanced settings". Very close to the botton you will find some settings for the share buttons. You first have to check that you generally wants to add them and after that you can choose which networks you want to add.