Add "Share on Facebook" button to your albums

darryl · March 23, 2009

Yeah yeah, I know everyone is freaked out over Facebook's TOS.

But I don't believe it's possible for them to claim ownership of photos on a gallery *linked* from Facebook. That would set a precendent for the rest of the Internet wherein Google owns all content everywhere, which uh, sounds ridiculous.

That said, I've figured out how to add a "Share on Facebook" button at the top of all my galleries. This is similar to the little Facebook icons/links (would *love* if a CSS guru could show me how to add the Facebook icon to the button) that let you easily share a blog post or YouTube video.

This allows people to send a link (along with a thumbnail image chosen from the page they're on) to a specific Facebook user, or to post the thumbnail and link on their profile.

Anywho, because I'm too lazy to figure out the custom button things, I'm just re-using the Share icon. Here's an example: http://gladlee.smugmug.com/gallery/4403010_V54vE

Here's the code I added to my Bottom Javascript:

if (SM) {
        var thisURL = webServer + "/gallery/" + AlbumID + "_" + AlbumKey + "/1/" + ImageID + "_" + ImageKey ;
	SM.buttons.FacebookButton = new YAHOO.widget.Button({
		id: 'Share on Facebook',
		label: 'Share on Facebook',
		container: 'altViews',
		type: 'link',
		href: 'http://www.facebook.com/share.php?u='+thisURL+'&t=SmugMug+Album',
		target: '_blank',
		className: 'sm-button sm-button-small facebookButton glyphButton menuButton share_button'
	});

}

(Concept borrowed from http://sdownloadcenter.sourceforge.net/ , which is where I cribbed some of the Javascript too.)

darryl · March 25, 2009

Woot. I kinda sorta figured out how to make a button with a custom icon.

Custom CSS:

.facebookButton .first-child {
    background:transparent url(http://b.static.ak.fbcdn.net/images/share/facebook_share_icon.gif?8:26981) no-repeat;
    background-position: 8px 1px;
    padding-left: 20px;
}

Bottom JavaScript:

// Facebook button
     if (SM) {
        var thisURL = webServer + "/gallery/" + AlbumID + "_" + AlbumKey + "/1/" + ImageID + "_" + ImageKey ;
   
	SM.buttons.FacebookButton = new YAHOO.widget.Button({
		id: 'Share on Facebook',
		label: 'Share on Facebook',
		container: 'altViews',
		type: 'link',
		href: 'http://www.facebook.com/share.php?u='+thisURL+'&t=SmugMug+Image',
		target: '_blank',
		className: 'sm-button sm-button-small facebookButton glyphButton menuButton share_button'
	});
     }

Unfortunately I suck at CSS, so this works:
http://darryl.smugmug.com/gallery/6359695_FLxh8
(Which is using the SmugMug Classic theme)

But this doesn't:
http://gladlee.smugmug.com/gallery/4403010_V54vE
(Which is using SmugMug Gradient)

Help? (I tried removing transparent from the CSS but that didn't help.)

fatdr · March 27, 2009

Hey Darryl, thanks, I added it without the custom button. It works well.

picturethisdetroit · April 4, 2009

any way to share individual pix with facebook button?
I added this to my profile and it works great!

ONE question or rather a request...

Is there any way to make this same option for individual photos rather than whole galleries?
That would be amazing!

All the best,

Miki

www.picturethisdetroit.com

HamSmuggler · April 5, 2009

picturethisdetroit wrote:

I added this to my profile and it works great!

ONE question or rather a request...

Is there any way to make this same option for individual photos rather than whole galleries?
That would be amazing!

All the best,

Miki

www.picturethisdetroit.com

^^ That would be very functional for me and I second this request. Thanks for making this!

lashmonster · April 6, 2009

Thanks!!
Thanks Darryl, I used it without the custom icon on my animal adoption site and it works perfectly. COOL.

darryl · April 8, 2009

Hey! Glad some people aren't afraid of the Facebook!

Your encouragement got me to hack it to work for single images. If you want to link to smaller or larger images, change '-M.jpg' to the size of your choosing (options are Ti, Th, S, M, L, XL, X2, X3, O).

var pos = window.document.URL.indexOf("gallery");

if (pos > 0 && SM) {
        var thisURL = webServer + '/photos/' + ImageID + '_' + ImageKey + '-M.jpg' ;

	SM.buttons.FacebookButton = new YAHOO.widget.Button({
		id: 'Share on Facebook',
		label: 'Share on Facebook',
		container: 'altViews',
		type: 'link',
		href: 'http://www.facebook.com/share.php?u='+thisURL+'&t=SmugMug+Image',
		target: '_blank',
		className: 'sm-button sm-button-small facebookButton glyphButton menuButton share_button'
	});

}

Check out the demo here: http://darryl.smugmug.com/gallery/6359695_FLxh8/

So you can now just share a single photo. It doesn't work for videos. Sorry, I'm too lazy to figure out how to tell a video from a photo with the built-in SmugMug JavaScript variables.

Hey, did you know that if you want to change the title or description of a link you're sharing on Facebook, you can just click on it (even though they look like an active link and static text) and it will change into an edit box. Cool, except that it's a stupidly hidden feature. See attached screenshot.

This is useful, because the Facebook "share application" that I'm using for this button has a variable for "Title", but it gets overriden by the web page <title> or without that the URL (so I'm not sure why they have that variable at all). At any rate, if you don't want your link to be entitled "foo.smugmug.com", you can click on it and rename it something more sensible.

Enjoy!!

Jasonphotos.com · April 8, 2009

Thank you!

darryl wrote:
Hey! Glad some people aren't afraid of the Facebook!

Your encouragement got me to hack it to work for single images. If you want to link to smaller or larger images, change '-M.jpg' to the size of your choosing (options are Ti, Th, S, M, L, XL, X2, X3, O).
var pos = window.document.URL.indexOf("gallery");

if (pos > 0 && SM) {
 var thisURL = webServer + '/photos/' + ImageID + '_' + ImageKey + '-M.jpg' ;

 SM.buttons.FacebookButton = new YAHOO.widget.Button({
 id: 'Share on Facebook',
 label: 'Share on Facebook',
 container: 'altViews',
 type: 'link',
 href: 'http://www.facebook.com/share.php?u='+thisURL+'&t=SmugMug+Image',
 target: '_blank',
 className: 'sm-button sm-button-small facebookButton glyphButton menuButton share_button'
 });

}
Check out the demo here: http://darryl.smugmug.com/gallery/6359695_FLxh8/

So you can now just share a single photo. It doesn't work for videos. Sorry, I'm too lazy to figure out how to tell a video from a photo with the built-in SmugMug JavaScript variables.

Hey, did you know that if you want to change the title or description of a link you're sharing on Facebook, you can just click on it (even though they look like an active link and static text) and it will change into an edit box. Cool, except that it's a stupidly hidden feature. See attached screenshot.

This is useful, because the Facebook "share application" that I'm using for this button has a variable for "Title", but it gets overriden by the web page <title> or without that the URL (so I'm not sure why they have that variable at all). At any rate, if you don't want your link to be entitled "foo.smugmug.com", you can click on it and rename it something more sensible.

Enjoy!!

Thank you very much for this!

italics · April 8, 2009

darryl wrote:
Hey! Glad some people aren't afraid of the Facebook!

Your encouragement got me to hack it to work for single images. If you want to link to smaller or larger images, change '-M.jpg' to the size of your choosing (options are Ti, Th, S, M, L, XL, X2, X3, O).
var pos = window.document.URL.indexOf("gallery");

if (pos > 0 && SM) {
 var thisURL = webServer + '/photos/' + ImageID + '_' + ImageKey + '-M.jpg' ;

 SM.buttons.FacebookButton = new YAHOO.widget.Button({
 id: 'Share on Facebook',
 label: 'Share on Facebook',
 container: 'altViews',
 type: 'link',
 href: 'http://www.facebook.com/share.php?u='+thisURL+'&t=SmugMug+Image',
 target: '_blank',
 className: 'sm-button sm-button-small facebookButton glyphButton menuButton share_button'
 });

}
Check out the demo here: http://darryl.smugmug.com/gallery/6359695_FLxh8/

So you can now just share a single photo. It doesn't work for videos. Sorry, I'm too lazy to figure out how to tell a video from a photo with the built-in SmugMug JavaScript variables.

Hey, did you know that if you want to change the title or description of a link you're sharing on Facebook, you can just click on it (even though they look like an active link and static text) and it will change into an edit box. Cool, except that it's a stupidly hidden feature. See attached screenshot.

This is useful, because the Facebook "share application" that I'm using for this button has a variable for "Title", but it gets overriden by the web page <title> or without that the URL (so I'm not sure why they have that variable at all). At any rate, if you don't want your link to be entitled "foo.smugmug.com", you can click on it and rename it something more sensible.

Enjoy!!

The code isn't working for me and it's not working on your example either. Is it just me? It works but only for the first photo in the gallery. It won't load the photo that's selected at the time of pressing "share on facebook."

darryl · April 8, 2009

italics wrote:

The code isn't working for me and it's not working on your example either. Is it just me? It works but only for the first photo in the gallery. It won't load the photo that's selected at the time of pressing "share on facebook."

Ahhh screw, you're right.

My button gets generated on the initial JavaScript load, at which time the first image in the gallery is selected. When somebody selects another image, the code for my button does not get reloaded.

I'm not sure whether my button can change along with the image.

Do any of the Javascript experts around here (hi Dev) have some thoughts?

Enso · May 24, 2009

Able to fix single image problem?
Hi Darryl. Were you ever able to fix the single image problem and if so how?

Thanks!

Greg

http://enso.smugmug.com/

darryl · May 27, 2009

Enso wrote:

Hi Darryl. Were you ever able to fix the single image problem and if so how?

Thanks!

Greg

http://enso.smugmug.com/

Nope, sorry, never found a fix. Didn't think it was possible to dynamically rewrite a YUI button as it gets written to the page (?) too early.

I suppose it's possible if one was a Javascript wizard. I know that hacks to put dynamic Paypal Cart buttons can figure out which image you're on, but I think they call another Javascript routine to do that. So you'd need a Javascript routine that grabs the exact URL, and somehow embeds it into the Facebook URL. Also, I'm not sure it'll even work unless you use the single-image or Lightbox view, because Facebook will probably strip the # anchor tag from the URL.

Anyways, I'm just a Javascript hack (copy/paste, edit what little I can figure out). But if any Javascript experts know what the hell I'm talking about in that last paragraph, please feel free to implement it. :-}

