The URL for this page is not within the app's designated domains and will not open Facebook Dialogs (FB UI)

I am currently working on integrating Facebook UI Dialogs into my website.

My goal is to add custom actions when users share a post from my site.

I have created my app, added the app URL and domain (which is the same as the URL), and included all necessary code on my site. However, when I click the share button, it shows an error:

Can't load URL: The domain of this URL is not listed in the app's domains. To fix this, you need to add all domains and subdomains of your app to the App Domains field in your app settings.

This is the code I've been using:

<script type="text/javascript">
    $(function(){
        // initialize fb sdk
        window.fbAsyncInit = function() {
            FB.init({
              appId      : 'appid',
              xfbml      : true,
              version    : 'v2.8'
            });
        };

        (function(d, s, id){
         var js, fjs = d.getElementsByTagName(s)[0];
         if (d.getElementById(id)) {return;}
         js = d.createElement(s); js.id = id;
         js.src = "//connect.facebook.net/es_LA/sdk.js";
         fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
    });

    function share_property(){
        FB.ui({
          method: 'feed',
          link: 'link',
        }, function(response){});
    }
</script>

And here is the HTML for the share button:

<div class="query-submit-button pull-right">
    <input id="shareBtn" type="button" value="Compartir" onclick="share_property();">
</div>

Answer №1

Don't worry about keeping track of shares yourself, Facebook offers analytics for Apps:

To view specific Sharing stats, you can visit this page:

In any case, make sure to include the Domain of your App in the App settings as indicated by the error message.

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

Ajax experiences trouble with a intricate sequence of characters

How can I successfully send the following string to a spring MVC controller using ajax: (?=^.{8,}$)(?=.+\d)(?=.+[!@#$%^&]+)(?!.*[\n])(?=.+[A-Z])(?=.+[a-z])$ I am encountering a 400 bad request error and it is not leaving the client side. An ...

What's causing the Php error with the t_variable syntax?

I am attempting to post on the users' wall using their ID and offline token stored in the database. $result22 = mysql_query("SELECT token FROM usersoffline", $link2); $num_rows2 = mysql_num_rows($result22); // Retrieve all data from the "example" tab ...

Guide to fixing Vue app crashes caused by Web Sockets error

I'm encountering an issue with my Vue application as I am unable to load a specific page due to the app crashing. The console displays the following error, even though there is no implementation of Web Sockets in the app. Despite adding this snippet ...

Submitting the form without utilizing Ajax, but instead sending data directly to a PHP script

I've encountered an issue while posting a form to a PHP file using AJAX. Despite my efforts, the form is bypassing AJAX and posting directly to the PHP file. Here is my form: <form id="editform" name="editform" action="ajaxeditform.php" method= ...

"Enhance Your Phonegap Android App with Pinch Zoom Capability

I am currently working on an Android Application with the help of jQuery Mobile and Phonegap. My goal is to implement pinch zoom functionality on the App pages. I have come across several suggestions that involve using the following line, but unfortunatel ...

What is the process for updating IDs and names for duplicated elements?

I have created a select box and used the clone function to generate dynamic select boxes. However, the cloned select boxes have the same ids and names as the original. How can I change the ids and names of the cloned elements in my code sample below: < ...

The post body is incomplete and is lacking the necessary parameter "To" that

It seems there might be a configuration issue either in the header or the body. Should I make changes to the headers or is it possible that the body is misconfigured? const axios = require('axios'); const url = '/my_url'; const aut ...

Implementing functionality: Removing a row and applying a CSS class upon button click

Check out the fiddle below: https://jsfiddle.net/shaswatatripathy/enq0kfqL/2/ I need help with creating a remove function and adding a CSS class to a clicked row. 1. When I click on "remove", the clicked row should be deleted. When I click on a row, ...

Is there an easy way to determine if an element inside a Vue component is overflowing?

I created a unique component called ResultPill which includes a tooltip feature (implemented using vuikit). The text displayed in the tooltip is determined by a getter function called tooltip, utilizing vue-property-decorator. Here are the relevant parts o ...

The Ajax.BeginForm() function is not functioning as expected and is instead directly calling a JavaScript method within the OnSuccess

While working with ASP MVC 5, I have encountered an issue with Ajax.BeginForm() in one of my views. Whenever I submit a form using Ajax.BeginForm, the defined method is not being called. There are no errors thrown or caught, and it directly jumps to the ca ...

The image selection triggers the appearance of an icon

In my current project, I am working on implementing an icon that appears when selecting an image. The icon is currently positioned next to the beige image, but I am facing difficulties in making it disappear when no image is selected. Below are some image ...

Is there a way to assign a null value to an empty material UI text field when submitting the form, rather than an empty string?

One issue I am facing is that the default value of the text field is zero, but when I submit the form, the value of the text field becomes an empty string instead. This is not the intended behavior as I want the value to remain zero in the end. How can I r ...

What is the method for assigning 'selective-input' to a form field in Angular?

I am using Angular and have a form input field that is meant to be filled with numbers only. Is there a way to prevent any characters other than numbers from being entered into the form? I want the form to behave as if only integer keys on the keyboard ar ...

Is there a more efficient method for implementing server side rendering in a Next.js application?

Currently, I am implementing server-side rendering in my Next.js application. This specific component is responsible for returning HTML content. I'm wondering if there are more efficient methods available? import Feature from 'components/home/Fea ...

ng-repeat isn't displaying the data

I have always been comfortable using the ng-repeat in Angular, but this time I seem to be facing a problem. I am trying to populate my DOM with data from a JSON file, but for some reason, the fields are not displaying as expected. Is there something wrong ...

Error: The property 'language' is undefined and cannot be read

Struggling to execute the App-test.js file provided by React Native in the __test__ directory: import 'react-native'; import React from 'react'; import App from '../src/app'; // Note: test renderer must be required after rea ...

Why is it that a website is loading at a snail's pace on Angular?

Working on my college project has been going smoothly, except for one issue with slow loading times. It's frustrating how long it takes to load. I suspect that there might be an error in the deployment process or something else causing the delay. The ...

Leverage JavaScript to retrieve the formatting of an element from an external CSS stylesheet

Check out this HTML snippet: <html> <head> <link rel="stylesheet" type="text/css" media="all" href="style.css"> </head> <body> <div id="test">Testing</div> <script> ...

Displaying two distinct tables utilizing ng-repeat by employing customized directives

I'm facing an issue with a custom directive that generates tables and is appearing twice on my index page. The data for these tables comes from the $scope.globalrows variable. Even though globalrows contains 2 arrays, it always displays the second arr ...

What is the best method to determine the mean score by utilizing the ID values obtained from API responses?

These are the responses retrieved from the API: const attractions = [ {"id": 1,"name": "drive on avenue"}, {"id": 2, "name": "diving"}, {"id": 3,"name": "visiting ma ...