I need to make a customized share button, where I can programmatically modify all the components of the share, such as the title, description, and sharing image.
I have tried just the og meta tags, but they haven't made a difference. I tried adding data-image etc. tags to the HTML link element, and that didn't fix it either. I also tried using the JS SDK, where I create a postToFeed() function with the data.
Am I doing something wrong? Are these outdated methods? Is this not the expected use case for the SDK share functions?
You need to refresh the Open Graph data for an URL in the debugger: https://developers.facebook.com/tools/debug/
That tool is very important to test your OG tags too, of course.
You can also use the feed dialog and specify your own data: https://developers.facebook.com/docs/sharing/reference/feed-dialog/
Although, i would recommend using OG tags with the share dialog.
Related
I've successfully added a Share button to my website using the following code:
https://developers.facebook.com/docs/plugins/share-button
It produces a popup with a link to the og:url along with the title of the linked page and a picture from it, which I can then post, and it shows up on my Facebook.
I am having 3 issues with this:
I've update the og:url and data-href after page load, using jquery, but the new values get ignored when I Share.
the og:title, og:description, and og:image don't appear to be used at all.
Sometimes I'd like to Share some custom text (and images if possible) without any url.
I'm aware that Facebook provide other tools/APIs that provide more versatility but it seems that would mean my site would have to go through a review process, and I'd have to code for security. This is not an option and I want to stick to the popup method.
Hope someone can help. Many thanks.
If the tags do not change when posting, refresh (and test) the tags in the debugger: https://developers.facebook.com/tools/debug/sharing/
Dynamically created Open Graph tags (with JavaScript) will be ignored, the tags have to be in the original page source.
I am creating a customised Facebook share button. The idea is upon clicking on the Facebook share button, it will pick up the meta tags on the page and prefill the share information with a title, description and image that have been curated.
What URL should I be using for the button?
There is https://www.facebook.com/dialog/share
and https://www.facebook.com/sharer/sharer.php
I heard the latter has been deprecated? And you can append a whole bunch of information to the URL as well?
I can't quite figure that out.
sharer.php is not deprecated. It was, for some months, but you can definitely use it. The benefit of using sharer.php is that you don´t need to create an App. It´s the easiest way to implement sharing.
Keep in mind that sharer.php ONLY takes the URL as parameter, everything else will get loaded from the Open Graph tags.
For example:
https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Ffacebook.com%2F
I am implementing a facebook share button in an angularjs app and after doing all the necessary stuff to get my meta tags updated and read by Facebook's crawler, I am seeing a mismatch between Facebook's debugger tool and what the share dialog shows.
If I run the debugger on my link, I get a successful scrape that pulls all of the meta tag content and shows what the share dialog should look like. Then if I click on the preview to see that actual share dialog, I get a different result as if it is not reading the meta tag content. The same goes for the share button on my actual website.
Any thoughts?
This might be an issue with protocol inconsistancy. Check you're not using http:// on the debugger, vs https:// on the actual site, and vice versa. Ensure all of your og tags have the correct protocol set, and that the protocol is not omitted.
Facebook provides a javascript SDK where you can specify what data you want to be in your popup. If you want complete control over the dialog then it would probably be best to use FB.ui to do so.
I found sites which are using like button to specific images from galleries and when you like them on facebook they display proper image buth without even using og meta tags???
How they are doing this???
Here is example:
http://www.subotica.com/slike/album-62834-omega-disco-subota-vece/
Try to like any picture and try to debug them on facebook debuger and you will see that there are no meta tags but crawled picture is proper!
They are using the old sharer.php endpoint.
http://www.facebook.com/sharer.php?u=URLENCODED_URL_TO_PHOTO
That endpoint is officially unsupported. For the moment it still works, but it could be removed at any time. You can accomplish something similar using the Feed Dialog or the proper og:meta tags.
I want to add Facebook OpenGraph tags to my page, but I also want to stick with the style of Facebook Like button that I currently have (a custom image tag).
The OpenGraph plugin instructions suggest you have to use Facebook's own Like button styles, and the customization options are limited.
Is there any way I can apply the Facebook Like code to my own image button?
UPDATE: to be clear, what I mean is that I have an image on my page that links to https://www.facebook.com/sharer/sharer.php?.... I don't have a standard Facebook Like button. Will this mean that the OpenGraph tags on my page don't actually do anything?
The old sharer.php endpoint will read the same meta tags as the Like button - when shared, the Facebook crawler accesses your site and pulls the metadata for the post (image, description, etc)
If you want to generate some sample metadata there's a form on the like button documentation (see 'step 2') to output tags in the correct format.
Use the Debug tool to see what tags Facebook detects on your site.
It's against facebook's policies to try and replicate or re-create the like button.
Adding open graph tags won't affect your page, but they will improve how it appears when shared or liked in Facebook.
You may create a button called share which opens the feed dialog (sharer.php is deprecated) but you must use the real like button, not a custom image tag.