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
Related
I want to share an image from a website on Facebook and pass some attributes (e.g. a description) to the status update, all done by clicking on a link.
A few months ago this worked fine using the sharer.php but by now this script just accepts a URL as parameter and scrapes the target site for Open Graph meta tags. This new approach isn't very helpfull if you just want to share elements on a page instead of the whole page.
Yeah, I could create an app and use the feed dialog to achieve my goal. But I honestly don't want to walk through the tedious app validation process just to share an image with some additional info!
So, does anyone know of a way to avoid this app hassle? Perhaps some undocumented parameters for the new implementation of the sharer.php?
There's no need for app validation - as #CBroe correctly stated! So the feed dialog IS an adequate solution!
Background: I assumed an app needs validation to go live. But I just didn't set up my app properly to make it available to every Facebook user.
See the comments to gloat over my stupidity. ;)
I have been reading about using Open Graph (OG) meta tags to improve the way facebook works with your website. I have read two tutorials that say to create an application and use the application ID. But I am not developing an application, all I have is a business page... Can I just the page ID?
Can anybody also point out any good, simple resources around the using OG in my website?
Thanks
The sharer.php method (which is deprecated) allows you to post without an application. The feed/post method appears to require an app_id, though it's possible that there's some way around that. On the bright side, there's nothing complex about creating an application, so, if that's what you must do, I'd say just do it :)
Here is an example of how it works *with an app using the feed/post method (you'll need to click the "Post to feed" link at the top (yes I know it doesn't look like a link!).
and Here is the same exact example only using Sharer (notice that this time it's pointing at a slightly different url (drawImageForFB2.php instead of drawImageForFB4.php).
I use a php to render the tags based on the vidId that I collect but that's neither here nor there... you could just as easily have this as a static HTML page.
The innards of the OG tag are just about identical and the app_id tag in the OG is entirely optional as it pertains to the second example).
Oh, and addthis does it using the dialog api which looks like this
https://www.facebook.com/dialog/feed?redirect_uri=http://s7.addthis.com/static/postshare/c00.html&app_id=140586622674265&link=http://support.addthis.com/customer/portal/articles/381222-optimize-facebook-sharing#.UQ8bBJM9KQk.facebook&name=Optimize%20Facebook%20Sharing&description=
I need to create a "contest" page where user will be asked to submit picture.
After that, they should be able to share their picture on FB, Twitter, G+, Pinterest, etc for other people to come and vote.
I want the page to be displayed as a jQuery gallery and whenever people select a thumbnail, the bigger picture open with the associated vote and "share" button.
When a user share an image, I want a specific TITLE & URL associated with that particular image... something like "http://www.mysite.com/contest.html#picture1"... or "http://www.mysite.com/contest.html#picture2"
How is this possible if I only have one page?
I wouldn't have problem if I could use the old "facebook.com/sharer.php" with parameters... but it seems that the Open Graph Protocol is "overiding" the sharer.php parameters....
Works fine with Twitter and Pinterest... I might have the same problem with Google+.
Excuse my bad english, thanks!
Well, set up a (“dummy”) page for each picture, and fill it with the appropriate OG tags … and have your users like that. And then put a JS redirect into that page, so that users following the link when it’s shared on Facebook will get to the “real” address you want them to end up at.
(Btw., IMHO this is what happens too often these days when people think doing everything client-side and client-side only is so “fancy” and that a “good” and “modern” site requires all that AJAX/one-page-only nonsense instead of a real good and working URL structure, and then are not able to handle all that this implies properly …)
The company I'm currently working for wants to create a button that lets people share their order on Facebook after they've paid, but with the deprecation of the "Share" button I don't really know how to do it.
The "Like" button does not seem fit for this. Any ideas, anyone?
There are a few ways to go about this.
You can use the standard sharer. This is good for one-off sharing or in cases where you don't have control or don't want to control how the share is rendered and you want Facebook to handle it.
http://www.facebook.com/sharer.php?u=<url to share>&t=<title of content>
It won't require you to have an app ID but you also won't get a nice control panel for your applications sharing history/insights. You can query and get some information about the URL your sharing though by looking through the open graph.
I.E
https://graph.facebook.com/?ids=http%3A%2F%2Fwww.cnn.com
https://graph.facebook.com/comments/?ids=http%3A%2F%2Fwww.cnn.com
You can set the URL and Title of the content. The sharer will then look at the metadata on the webpage your sharing to determine the contents of the share. More below.
You can also use the Feed dialog. Which comes with more customization options. The Feed dialog is the best option if your integrating sharing as an integral part of the application. I think at minimum you need to include the app_id,redirect_uri and link property. Look through the properties here. You will need an app ID to use this feed dialog and if your using the JS api you need to authenticate the user too. You can also invoke the dialog directly through a direct url where you don't need to pre-authenticate the user.
With either sharing method, you may wish to include custom open graph metatags on your webpage. This way you can influence how the Facebook scraper makes your share. You can set some default (pre-accepted by Facebook) open graph metatags on your page. Or you can create your own set now in the dashboard. In the Open Graph dashboard on Facebook you can customize how Facebook is supposed to read and interact with your metatags.
You can debug your pages open graph metatags by passing your URL through the debugger.
I.E
http://developers.facebook.com/tools/debug/og/object?q=www.cnn.com
This will give you, for example, JSON or an HTML representation of how FB sees the page.
Despite the meta tags (the first one I never used before, but it came up in the addthis forums);
And the debug tool getting the data in a correct manner:
https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.mondiales.nl%2F
The facebook sharer code does not use the image specified. No images show up at all, there is no thumbnail chooser.
Looking at the HTML of the facebook sharer page, the image is actually there! The thumbnail chooser has a display:none. And when posting the damn thing, no image shows up on the wall.
Stop using addthis and implement a like function using the just the Facebook API? But from what I read, Facebook does a request for the page to get it's data so the JS part should not be the issue, should it?
Did I overlook something?
There's a restriction on the width/height ratio of images shared, the ratio must be less than 3.0
Your image is too wide (211/66 = 3.19) - add some vertical whitespace and it'll share OK i think
For future reference this is mentioned on both the old Share Button docs and the Open Graph protocol docs (under 'og:image')
I've found that once I've posted something to my wall from the sharer or the app, if I try to repost it, it will remember the original image (or no image in your case).
It might be worth clearing the whole cache/cookies from your browser and see if that does the trick.
If not, you'll find that if you log in as another user of Facebook and they try to post it, it will pick up on the new image on their account and not yours.
I'm not exactly sure how Facebook caches the images.
I know this thread is old but this may help someone else with the same issue. FB caches shared urls along with the thumb images and descriptions. To update the cache, add a bogus parameter to your shared query string, like, "?v=1". This gets the latest og tags.