"Oops, we hit a snag" notification appears when attempting to share on Facebook using the share dialog

I am currently integrating Django with Facebook for page sharing. Below is the code snippet I am using to form the URL:

var link = 'https://www.facebook.com/dialog/feed?app_id=1234567890&display=popup&name=' + name + '&description=' + description + '&picture=' + picture + '&link=' + caption + '&caption=' + caption + '&redirect_uri=' + redurl;
window.open(link, "Share", windowFeatures);

The resulting URL after formation is as follows:

https://www.facebook.com/dialog/feed?app_id=1234567890&display=popup&name=GameStore:%20come%20and%20play!&description=Hey%20!!!%20I%20am%20playing%20to%20Breakout&picture=https://res.cloudinary.com/dma8tn6ge/image/upload/c_fill,h_75,w_75/profile-picture.png&link=http%3A//localhost%3A8000/game/player/1/&caption=http%3A//localhost%3A:8000/game/player/1/&redirect_uri=http://localhost:8000/fb_redirect

Although this code is triggered by a button click event in JavaScript, clicking the button results in an error message:

Sorry, something went wrong. We're working on getting this fixed as soon as we can.

p.s. The actual app id used in my code is not 1234567890.

If anyone could provide guidance on what I might be doing wrong here, it would be greatly appreciated.

javascriptdjangofacebookfacebook-share

Answer №1

Once I deployed it to Heroku, that's when things started to fall into place. It seems like Sayse was right - accessing localhost is not an option now.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Troubleshooting Routing Issues in a Next.js Website Tutorial

After going through the next.js tutorial at https://github.com/zeit/next-learn-demo.git, I encountered an issue starting from stage 3 "dynamic routing". Despite the tutorial indicating that dynamic routing should be working from stages 3 to 8, it wasn&apos ...

javascriptreactjsnext.js

Postpone an automatic action in React

I'm currently working on adding a fade out animation to a page change in React, but I need to delay the click event before the page actually transitions. Here's the code snippet I have so far: export default function Modal({setTopOf}) { const ...

javascriptreactjsnext.js

Using React to pass a link into a reusable component

I am currently utilizing a reusable component in React where I pass mostly text and some props. One of the texts requires a linked word, but I am unsure how to embed that link within a string. Any suggestions on how to pass a string with embedded links? Th ...

javascriptreactjsreact-props

Showing a notification that is persistent and not dismissible

Hello everyone! I've been struggling with a problem on the RPS project for quite some time now. The issue arises when I try to display a message for a tie in the game, but I can't seem to find a solution to make it disappear when the round is not ...

javascripthtmlcss

Navigating Django Templates - How to properly distinguish between Root and App searching

Is there a way to make the view load templates from the corresponding app (root vs child)? Here is the complete structure: Start a django project called galaxy Create an app - we'll name it planet. Set up a (container) template for / -> galaxy/ga ...

djangodjango-templates

Creating a seamless connection between a nodejs backend and a frontend interface

I'm facing an issue with my CRUD app developed using nodeJs. The app interacts with a mysql database to perform Create, Insert, Delete, and Read operations. Here's an example of a read operation: app.get('/run',(req,res) => { con ...

javascriptjquerynode.jsexpressweb-applications

Keeping the header fixed on a sticky div (tocbot)

While working on my website, I decided to implement a Table of Contents section using tocbot. However, I encountered an issue where the Title I added above the table doesn't stay fixed when scrolling. https://i.stack.imgur.com/vCm1K.gif Here's ...

javascripthtmlcsssticky

Save a document to the file system and retrieve it using Express

Can res.download() be used after writing a file to the filesystem? router.get('/exportjson', (req, res, next) => { let json = `{"@dope":[{"set":"","val":"200"}],"comment":"comment","folderType":"window"}` const file = `${__dirname}/upload-f ...

javascriptnode.jsexpress

Tips for creating an auto-incrementing ID within Firebase's real-time database

How can I create an automatic incrementing ID for entries in a Firebase database? The first item should have an ID of 1, and the second one should be 2. var database = firebase.database(); var userDetails = database.ref("Article"); userDetails. ...

javascriptfirebasefirebase-realtime-database

What causes the self-invocation of "foo()" when it is assigned to the addEventListener function?

function foo() { console.log("clicked"); } element.addEventListener("click", foo()); How come foo() is invoked automatically when the script loads, but foo is not? Also, what if I want to pass an argument to the function like this: function foo(elem ...

javascriptfunction

The return value from vue-query is ObjectRefImpl, not the actual data

Greetings to the Vue.js community! As a newcomer to Vue.js, I am seeking guidance on fetching data using vue-query, Vue.js 3, and the composition API. The data returned to me is ObjectRefImpl, but when I try to print the values, I encounter the error: "Pro ...

javascriptvue.jsvuejs3fetch-apivue-composition-api

Display the entire HTML webpage along with the embedded PDF file within an iframe

I have been tasked with embedding a relatively small PDF file within an HTML page and printing the entire page, including the PDF file inside an iframe. Below is the structure of my HTML page: https://i.stack.imgur.com/1kJZn.png Here is the code I am usin ...

javascripthtmlcsspdfiframe

The functionality of XMLHttpRequest becomes unreliable when dealing with GET parameters

I'm attempting to retrieve the DOM of a specific page. var req = new XMLHttpRequest(); req.open( 'GET', '/sport-hobby-kultura?adListing-visualPaginator-page=2&adListing-url=sport-hobby-kultura&do=adListing-visualPaginator-showP ...

javascriptgetxmlhttprequest

Delivering a Captivating JavaScript Pop-Up upon Page Loading

I have a simple pop up window (with no content) that triggers with the 'onclick' event. How can I modify the code below to make the popup appear automatically when the page loads? <head> <title>Popup Display</title> < ...

javascriptjqueryhtmlpopuppopupwindow

Encountering the "invalid literal for int() with base 10" issue specifically on a DecimalField

I'm attempting to perform a sumproduct query in Django: merchandise_value = Product.objects.all()\ .aggregate(merch_value=Sum(F('qty_ordered')*F('msrp'))) The field 'msrp' is defined as a DecimalField (with 2 d ...

django

What is the reason that an individual would stop another from executing by using $(document).ready(function() { ?

While I understand that it's supposed to be possible to run multiple $(document).ready(function() { on my page, for some reason I'm having trouble doing so. I appreciate those who have pointed out that it should work, but I'm really looking ...

javascriptjquery

Sass is throwing an error message saying 'Module not found' during the compilation process

After installing sass using npm ($npm install sass), I attempted to create a JSON script. Unfortunately, when running it, I encountered an error stating 'Cannot find module'. ...

javascriptjsonsassbootstrap-5

Preventing the creation of redundant database records in Django

Currently, I have a form in the settings that saves user entries into the Django SQLite database. It is essential to prevent users from entering duplicate settings with the same name. I attempted to use a for loop to verify if the data already exists but ...

pythonhtmldjangodjango-modelsdjango-forms

The functionality of the Bootstrap 5 dropdown button remains elusive, despite including all required scripts within the index.html file

I'm currently working on incorporating a dropdown button into my React project. Utilizing Bootstrap 5, I have already included the necessary jQuery and Bootstrap scripts. Below is the code snippet I've developed to create a dropdown button: < ...

javascripthtmljqueryreactjsbootstrap-5

Responsive Slider

In the current project I'm working on, I'm creating a team page that features a slider element. Originally, my goal was to replicate the functionality of the slick library without importing slick, jQuery, and also improve my JavaScript skills. ...

javascriptslider