Facebook Share button for multiple pages

Design help General
1

Hey everyone,

I´m facing some obstacles concerning social plugins, namely the facebook share button at each Page.

Basically we want to add a facebook share button, at every page where there is a News Story (our website will be an entrepreneurship news platform) and we want that people are able to share that page content when they press on it, kind of like what is done in webflow´s Blog Designers will rule the web | Webflow Blog (if you scroll down you can see the facebook share button, and you can share only that page)

I went to facebook developers page, I got the code for a specific page on my website, I did the Html embed stuff, but it only shares my general website/homepage.

The page I tried this on is http://www.betup.pt/brasil-o-pais-com-mais-empreendedores-no-mundo (if you scroll down you can see the facebook share button there)

Can anyone help? Here is the public profile https://preview.webflow.com/preview/bet-up?preview=d20506ebeeb241e334c3d0d4d966a8f9 and the page in question is as follows

1167×656 518 KB

Thanks a lot.
Cheers,
Diogo

2

do you put javascript code into your Webflow project’s custom code body tag area?

3

What javascript? The one provided from facebook?

If yes, the problem is that won´t solve it, because I would need javascript code for every page I want to be sharable.

4

Hi @BET_ventures, thanks for your patience. I found a solution that should help.

First, the share code is on: Share Button - Social Plugins - Documentation - Facebook for Developers

I have created a sample site, that you can clone, with all the code setup:

https://webflow.com/website/social-pages-demo?s=social-pages-demo

Here is the published version: http://social-pages-demo.webflow.io/

You can switch to different pages from nav bar and click the share button. There is two embeds on each page, one that has the code needed by facebook on each page just below the body and the other embed is the code you update on each page, to give a unique url.

Try that out, I hope it helps. That is about as close as we can get, before we build in great new features for this :slight_smile:

Cheers, Dave

5

Hi @cyberdave, thanks for the help.

That´s awesome and it works.

Can you just explain how you did to edit the text and the image that apperas on the post?

Thanks

Cheers,
Diogo

6

Hi @BET_ventures, that is set in the SEO fields in the Page settings, just update those values to what you want. See this article: http://help.webflow.com/how-webflow-uses-seo

I would also put Alt text for the images :smile:

​I hope this helps. If not, please let me know – I’m happy to assist further! :slight_smile: Cheerios, Dave

7

Hey @cyberdave thanks again for the quick reply.

I did as you ask but nothing changed. This is the page http://www.betup.pt/brasil-o-pais-com-mais-empreendedores-no-mundo

and this is the public link https://preview.webflow.com/preview/bet-up?preview=d20506ebeeb241e334c3d0d4d966a8f9

Do you have any ideas?
thanks

Cheers,
Diogo

8

Hi @BET_ventures, thanks for the update. I missed one thing, it seems there is an app id being used that is not valid in the published site:

2480×378 86 KB

That is because this is using facebook api, you need an App ID and add that to the code.

Here is a tutorial: San Francisco Bay Area WordPress Website Design Development Company - HyperArts

Once you get the ID, you change your FB code to include the app id. My example below assumes my app ID is 999999999.

<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"//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.3&appId=999999999";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

​I hope this helps. If not, please let me know – I’m happy to assist further! :slight_smile:
Cheers,
Dave

9

Hey @cyberdave, thanks again for the support.

I got the APP ID, and I replaced the code, but the same problem continues .

Is there a way to perhaps add the open graph tags facebook talks about here Webmasters - Sharing - Documentation - Facebook for Developers that are used to define what I want to appear when people share a page of my website?

Thanks.
Diogo

10

Hi @BET_ventures, this share seems to be working for me, can you check again? When I go to your published page, the share is pointing to that current page, not the main web site address. You will not be able to use open graph meta tags for each page yet, unless you export the site and edit the html manually outside of Webflow. We do not have ability to edit page level Headers yet. Cheers, Dave

11

Hey @cyberdave,

Yes, I just checked again. The problem is not with the pointing (cause it´s pointing to the right page) the problem is:

  • it does not share the correct image

The correct image should be this one

1366×768 1.28 MB

but instead it´s showing this one

1366×768 278 KB

  • also the text in the description is not the one correct one, it´s always what you can see on the print below

1366×768 281 KB

and it should be this one in the SEO Description right?

1366×768 585 KB

Do you have any idea what might be wrong?

Thanks,
Diogo

12

Hi Thanks @BET_ventures, I will take another look :smile: As soon as I have some info, will let you know :slight_smile: Normally to set the image for each page, requires the OG:META tag to the image on each page (which we do not support yet), but I will check to see if there is a workaround in the FB share button script.

Cheers,
Dave

13

Hey @cyberdave, but in your test site it works, when you share, the image that shows up is the image in the page.

On my case, the image you see when you share in (in the link I provided in the post above) it shows up an image that it´s not even on the page.

I will be waiting for news.
Thanks again.

Cheers,
Diogo

14

Hi Diogo, I will continue to check it, thanks for the update. Yes, the sample I sent works correctly. It should work for you too, unless there is something else FB is grabbing that from somewhere else. I am checking :slight_smile: Cheers, Dave

1 Like
15

Hey @cyberdave we are updating the site so the new page is http://betup.pt/seccao/brasil-o-pais-com-mais-empreendedores-no-mundo

Is you try to share, now all the text for the discription is showing.

Only thing missing is the image.

But if you take a look at this page http://betup.pt/seccao-our-bets/costura-com-a-celia somehow everything is working correctly, as if you press share, it shares the correct text and correct image, but everything is the same as in the other page whre it is not working.

The “go live” for the site is tomorrow, do you have any new ideas?

Thanks
Diogo

16

Hi @BET_ventures, my guess is that there is some server caching going on somewhere, that when Facebook is retrieving the URL, it is getting old info perhaps from a previous crawl of your site. The issue might solve it self in time. The code with the FB share button is good, I don’t think there is any problem there.

Here is what I see on the site that was missing the image:

1336×994 161 KB

One thing though on the site where the image is not showing, I only see one image on the page, the logo. There is a background image, but FB only work with image widgets, it will not read the background image.

​I hope this helps. If not, please let me know – I’m happy to assist further! :slight_smile:

Cheers,
Dave

17

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.