Sharing something on facebook

hey,
i am building web-market similar to etsy
and i would like to give people the ability to share their products on facebook… how i can build this sharing button ?
i already implemented the login with facebook account feature and its working.
i’m not familiar with using facebook open graph…
thanks

1 Like

Use the “Add to Any” plugin.

1 Like

This worked with sharing a page… does it work with individual content items now? Can we share a specific image with title etc?

Yes, it still works at a page level.

But now you can specify images and titles from the page thing.

There was some talk about making this more specific i.e. “Thing” level. Did that go anywhere?

Yes, as long as the thing you want to use (including all he data fields on that thing etc) in the OG tags is the page thing , you can do this.

Will put together a (no doubt fruit based) demo.

1 Like

Here we go.

Word of warning, something (maybe AddToAny) seems to cache the OG tags. So if you swap from Lemon to Pear, and then share … it comes up Lemons. If you refresh the page it will share a Pear. So it might be better to have a thing per page.

Also … Facebook is a real pain with images etc. They need to be > 200x200 etc etc.

Do use the Linter to debug.

https://developers.facebook.com/tools/debug/

3 Likes

@NigelG

Do you know why Facebook is not displaying my pictures the first time? It will only display it when I share the page a second time. I read that this is due to the fact that Facebook has to render the picture etc. when I dont use og:height and og:width

I always get this error:

But even when I use the OG: Tags:

it still does not work the first time (only the second time and I still get the error that og:widht and og:height are missing)

Did I forget something?

I think it will be because Facebook caches all the metadata ? If you use the FB “linter” it will work first time.

How to fix it … hmmm.

1 Like

Thanks Nigel.

I will have a catalogue with a lot of pictures. So the case that a picture will be shared for the first time on Facebook will be a quite common case. I have the feeling that the og:image:width and og:image:height tags are being ignored by facebook.

Does anybody have experience with this?

Will you have a different URL each time ? If you don’t Facebook will cache the image, and it won’t change.

But yes, on first share of a page with a new image, it won’t show as FB has to download it to work out the size. So it will just ignore it until next time it uses the cache.

Is your image definitely 400x400 ? Is this what FB sees on the linter ?

It is pretty sensitive - and will always prioritise itself (speed of showing the FB share dialog) over you (the right image from your site).

But the width.height tags should allow it to do it synchronously. I know an FB sharing guru that I can ask if we can’t solve it.

Hi,
Did you find any solution on this? I have exactly the same problem - facebook is not using the provided image dimensions and simply refuses to render the image on the first sharing.
Thanks!

Yes, I did :slight_smile:

You need to pre-cache it on page load by calling the fb graph API as follows.

Just override the URL in the action.

Remarkably simple for something that has had me stumped for a while.

4 Likes

Great! I was struggling for quite a while to make this work. Now it’s working perfectly. Thank you.

Hi, I could’t find the window, the snapshot of which included just under the line “You need to pre-cache it on page load by calling the fb graph API as follows”. Could you please tell me how to get there?

That is the plugin called “API Connector”. Install the plugin, then you can set it up.

Hi Nigel - I have the FB Scrape mostly working. But there are a few things that don’t behave as expected:

  1. In your copy/paste above, I don’t see the same FB Scrape - Scrape as you have. Mine is this:
    image
    How do I get the “Call endpoint - URL” to show up?

  2. My app creates dynamic pages which I’m scraping and have unique (dynamic) picture for each page. When I do the Facebook share (using AddToAny plugin), the first time I share, the picture doesn’t show up in the FB sharing popup, but the second time I share, it does show up. Any suggestions on how to fix (is that related to # 1 above?) . Seems like a pre-cache issue.

  3. When I share a page for the first time, my “Title for SEO/FB” and “Description for SEO/FB” for the page (both fields have dynamic and static content) shows up fine in the FB popup. But if I change either the dynamic or static content and share on FB, the content isn’t updated on FB’s share popup. If I go into FB’s debugger and do a scrape, then the changes will showup on FB’s share popup (but going into FB’s debugger and scraping manually is not practical for me)

And if it helps - my SEO & Metatags under Settings are blank (the 3 fields and picture).
It seems that something isn’t setup quite right for my app to do the pre-cache on page load correctly. Thanks in advance…
tx
Nikolai

Did you check this out … ?

https://buildingonbubble.com/block/dynamic-facebook-share-1482744878545x286517754912309250

  1. It will well be that the API connector has changed since I wrote that (in fact am certain it has).
  2. Yes, that is what happens if you don’t pre-cache it. Make sure you have the right sized image too.
  3. FB won’t rescrape the page unless you ask, so if you change the Title etc it will use the cached version.
1 Like

Thanks…yes i’ve been looking at the example and have everything setup similar to how it’s setup in the example.

Regarding #2, I thought the “FB-Scrape - API Call” on page load (the picture i sent earlier in this thread) takes care of pre-cache. Is there a different step I need to take to pre-cache (hopefully not manually doing a scrape in FB debugger)? I initially had issues with the picture size (too small) but have had that fixed for awhile

Regarding #3, doesn’t the “FB-Scrape - API Call” take care of asking FB to rescrape on page load? Or is there another trigger to tell FB to scrape?

Thanks again - I think I’m pretty close to getting this working!

#2 - no, that should do it. It does the same thing as the manual FB linter.
#3 - again, it is the same call

Sounds like the call is not working for some reason :frowning: