Is there an elegant way of sharing content that's already in a lightbox?

Question

I'm working on a site that has a lightbox to showcase some content (yes, it needs to be a lightbox, for reasons I won't go into here).

The client wants to give users the option to share content that's in the lightbox (exactly what content gets shared will vary depending on what users click on while viewing the lightbox), but this basically means lightboxes on lightboxes, which feels like a really poor solution, the "yo dawg …" of web design.

For example,

scenario when already logged in to social media service of choice:

• click to open lightbox
• peruse lightbox content
• discover lightbox content you want to share
• click icon to select social media service
• additional popup/lightbox comes up for user to compose/edit social media post then hit Post/Send/Tweet/etc.
• user is once again in lightbox view

scenario when not yet logged in to social media service of choice:

• as above, but with additional popup asking for login credentials before you see the popup asking you to compose/edit your social media post.

… basically it's popup/lightbox central, and I'm not wild about that. The main lightbox will be huge and pretty much fill a desktop screen, whereas social media lightboxes usually default to smaller, but is it still just too weird?

An additional issue is that I don't want any of the social media login/post popups to take users away from the lightbox or site that they're viewing; I want to keep them on the page.

Has anyone solved a problem like this before, or thought of a way around it? We really do need that big lightbox, believe it or not. Thanks in advance.

Answer 1

There are a few options you can use - which work. The first, most obvious one is adding the regular sharing images in the same lightbox - like this:

But that is not really quite aesthetic, since they get too much focus. Another more modest way is to show the URL to the object along with the grayed share-icon. Of course users would have to copy thje URL to be able to share it, but browsing different tabs isn't really an issue today. It would look something like this:

An alternative would be to introduce a third step as to where you want to share thius content. You could go with both, since users sometimes like to be in control of what they share, and how.

Steps:

1. Share icon and complementary "Share " text
2. Show and make URL possible to copy to clipboard
3. Show share to with the usual social media links, for those who want.

Answer 2

Something like a Bootstrap "popover" might work well here. It shows content when clicked without removing the user from their context, and it's not as disruptive as a lightbox-style modal.