I want to build a share button for a certain URL, but I want to keep my solution as simple as possible. I would like to avoid having to import any JS framework or toolkit from their SDK to do this.
For instance, in Twitter, I can get that same result with this code:
Share
In here I can customize the URL and the predefined text that the tweet will contain.
Is there an analog way to achieve this for facebook?
Just use sharer.php:
linktext
You can only share links, and you cannot prefill the message, of course. That would not be allowed anyway (see platform policy). Also, Open Graph tags will be taken from the source of the shared URL.
Related
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.
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 read through facebook's documentation and I've seen some examples on the webs, but I can't fully understand the process involved in posting content on the users timeline.
I want to connect the account of my users (users of a web application, which allows to manage and visualize some media content on a custom flash player) to Facebook, and whenever they want, let them share into their own timelines a "story" about the project they've just created.
In particular, I want to show on their timelines the flash player, and other HTML+CSS+JS content and/or interactions.
Something like "user has created a project on MyAPP" and then show a summary of that project on the timeline.
(I have already done something similar using only open graph meta tags and a URL that embeds a fully interactive flash player into the timeline, just like a youtube video)
I read through collections, actions, stories and other stuff, but I still don't know:
Is it possible to do this: share on behalve of the user, custom tailored content? Like custom HTML + CSS + JS (and Flash) ??
If the above is possible, what, nn general lines, must be done to accomplish it? Create a Facebook App, create custom actions, stories, collections, objects... ??
The picture bellow is what RunKeeper posts on my timeline after each of my runs. Is this graph something standard, made by Facebook? Or Runkeeper itself designs, creates and posts the content explicitly that way for their users ??
Is it possible to do this: share on behalve of the user, custom tailored content? Like custom HTML + CSS + JS (and Flash) ??
No, of course you can not embed custom HTML and CSS – since this would not be sandboxed by browsers, you could potentially alter the whole page (think about absolute/fixed positioning, etc.), way to dangerous to allow that.
Flash can be embedded in certain ways – either custom video players for objects of the video type, or previews of flash-based games in the feed (keyword: feed gaming).
The picture bellow is what RunKeeper posts on my timeline after each of my runs. Is this graph something standard, made by Facebook?
That is a story generated for the fitness.runs action and the fitness.unit object type. These are a common action and common object provided by Facebook, and they have the according story type layout pre-setup as well.
If the above is possible, what, nn general lines, must be done to accomplish it?
That question is too broad and general to be answered here. Read the Open Graph documentation, guides and how-tos more thoroughly – and then try stuff out and see what you get.
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=
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.