Determine if the Facebook like button has been tapped

I am trying to determine whether a visitor has clicked the 'Like' button on my page. Here is the code I am currently using:

<fb:like href="[my_url]" layout="button_count" show_faces="false" width="20" font=""></fb:like>

I have also included the necessary script from Facebook. I know that I can utilize the following:

FB.Event.subscribe('edge.create', function(response) {
    //if the user clicks on Like
}

However, my concern is how to detect if the user has already Liked my site. I would like to avoid triggering the aforementioned event if the user has already liked the page and then attempts to like it again.

javascriptfacebook

Answer №1

Check out this link for tips on detecting if a Facebook user likes your application

FB.Event.subscribe('auth.sessionChange', function(response) {
        if(response.session){
            //checking if the user is a fan of the page
            var query = FB.Data.query( 'select page_id from page_fan where uid='+response.session.uid+' and page_id ='+PAGE_ID);
            query.wait( function(rows) {
                if(rows.length){
                    //user already likes your page
                }else{
                    //user has not yet liked the page
                }
            });
        }else{
            //user has not logged in yet
        }
    });

UPDATE:

I personally use

<iframe src="http://www.facebook.com/plugins/like.php?app_id=...&amp;send=false&amp;layout=button_count&amp;width=50&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:50px; height:21px;" allowTransparency="true"></iframe>

You can find more information about it here

This feature cannot be clicked multiple times on the same page

Answer №2

Indeed, it is feasible:

FB.login(function(response) {
  if (response.status == 'connected') {
    FB.api('me/likes/' +fb_page_id_or_fb_user_id, function(likes) {
      if (likes.data.length > 0) {
        alert('Hooray, page liked');
      }
    });
  } else {
    alert('Failed to establish connection with Facebook');
  }
}, {scope: 'user_likes'});

Answer №3

Insert the like button into a separate element and include an onclick event.

<div onclick="doSomething();">
    <fb:like href="[my_url]" layout="button_count" show_faces="false" width="20" font=""></fb:like>
</div>

Answer №4

Just wanted to share my perspective on this issue.

Personally, I came to the conclusion that achieving this is unlikely and decided to move on.

In my opinion, Facebook may have intentionally chosen not to disclose if the Like button has been clicked in order to avoid manipulation or pressure for likes.

If someone can provide a more convincing argument, I'm open to hearing it. But at present, my stance remains unchanged - no, it cannot be done.

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

Transferring JSON information from JavaScript to PHP with Ajax

Below is the JavaScript code I am working with: window.onload = function() { 'use strict'; var ajax = getXMLHttpRequestObject(); ajax.onreadystatechange = function() { if ( ajax.readyState == 4 ) { if ( (ajax.status >= 200 && ...

phpjavascriptajaxjsonpost

Rendering a page for a missing resource

Within the App.js file, the routes component is currently only wrapping a portion of the website. However, I would like the NotFound component to be rendered for the entire page if an incorrect URL is entered. Can you please provide guidance on how this ...

javascriptreactjsreact-routermaterial-ui

Trackball's controls are not responding correctly

Recently, I have been using trackball controls and I've come across a strange bug. When I pan and then zoom out from my new position, the controls start to behave erratically, pulling towards the origin (the further I pan, the worse the issue becomes) ...

javascriptcontrolsthree.jswebgltrackball

Show JSON data as choices in a dropdown menu

On my webpage, I want to display a dropdown list populated with objects from a JSON file using JavaScript. Here is the structure of my HTML and JSON: HTML <html> <body> <select id="myid">MyList</select> <script src="m ...

javascripthtmljsonhtml-select

The offsetTop property of Angular's nativeElement always returns a value of 0

I am currently working on a menu that will automatically select the current section upon scrolling. However, I am running into an issue where I am consistently getting a value of 0 for the offsetTop of the elements. The parentElement returns a value for of ...

javascriptangular

What is the best way to display HTML content inside a pop-over window?

How can I load popover content from another HTML file using templateUrl in AngularJS? Check out the demo below: HTML: <!DOCTYPE html> <html ng-app="plunker"> <head> <meta charset="utf-8"/> <title>AngularJS Plunker& ...

javascriptjqueryangularjsangularjs-directiveangularjs-scope

Positioning the comments box on Facebook platform allows users to

Need assistance, I recently integrated the Facebook comments box into my Arabic website, but I am facing an issue where the position of the box keeps moving to the left. Here is an example of my website: Could someone please suggest a solution to fix the ...

javascriptcssfacebookfacebook-comments

The search box in Datatables is experiencing a glitch where it does not register any

Snippet to initialize datatable: jQuery('#table1').dataTable({ "scrollY": "200px", "scrollCollapse": true, "paging": false, "aaSorting": [], "oSearch": { "bSmart": false } }); The filter works perfectly when the table is first i ...

javascriptjquerydatatabledatatables

Different from Local system, the code refuses to work when deployed on the server

I have implemented a basic form where onSubmit it collects the values and passes them to a JavaScript page (via an AJAX call), then sends the data to add.php and returns the result back to the HTML page. The code functions correctly on my local system, but ...

javascriptphpjqueryhtmlajax

The method of reading a unique array of objects for each radio button

Currently, I am facing an issue when trying to retrieve unique elements for each radio button from the database. The data structure and information obtained from the database are as follows: { FormularID: 182, CampaignID: 14, FormLabel: & ...

javascriptarraysnode.jsobjectejs

Spin artwork on a canvas

I've been tasked with a simple project - drawing one rectangle, rotating and duplicating it, and then creating a copy of its rotated version. Here's my attempt: var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); //1. Rot ...

javascripthtmlcanvas

What steps can be taken to avoid children components from re-rendering every time the parent component's state or props change

I am currently working on a tree component structured like this: <UserOrderApproval> <Table> <TableRow> <ComponentList /> </ChildrenProps1> </Parent> </UserOrderApproval> Currently, I am retrie ...

javascriptreactjsreduxreact-reduxreact-lifecycle

Passing values from Node.js asynchronous functions

I am facing an issue with my code. I am trying to retrieve the value stored in the _status variable after executing a query and writing a file using MongoClient.connect. However, when I try to return _status, it returns as NULL. Can anyone suggest how I ...

javascriptnode.jsasynchronouscallback

Utilizing the setInterval function within the componentDidMount lifecycle method in React

I am facing a challenge in updating the state of a React component every 1000 ms. I attempted to use setInterval in the componentDidMount method, but encountered issues. Currently, when I log the results, I see an empty state object in the constructor and ...

javascriptreactjs

Using ExpressJS and Jade to submit a form using the POST method and redirecting to a specified path

I am exploring node, express and jade for the first time and working on a small application that requires users to enter their name and password in a form. The app then redirects them to a path based on their username. Here is the code snippet to achieve ...

javascripthtmlweb-applicationsnode.jsexpress

An error has occurred: Unable to access the 'map' property of undefined in Angular 4

I'm looking to integrate chart.js into my Angular 4 project. The plan is to retrieve data from a JSON file and display it on a graph. Everything seemed fine during compilation, but upon opening it in Chrome, I encountered an error stating "cannot read ...

javascriptangulartypescript

FOUC: Website first displayed without any design elements

My goal is to implement global styles in a Next.js app by importing `.scss` files into `_app.js`. Unfortunately, I am facing an issue where the styles are not being applied on page load, resulting in FOUC (Flash of Unstyled Content) for the initial page r ...

javascriptreactjssassnext.jsfouc

JavaScript Calendar and Clock Selector

I've been scouring every corner of the internet, but I can't seem to locate what I'm after. My quest is for a basic Date and time picker along with a standalone time picker that harnesses the power of JavaScript. My webpage is built using ...

javascripthtmldatetimetimedatepicker

Maintaining String Integrity in JQuery when Adding Elements to the DOM

I am currently working on dynamically adding elements to the DOM in order to display a list of search results. Here is a snippet of the code I am using: for(var i=0; i<length; i++){ console.log(temp[i].CATEGORY); console.log(temp[i].SUBCATEGORY ...

javascriptjquery

Retrieve information from the selected row within a table by pressing the Enter key

I have a search box that dynamically populates a table. I am using arrow keys to navigate through the rows in the table. When I press the enter key, I want to retrieve the data from the selected row. For example, in the code snippet below, I am trying to ...

javascripthtmljquerycss