The loading time for the Facebook Share connect js seems to be dragging on

I've been using this code snippet:

function loadFacebook()
{
    var app_id = $('meta[property="fb:app_id"]').attr("content");
    $.ajax( {
        type: 'GET',
        url: '//connect.facebook.net/it_IT/all.js',
        timeout: 2000,
        dataType: 'script',
        cache: true,
        success:
            function() {
                FB.init({ appId: app_id, status: true, cookie: true, xfbml: true });
            }
        });
    var pathname = $(location).attr('href');
    $('#facebook-sharing').append('<div class="fb-share-button" data-href="'+pathname+'" data-width="140" data-type="button_count"></div>');
}

The caching doesn't seem to work and the page loading is extremely slow which is not the case for other websites I've seen.

Despite looking at similar questions, I haven't found a solution to my issue. Any help would be greatly appreciated. Thank you.

Answer №1

One approach you can try is using the getScript() method. This method operates asynchronously, allowing you to include an anonymous callback function where you can initialize your SDK code as needed.

$(document).ready(function() {
  $.ajaxSetup({ cache: true });
  $.getScript('//connect.facebook.net/en_UK/all.js', function(){
    FB.init({
      appId: 'YOUR_APP_ID',
    });     
    $('#loginbutton,#feedbutton').removeAttr('disabled');
    FB.getLoginStatus(updateStatusCallback);
  });
});

Reference: Incorporating Facebook SDK with jQuery.

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

Tips for dynamically populating JSON data using a dropdown selection?

I am currently exploring HTML forms as a new web developer. I have been experimenting with displaying JSON data in a div based on a selection from a dropdown menu using jQuery in Chrome. However, my code does not seem to be functioning properly. Even tho ...

Enhancing a node.js application with express()

I am currently utilizing Express MVC with node.js. The primary object I am working with is express(), which is assigned to an alias called app: var express = require('express'); app = express(); Is there a way for me to expand the functionali ...

Is it possible to implement sandboxing for Node.js modules?

I've been diving into the world of Node.js and I have this exciting idea to create a cutting-edge MUD (online text-based game) using it. Traditionally, MUD games have predefined commands, skills, and spells that players can use to navigate through var ...

Asynchronous Database Operations in Javascript

Being new to AWS databases, Node.JS, and Express, I am facing the challenge of making multiple queries to an AWS DynamoDB database while summing all device_id counts and looping through all the bins. Although my code is incomplete in terms of query paramet ...

The performance of dom-repeat may be impacted when dealing with sizable objects, such as those containing base64 encoded images

Currently, I am encountering an issue while generating a dom-repeat using a list of objects. Each object in the list has an imgUrl key containing a large base64 encoded image. However, when I generate the dom-repeat in this manner, each item appears undef ...

Steps to display all loop iterations from forEach in HTML

I want to display the results of my forEach loop as a list in HTML, showcasing each item one by one: object = { food1 : [potato, tomato, carrot] } object[food1].forEach(function (item){ var text = ""; text += item; $("#ulelement").html("<l ...

Is there a way to store an SQL query within a variable and then expand upon it?

While experimenting with potential SQL injections on my database, I've encountered an issue where a simple function returns results that a user should not have access to. The return value seems to be correct based on the id, but the rest of the query ...

Get data from a JSON file using JavaScript

Dealing with a rather intricate and detailed JSON structure, I have a specific extraction task at hand. The goal is to retrieve information (text) from the JSON only if the resource-id includes the text "com.shazam.android:id/" and certain prope ...

Integrating objects into the <select> element through the combination of C#, JavaScript, and HTML connected to a SQL

Can someone assist me in resolving this issue? I am trying to populate an HTML element with database fields using C# and JavaScript, but so far my code is not producing any output. I have also attempted to include a button that calls the "loadGrp" function ...

Adding a class to radio buttons and checkboxes in Angular when they are checked or selected without needing to trigger a change event

I am looking to implement ngClass based on whether an item is checked or not. Essentially, I want the user to visually see which items are selected through radio buttons or check-boxes by adding a class to them, allowing me to apply different CSS styles to ...

Can you provide instructions on how to use JavaScript to click and hold a button for a specific duration?

Is it possible to use jQuery to create a button that, when guest button number 1 is clicked, will automatically click and hold down button number 2 for about 3 seconds? I have tried using the mousedown() and click(), but they only register a click, not a ...

The browser's window.location.href fails to redirect the page

Here are my functions: <a onClick="check_claims(this)" type="button" href="javascript:void(0)" redirurl="www.facebook.com" >Invite</a> function check_claims(ele){ var select_claims = document.getE ...

Filtering data with AngularJS upon user clicks

Encountering a perplexing issue at the moment. I have created buttons using ng-repeat and my intention is for them to filter my list when clicked on. However, I am facing an issue where the list fails to filter upon clicking. Here are the buttons: <div ...

Is Chrome launching a list of links in separate windows instead of tabs?

As I create a customized start page for myself, I've encountered a challenge. I want to include a link above all sections that, when clicked, will open all pages in a new tab. However, I'm facing an issue where only the first link opens in a new ...

Tips for concealing an entire row of a table with Jquery

I am currently working on a system that involves a table with anchor tags named original and copy in each row. By clicking on these anchor tags, we are able to update the database whether the item is an original or a copy using ajax. However, I am facing a ...

Transferring Information from Vue to PHP: What You Need to Know

I need assistance with passing data from Vue to PHP. Currently, I receive a JSON object through a PHP query that looks like this: <?php echo getBhQuery('search','JobOrder','isOpen:true','id,title,categories,dateAdded, ...

Use ag-Grid to customize your column headers with checkboxes, allowing you to easily select or deselect all items in that column. This feature is not limited to

In my experience with ag-grid, I often find myself needing to customize the first column header to include a checkbox. This allows me to easily perform actions such as selecting all or deselecting all rows in the grid. It's important to note that this ...

Executing a function after the completion of another

Here is my function: function functionName($results) { //do some stuff disableSave() } When this function runs, I want to call the enableSave() function. How can I achieve this? I attempted to pass the function as a callback but I am unsure wher ...

Having trouble accessing data beyond the login page using Node/Express

Currently in an unusual situation. I am developing a backend and frontend that connects to a third-party RESTFUL API managing some hardware. The third-party API is hosted on your local system as a webserver, meaning HTTP requests are directed to "localhost ...

How can you prevent "hits" from being displayed on the screen until the searchBox is utilized in React InstantSearch?

I am currently implementing React InstantSearch in Algolia and I am trying to configure it to hide the "hits" component by default, only displaying it when the searchBox is clicked. My initial research led me here: Although I was able to implement the qu ...