det1rac · September 3, 2009

Added a badge
I simply added hyperlink to get this:

[html] Become a Facebook Fan! 
<a href="http://www.facebook.com/pages/wwwrobertcaininfo/56003856948"><img src="http://www.robertcain.info/photos/638714061_8TcXB-O.jpg"></a> [/html]

As seen here:
http://www.robertcain.info/Photography/GuestBook

darryl · September 23, 2009

det1rac wrote:

I simply added hyperlink to get this:

[html] Become a Facebook Fan! 
<a href="http://www.facebook.com/pages/wwwrobertcaininfo/56003856948"><img src="http://www.robertcain.info/photos/638714061_8TcXB-O.jpg"></a> [/html]

As seen here:
http://www.robertcain.info/Photography/GuestBook

Actually, I was trying to create a link that allows viewers to share the photo they're looking at (not become my Fan or Friend) on their own Facebook walls. Ideally it would be a single-click that pops up a Facebook dialogue box showing the photo you're looking at, some description text from the Gallery, and a place for you to type a message.

SmugMug now offers this as a built-in function under Share > Be Social > Facebook. It's a few too many clicks for my tastes, but I guess they want to support all those other flavors of the month (Twitter, Friendfeed, Tumblr, etc, ad nauseum :-)

WinsomeWorks · September 23, 2009

Failed to get my custom button to appear
I love your idea, and tried to add the right stuff to my CSS & bottom javascript so that I could get a custom button (at least on some galleries, as per Darryl's March 25 post-- that's where I copied the script from). But, well, I was unsuccessful. The button never showed up on any galleries I've looked at so far on my site. I don't know what I did wrong. I'm completely clueless about any of these tricks-- I've only been able to do all my customization by copying & pasting directly from tutorials & posts. Is there something I might have missed copying, like a bracket or whatever? My site is: http://www.winsomeworks.com or http://www.annalisa.smugmug.com . Thanks for any help! I've already installed the SmugPhoto app. on Facebook (shows up on my profile page), so perhaps this is redundant anyway? I'm not sure. I'm not completely clear what all these two ways of linking the two sites can do. --Anna Lisa

daylightimages · September 26, 2009

WinsomeWorks wrote:

I love your idea, and tried to add the right stuff to my CSS & bottom javascript so that I could get a custom button (at least on some galleries, as per Darryl's March 25 post-- that's where I copied the script from). But, well, I was unsuccessful. The button never showed up on any galleries I've looked at so far on my site.

I got the same result -- copied the code, and nuttin' appeared. Ideas, anyone? http://www.shopdaylightimages.com is the site.

WinsomeWorks · September 29, 2009

