Facebook has changed the way websites can publish content to users' Facebook profiles. Older implementations used the Facebook JavaScript SDK with permissions such as publish_stream and API calls such as /me/feed. These methods are deprecated and should not be used in new projects.
For most websites, the recommended approach is to use Facebook's Share Dialog. It allows users to share a webpage or URL to their Facebook profile after they choose to do so.
Step 1: Create a Share Button
First, create a button or link that will open Facebook's Share Dialog.
<button type="button" onclick="shareOnFacebook()"> Share on Facebook</button>You can also use an anchor element:
<a href="#" onclick="shareOnFacebook(); return false;"> Share on Facebook</a>Step 2: Add the JavaScript Function
Next, create a JavaScript function that opens Facebook's sharing URL. Replace the example URL with the page you want users to share.
function shareOnFacebook() { var url = encodeURIComponent(window.location.href); var shareUrl = "" + url; window.open( shareUrl, "facebook-share", "width=600,height=500,noopener,noreferrer" );} The function gets the current page URL, encodes it safely, and opens Facebook's Share Dialog in a new window.
Step 3: Share a Specific URL
If you want to share a specific page instead of the current page, define the URL directly in your JavaScript function.
function shareOnFacebook() { var url = encodeURIComponent(""); var shareUrl = "" + url; window.open( shareUrl, "facebook-share", "width=600,height=500,noopener,noreferrer" );} When the user clicks the button, Facebook opens a sharing interface where the user can review the content and decide whether to publish it.
Step 4: Complete HTML Example
Here is a complete example that you can add to a webpage:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Share on Facebook</title></head><body> <h2>Share This Page on Facebook</h2> <button type="button" onclick="shareOnFacebook()"> Share on Facebook </button> <script> function shareOnFacebook() { var url = encodeURIComponent(window.location.href); var shareUrl = "" + url; window.open( shareUrl, "facebook-share", "width=600,height=500,noopener,noreferrer" ); } </script></body></html> How It Works
The process is straightforward:
- The visitor clicks the Share on Facebook button.
- JavaScript gets the URL that needs to be shared.
- The URL is encoded using
encodeURIComponent(). - The Facebook Share Dialog opens in a new window.
- The user reviews the shared content and chooses whether to publish it.
Adding a Shareable Image and Description
Facebook can generate the title, description, image, and other information from the webpage being shared. To control how your page appears when shared, add appropriate Open Graph metadata to the page.
<meta property="og:title" content="My Example Article"><meta property="og:description" content="Learn how to share a webpage on Facebook using JavaScript."><meta property="og:image" content=""><meta property="og:url" content=""><meta property="og:type" content="article"> These tags help social platforms understand the content of the page and determine what information should be displayed when the URL is shared.
Why the Old Facebook JavaScript SDK Method No Longer Works
The older implementation used code similar to:
FB.api('/me/feed', 'post', opts, function(response) { // ...});It also requested the publish_stream permission:
{ scope: 'publish_stream' }These APIs and permissions belong to Facebook's older platform model and should not be used for a new implementation. Websites should not attempt to silently publish posts directly to a user's personal Facebook profile.
Share Dialog vs. Direct Posting
| Feature | Share Dialog | Old Direct Posting API |
|---|---|---|
| User chooses whether to share | Yes | No longer supported |
| Works for modern websites | Yes | No |
publish_stream required | No | Deprecated |
| Uses Facebook sharing interface | Yes | No |
Conclusion
If you have an old website that uses the Facebook JavaScript SDK to publish directly to a user's wall, you should update the implementation. The old publish_stream permission and /me/feed publishing approach are deprecated.
For a simple website sharing feature, the Facebook Share Dialog provides a cleaner and more appropriate solution. Combine it with Open Graph metadata so that your page has the correct title, description, image, and URL when users share it on Facebook.
FAQs
Can I still post directly to a user's personal Facebook wall using JavaScript?
No. The old method of publishing directly to a user's personal feed using the publish_stream permission and /me/feed endpoint is deprecated. Modern websites should use Facebook's sharing mechanisms instead.
Do I need the Facebook JavaScript SDK to add a Facebook share button?
No. A basic Facebook sharing button can use Facebook's Share Dialog URL and does not require the JavaScript SDK.
How do I share the current webpage on Facebook?
You can pass the current page URL to Facebook's Share Dialog using JavaScript:
var url = encodeURIComponent(window.location.href);window.open( "" + url, "facebook-share", "width=600,height=500"); Can I customize the title and image of a Facebook share?
Yes. Add Open Graph metadata such as og:title, og:description, og:image, and og:url to your webpage.
Do users have to log in to Facebook before clicking the share button?
No. Your website does not need to perform a Facebook login before opening the Share Dialog. Facebook handles the sharing experience.
What happened to the publish_stream permission?
publish_stream was part of Facebook's older API and is deprecated. It should not be included in new Facebook integrations.
What is the difference between sharing a URL and posting through the Graph API?
A URL share lets the user choose whether to share content through Facebook's sharing interface. Graph API publishing is an authenticated API operation subject to Facebook's current permissions and supported use cases. For ordinary website sharing, the Share Dialog is generally the simpler option.
Why isn't my old FB.api('/me/feed') code working?
The code relies on an old Facebook API and permissions model. APIs and permissions used by older Facebook SDK examples have been deprecated, so the implementation needs to be replaced with a currently supported sharing approach.
Can I add a Facebook share button without creating a Facebook App?
For a basic URL-sharing button using the Share Dialog, you generally do not need to initialize the old Facebook JavaScript SDK or create an app just to open the sharing interface.
Last updated: