Using FB Share button code and custom code validation

Design help Custom code
1

Hey guys, just installed my facebook share button, it works great.

I want to change what the actual share looks like, and facebook has directions to use meta tags in the of your page as described here:

But I just keep seeing a code not validated error, and of course the share is not customized using that data.

thanks for the help!

https://preview.webflow.com/preview/traviss-superb-site-1ab6a2?preview=46db44c12e35fb4ff7228e884dd86b0a

2

It isn’t an error. It is just warning you that the code isn’t being validated and that incorrect code might cause problems.

3

oh ok, but what about why the information isn’t coming up when the share button is clicked.

Like the meta code isn’t even there.

4

First, you don’t need to use custom code to have an og:title, og:image or og:description.

You just need to fill in the open graph fields above the open graph preview on the same panel.

Once you have made those changes, published the site. Then run your link through Facebook debugger.

5

wow thanks I didn’t know about that debugger.

I still can’t figure out a way to change the image, also the url at the bottom always says the root domain and not what I have in the page settings.

I don’t see any image option in webflow page settings, also adding the meta image line didn’t seem to help either.

Edit: well the image I was able to change by adding the meta image tag, and the URL thats displayed should be the root domain so thats ok.

Also, I can’t figure out what to set the URL to so that the button is clickable and a share window pops up :frowning:

6

Is it possible for you to re-post your read only link it seems to be broken.

A link to the live site would be great as well.

7

I had a custom script written because “onclick” is not available with Webflow

here it is in case anyone wants to use it.

Keep in mind, it has twitter share code also.

$(document).ready(function() {
	    $('#fbshare').click(function(e) {
	        e.preventDefault();
	        fbShare('http://www.facebook.com/sharer.php?u=', 'facebook_share', '');
	        return false;
	    });

	    $('#twittershare').click(function(e) {
	        e.preventDefault();
	        fbShare('https://www.twitter.com/share?url=', 'twitter_share', '&text=' + $('html').find('meta[property="og:title"]').attr("content") + '&via=travisbklein');
	        return false;
	    });
	});

	function fbShare(link, title, twitter) {
	    var w = 668;
	    var h = 339;

	    var left = (screen.width / 2) - (w / 2);
	    var top = 160;

	    window.open(link + window.location.href + twitter, title, 'height=' + h + ', width=' + w + ', top=' + top + ', left=' + left + ', toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, directories=no, status=no');
	}
8

Hi @TravisBKlein, just checking, is the issue with the custom FB share resolved now, or are you still needing some help with this?

9

yea, perfect @cyberdave, I was researching how to do it and it was the onclick attribute people were using to get the page to come up in a smaller size in a popup type window.

The script solved it.

(I’m replying too quickly so typing this to wait the 9s :stuck_out_tongue:)

1 Like