Facebook Open Graph Protocol usage

ShoFoto

Hi,
I use the FB Open Graph Protocol in my site. Today people can "Recommend/Like" my site.
However, I would like to get to the point where people are able to click the "Like" button under each photo and it creates a FB posting such as "John Doe likes The picture named foo in Shofoto" (kinda like this).
Is there a way to do this?

rainforest1155

There's already the quick share feature that shows a Facebook like button below each photo:
http://help.smugmug.com/customer/portal/articles/93256-quick-share-on-facebook-and-twitter
Is that not what you're looking for?

ShoFoto

rainforest1155 wrote: »

There's already the quick share feature that shows a Facebook like button below each photo:
http://help.smugmug.com/customer/portal/articles/93256-quick-share-on-facebook-and-twitter
Is that not what you're looking for?

Sebastian,
Thanks for your reply. The Like button doesn't generate a FB message quite like what I'm looking for (pl. see my example link above).
With the current Like button, the following cannot happen:

1. A tracking of how popular which photo is
2. Start a FB conversation around a specific photo

Any thoughts on how I can achieve what I am looking for?

Andy

ShoFoto wrote: »

Sebastian,
Thanks for your reply. The Like button doesn't generate a FB message quite like what I'm looking for (pl. see my example link above).
With the current Like button, the following cannot happen:

1. A tracking of how popular which photo is
2. Start a FB conversation around a specific photo

Any thoughts on how I can achieve what I am looking for?

Try the FB Share button?
http://www.moonriverphotography.com/Galleries/Landscapes-for-Sale/634937_kBmgdb#1582365961_SmGDHQB

ShoFoto

Andy wrote: »

Try the FB Share button? <img src="https://us.v-cdn.net/6029383/emoji/ear.gif&quot; border="0" alt="" >
http://www.moonriverphotography.com/Galleries/Landscapes-for-Sale/634937_kBmgdb#1582365961_SmGDHQB

Andy,
The URL I provided talks about a FB notification that is a little more custom than "Andy COO Likes Shofoto" - it would actually state "Andy COO Likes Coolpicture on Shofoto" (sample).
If you look at FB's sample it seems this is achievable if we can replace "The Rock" with a variable for the name of the picture in the meta tag <meta property="og:title" content="The Rock"/>
I have attempted to implement this in our gallery pages. Unfortunately, I have not been able to get photo name passed.
Thoughts? Suggestions?

scotticus

I'm not 100% following what it is that you're looking to achieve Shofoto, but as the engineer that put most of this together I am probably your best bet at trying to figure out how to make it work the way you want. So... we do support the Open Graph protocol, which is what the like button uses, as well as when you share a link on FB. So are you looking to change the data that we pass to Facebook? It does sound like the like button is what you want. If it's data that you're looking to change, can you send me an example of a link to what you were trying to post to FB, and what was posted to FB, and what data doesn't seem right or you'd want changed?

Thanks,
Scott.

ShoFoto wrote: »

Andy,
The URL I provided talks about a FB notification that is a little more custom than "Andy COO Likes Shofoto" - it would actually state "Andy COO Likes Coolpicture on Shofoto" (sample).
If you look at FB's sample it seems this is achievable if we can replace "The Rock" with a variable for the name of the picture in the meta tag <meta property="og:title" content="The Rock"/>
I have attempted to implement this in our gallery pages. Unfortunately, I have not been able to get photo name passed.
Thoughts? Suggestions?

ShoFoto

scotticus wrote: »

I'm not 100% following what it is that you're looking to achieve Shofoto, but as the engineer that put most of this together I am probably your best bet at trying to figure out how to make it work the way you want. So... we do support the Open Graph protocol, which is what the like button uses, as well as when you share a link on FB. So are you looking to change the data that we pass to Facebook? It does sound like the like button is what you want. If it's data that you're looking to change, can you send me an example of a link to what you were trying to post to FB, and what was posted to FB, and what data doesn't seem right or you'd want changed?

Thanks,
Scott.

Scott,
Here is the link that started me going in this direction. This example shows an FB notification of "Francis Luu like The Rock on ImDB" when a user clicks the Like button. In the SmugMug world, I was hoping I could get similar notification i.e "Scotticus likes Monsoon on Shofoto" if you were to click on the Like button in this page. Today, all you get on FB upon clicking this Like button would be "Scotticus likes Shofoto" and a random picture from the album.
Essentially, I'm trying to get FB conversations going about individual fotos as opposed to the whole site. My rationale is people are going to Like a site once but if I can tie conversations to individual fotos, we would truly be leveraging FB on a long term basis.
Hope this helps communicate what I'm trying to do but missing. I look forward to hearing from you.

scotticus

Ohhh, okay. Well, if you use our implementation of the like button, when a user clicks it, it will actually post the data for the specific photo. We serve up a special page for facebook, a graph URL.

For example, here is the graph URL for one of your photos from the page you linked below:
http://www.shofoto.com/services/graph/gallery/18677365_d2jsBS/1444280134_GxTbLS6

And this is the data FB extracts for that URL:
http://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.shofoto.com%2Fservices%2Fgraph%2Fgallery%2F18677365_d2jsBS%2F1444280134_GxTbLS6

It may be possible for you to get these URLs to work with the stuff you added in, but it will probably take some javascript coding skills and a little work....

I don't know if that helps at all?

ShoFoto wrote: »

Scott,
Here is the link that started me going in this direction. This example shows an FB notification of "Francis Luu like The Rock on ImDB" when a user clicks the Like button. In the SmugMug world, I was hoping I could get similar notification i.e "Scotticus likes Monsoon on Shofoto" if you were to click on the Like button in this page. Today, all you get on FB upon clicking this Like button would be "Scotticus likes Shofoto" and a random picture from the album.
Essentially, I'm trying to get FB conversations going about individual fotos as opposed to the whole site. My rationale is people are going to Like a site once but if I can tie conversations to individual fotos, we would truly be leveraging FB on a long term basis.
Hope this helps communicate what I'm trying to do but missing. I look forward to hearing from you.

ShoFoto

scotticus wrote: »

Ohhh, okay. Well, if you use our implementation of the like button, when a user clicks it, it will actually post the data for the specific photo. We serve up a special page for facebook, a graph URL.

For example, here is the graph URL for one of your photos from the page you linked below:
http://www.shofoto.com/services/graph/gallery/18677365_d2jsBS/1444280134_GxTbLS6

And this is the data FB extracts for that URL:
http://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.shofoto.com%2Fservices%2Fgraph%2Fgallery%2F18677365_d2jsBS%2F1444280134_GxTbLS6

It may be possible for you to get these URLs to work with the stuff you added in, but it will probably take some javascript coding skills and a little work....

I don't know if that helps at all?

Looks like you are sending Gallery info rather than Photo info. This results in "Likes" being for the gallery rather than photos.
It also does not generate the same type of FB notification as in their documentation. Feel free to try "Like"-ing it and see (you can "Unlike" it from your FB)
Unfortunately, I'm not a programmer. Can you help me implement what I need?

Below is what I have in my Footer code which is generating the FB button on Gallery pages:
Like Box: class="fb-like" data-send="true" data-width="600" data-show-faces="true" data-colorscheme="dark" data-font="trebuchet ms"
Comment Box: class="fb-comments" data-num-posts="1" data-width="600" data-colorscheme="dark"

Below is what is in my head Tag:
!-- Facebook Web Insights tags -->
meta property="fb:page_id" content="229967607053319" />

!-- Facebook Open Graph Protocol tags -->
meta-property="og:id" content= "239594496100416",
meta property="og:title" content="Shofoto"/>
meta property="og:description" content="Shofoto.com - your destination for quality photography."/>
meta property="og:type" content="website"/>
meta property="og:url" content="http://www.shofoto.com"/&gt;
meta property="og:image" content="http://www.shofoto.com/photos/i-HGV6cMr/0/O/i-HGV6cMr.png"/&gt;
meta property="og:site_name" content="Shofoto"/>
meta property="fb:admins" content="XXXXXXX, YYYYYYY" />
!--- meta property="fb:app_id" content="239594496100416"/ --->

!-- Facebook comments box script using Shofoto AppID -->
div id="fb-root"></div
script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=239594496100416";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

ShoFoto

Scott, This link shows how Wordpress can pass the appropriate URL using a variable to og:url. Is something like this available for SM?

ShoFoto

ShoFoto wrote: »

Scott, This link shows how Wordpress can pass the appropriate URL using a variable to og:url. Is something like this available for SM?

Bump...Scott/Andy, Any updates?

scotticus

ShoFoto wrote: »

Bump...Scott/Andy, Any updates?

Yes ShoFoto, we offer all that stuff, but the URL is only accessible by using our like button.

If you want to do something with the URL that FB gets, it's in this format
www.shofoto.com/services/graph/gallery/18677365_d2jsBS/1444280134_GxTbLS6

That would be:
www.shofoto.com/services/graph/gallery/albumId_albumKey/photoId_photoKey

That help at all?

ShoFoto

scotticus wrote: »

Yes ShoFoto, we offer all that stuff, but the URL is only accessible by using our like button.

If you want to do something with the URL that FB gets, it's in this format
www.shofoto.com/services/graph/gallery/18677365_d2jsBS/1444280134_GxTbLS6

That would be:
www.shofoto.com/services/graph/gallery/albumId_albumKey/photoId_photoKey

That help at all?

Scott,
The URL passed through the SM/FB Like button is of the Album not of the Photo. How do we make it pass URL, NAME, DESCRIPTION of the photo? Clearly, we cannot hardcode this information. Is there a way to construct the URL dynamically? If so, how? The link in my previous post shows how it's done with WP. Can you give me similar code for SM?
Thanks

scotticus

If you use the URLs I outlined earlier they have all the FB stuff, and are for the image, not the gallery.

It would be in this format:
shofoto.com/services/graph/gallery/albumId_albumKey/photoId_photoKey

If you want to send me a link to one of your photos I can show you the URL and what data would get sent to facebook....

ShoFoto wrote: »

Scott,
The URL passed through the SM/FB Like button is of the Album not of the Photo. How do we make it pass URL, NAME, DESCRIPTION of the photo? Clearly, we cannot hardcode this information. Is there a way to construct the URL dynamically? If so, how? The link in my previous post shows how it's done with WP. Can you give me similar code for SM?
Thanks

ShoFoto

scotticus wrote: »

If you use the URLs I outlined earlier they have all the FB stuff, and are for the image, not the gallery.

It would be in this format:
shofoto.com/services/graph/gallery/albumId_albumKey/photoId_photoKey

If you want to send me a link to one of your photos I can show you the URL and what data would get sent to facebook....

Scott,
Here is a link to a photo. I get which is the albumId and which is the photoId.
The part that is unclear to me is - URL for each photo is different. We don't get to pass a different URL to each FB-Link button based on the galleryId+photoIds. OG:URL is set in the <head> tag. Unless we have a way to define the content/value of OG:URL with variables such as albumId_albumKey & photoId_photoKey, we will always be passing the same static URL. So how do we define the value/content for OG:URL so that it creates the value dynamically based on the galleryId+photoId?
Similarly how do we set the value/content of OG:Title dynamically to the name/title of the photo?

ShoFoto

ShoFoto wrote: »

Scott,
Here is a link to a photo. I get which is the albumId and which is the photoId.
The part that is unclear to me is - URL for each photo is different. We don't get to pass a different URL to each FB-Link button based on the galleryId+photoIds. OG:URL is set in the <head> tag. Unless we have a way to define the content/value of OG:URL with variables such as albumId_albumKey & photoId_photoKey, we will always be passing the same static URL. So how do we define the value/content for OG:URL so that it creates the value dynamically based on the galleryId+photoId?
Similarly how do we set the value/content of OG:Title dynamically to the name/title of the photo?

Andy, Scott,
I think I've asked the same question multiple times? Can I have a straight answer, please?

scotticus

ShoFoto, if you use our like buttons, we provide Facebook with a custom page/URL, which uses the URLs I outlined above, which works for photos. If, you want to use your own like button code, you need to tell facebook to use a different URL, that follows the formats I outlined above. The reason your code doesn't work as is, is that facebook does not see anything after the # sign in the URL, so you never get photo info.

Using the link you gave me to the photo above, here is what Facebook would see if you used the special Facebook URL:
http://bit.ly/vEuG6G

So you either: 1) need to use our like buttons... or 2) use JavaScript to create and pass the custom URL to facebook....

ShoFoto

scotticus wrote: »

ShoFoto, if you use our like buttons, we provide Facebook with a custom page/URL, which uses the URLs I outlined above, which works for photos. If, you want to use your own like button code, you need to tell facebook to use a different URL, that follows the formats I outlined above. The reason your code doesn't work as is, is that facebook does not see anything after the # sign in the URL, so you never get photo info.

Using the link you gave me to the photo above, here is what Facebook would see if you used the special Facebook URL:
http://bit.ly/vEuG6G

So you either: 1) need to use our like buttons... or 2) use JavaScript to create and pass the custom URL to facebook....

Scott,
I get (got) that I need to use JavaScript to create and pass the custom URL. I don't know how to create this URL - can you please help me with it?
BTW, #1 does not work well as it passes to FB, URL etc of the Album not the Photo (unless it has been changed recently).