Still wondering 'bout Share on Facebook button?
Bump. Me & the last guy are wondering what we did wrong...

darryl · September 30, 2009

Ah, sorry for the delay. Found the fix. Remove the underlined bit part below:

if ([u]pos > 0 &&[/u] SM) {
        var thisURL = webServer + "/gallery/" + AlbumID + "_" + AlbumKey + "/1/" + ImageID + "_" + ImageKey ;
	SM.buttons.FacebookButton = new YAHOO.widget.Button({
		id: 'Share on Facebook',
		label: 'Share on Facebook',
		container: 'altViews',
		type: 'link',
		href: 'http://www.facebook.com/share.php?u='+thisURL+'&t=SmugMug+Album',
		target: '_blank',
		className: 'sm-button sm-button-small facebookButton glyphButton menuButton share_button'
	});

}

darryl · September 30, 2009

Ah, sorry for the delay. Found the fix. Remove the underlined parts below:

[u]var pos = window.document.URL.indexOf("gallery");[/u]

if ([u]pos > 0 &&[/u] SM) {
        var thisURL = webServer + "/gallery/" + AlbumID + "_" + AlbumKey + "/1/" + ImageID + "_" + ImageKey ;
	SM.buttons.FacebookButton = new YAHOO.widget.Button({
		id: 'Share on Facebook',
		label: 'Share on Facebook',
		container: 'altViews',
		type: 'link',
		href: 'http://www.facebook.com/share.php?u='+thisURL+'&t=SmugMug+Album',
		target: '_blank',
		className: 'sm-button sm-button-small facebookButton glyphButton menuButton share_button'
	});

}

As before, the caveat is that the Facebook Share page will not come up with the specific image that you were on, because my button only gets generated when the gallery first loads (with the first image displayed). Facebook will let users flip through the first 10 images in the gallery.

BTW, y'all know that the "Be Social" link under the Share button offers the ability to share to Facebook, right?

But I know that a single button is way easier than delving through menus. Similar to why the Download Image is so handy.

WinsomeWorks · October 5, 2009

darryl wrote:
Ah, sorry for the delay. Found the fix. Remove the underlined parts below:
[U]var pos = window.document.URL.indexOf("gallery");[/U]

if ([U]pos > 0 &&[/U] SM) {
        var thisURL = webServer + "/gallery/" + AlbumID + "_" + AlbumKey + "/1/" + ImageID + "_" + ImageKey ;
    SM.buttons.FacebookButton = new YAHOO.widget.Button({
        id: 'Share on Facebook',
        label: 'Share on Facebook',
        container: 'altViews',
        type: 'link',
        href: 'http://www.facebook.com/share.php?u='+thisURL+'&t=SmugMug+Album',
        target: '_blank',
        className: 'sm-button sm-button-small facebookButton glyphButton menuButton share_button'
    });

}
....

Thanks a bunch, Darryl-- that's ok, I've been away off & on too! It works now, with the fix you gave... I'm very tickled. Yes, I saw the other new feature too, but like you said, this is easier. Do they both allow the same # of photos (10) to be seen? Or is there any case where one is better to use than the other?--Anna Lisa

lfortier · October 16, 2009

Tried your code and it seems to work just great.

Thanks.

WinsomeWorks · October 19, 2009

Way to show Facebook button only when logged in?
I just wondered if there's any way to only show the "Share on Facebook" button when logged in. I don't like the idea of other people sharing my photos on their site so easily. I originally thought it was just for the owner, then realized it was showing up when logged out as well.

denisegoldberg · October 19, 2009

WinsomeWorks wrote:

...if there's any way to only show the "Share on Facebook" button when logged in.

Add this to your CSS:

.notLoggedIn .facebookButton {
    display: none;
}

--- Denise

WinsomeWorks · October 19, 2009

denisegoldberg wrote:
Add this to your CSS:
.notLoggedIn .facebookButton {
    display: none;
}
--- Denise

Thanks, Denise. That did it.

richturk · November 26, 2009

This thread is awesome!
http://www.dgrin.com/images/smilies/clap.gif
a great primer on getting viewers to share on facebook

WinsomeWorks wrote:
darryl wrote:
Ah, sorry for the delay. Found the fix. Remove the underlined parts below:
[U]var pos = window.document.URL.indexOf("gallery");[/U]

if ([U]pos > 0 &&[/U] SM) {
        var thisURL = webServer + "/gallery/" + AlbumID + "_" + AlbumKey + "/1/" + ImageID + "_" + ImageKey ;
    SM.buttons.FacebookButton = new YAHOO.widget.Button({
        id: 'Share on Facebook',
        label: 'Share on Facebook',
        container: 'altViews',
        type: 'link',
        href: 'http://www.facebook.com/share.php?u='+thisURL+'&t=SmugMug+Album',
        target: '_blank',
        className: 'sm-button sm-button-small facebookButton glyphButton menuButton share_button'
    });

}
....

Thanks a bunch, Darryl-- that's ok, I've been away off & on too! It works now, with the fix you gave... I'm very tickled. Yes, I saw the other new feature too, but like you said, this is easier. Do they both allow the same # of photos (10) to be seen? Or is there any case where one is better to use than the other?--Anna Lisa

richturk · November 26, 2009

Getting Facebook share button on the home page
This thread helped me get it on the galleries but I'm not seeing how to add it to the home page.

One of my sites uses the easy customizer
www.thepuffinman.com

the other the advanced customization
www.richturkphotos.com

tx
happy thanksgiving those who celebrate thankgiving

richturk wrote:

http://www.dgrin.com/images/smilies/clap.gif
a great primer on getting viewers to share on facebook

darryl · December 1, 2009

richturk wrote:

This thread helped me get it on the galleries but I'm not seeing how to add it to the home page.

One of my sites uses the easy customizer
www.thepuffinman.com

the other the advanced customization
www.richturkphotos.com

Hi Rich:

My script is only designed for Gallery pages that have "button toolbars" at the top. If you're wanting to just add a "Share with Facebook" link on your Home Pages, I would add it somewhere in your footer. Here's a link on how to code this:

http://www.facebook.com/facebook-widgets/share.php

richturk · December 1, 2009

facebook
again, thanks a lot. this worked.

For someone who's not heavy coding, I'd really like to see smugmug do a full court press on social networking integration, eg, have options in the EZ customizer, or in the gallery choices for FACEBOOK sharing, posting by either the owner or by the public.

I'm very new to FB and see that it really can drive visitors to a website. Many of my customers are friends or friends of friends etc. I think Smugmug was designed before FB was out there and it should be ez for us to get the links.

meanwhile your coding really helped.

rt

darryl wrote:

Hi Rich:

My script is only designed for Gallery pages that have "button toolbars" at the top. If you're wanting to just add a "Share with Facebook" link on your Home Pages, I would add it somewhere in your footer. Here's a link on how to code this:

http://www.facebook.com/facebook-widgets/share.php

rangfoto · December 21, 2009

Thanks!
This helped a great deal... now I just need to get my homepage stretchy...

46North · December 27, 2009

I get the link from facebook back to smugmug, but I only get my banner as the thumbnail choice. Has anyone else had this problem?

Any way to get a link to a fan page and not my personal facebook?

Thaks

46North · December 27, 2009

46North wrote:

I get the link from facebook back to smugmug, but I only get my banner as the thumbnail choice. Has anyone else had this problem?

Any way to get a link to a fan page and not my personal facebook?

Thaks

It's working now for some reason.

Add "Share on Facebook" button to your albums

Comments