The Facebook like button seems to be missing from the webpage

Hi everyone, I'm having trouble getting the like button code to work. I used the wizard on Facebook but the button still isn't showing up, even with a simple HTML setup like this:

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div id="fb-root"></div>
<script>(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/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-like" data-href="https://facebook.com/jameshenrypcsolutions" data-width="125" data-height="40" data-colorscheme="light" data-layout="button_count" data-action="like" data-show-faces="false" data-send="false"></div>

Does anyone have any idea why the button is not appearing? This code was directly copied from the wizard and there is nothing else in the body, yet it still doesn't seem to be working...

Answer №1

CLICK HERE FOR LIVE DEMO

<div class="fb-like" data-href="https://facebook.com/jameshenrypcsolutions" data-width="Adjust to desired width" data-height="Adjust to desired height" data-colorscheme="light" data-layout="standard" data-action="like" data-show-faces="true" data-send="false"></div>

<div id="fb-root"></div>
<script>(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/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

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

How can I adjust a centered container div to fit properly on a mobile device

Exploring the centering of a particular div: #container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 550px; width: auto; background: rgba(28, 28, 54, 0.70); padding: 15px; border: 1px solid #1c ...

CSS - Issue with aligning image captions

I created an HTML snippet that has the following structure: <div class="large-4 columns"> <div class="promo-box"> <a href="#"> <img src="/our-projec ...

Mixin for conditional input styles in Sass

I am interested in developing a conditional sass class that can be customized based on an argument provided. I am unsure about the terminology for this feature. For instance: <img class="width-200" .../> I would like to create a sass mixin that tak ...

Adding images to HTML using JavaScript below existing images

I'm currently working on a JavaScript game and I want to implement a feature where my character can move under blocks (isometric PNG images) instead of just sliding through them. Is there a way to dynamically adjust my character's position in the ...

Tips for disabling scrolling on a <div> using another <div> as a lock

I am facing an issue with a page where a div is appended to the body of an HTML. The problem is that there are two scrolls appearing - one on the new overlaying div and another behind it. Here is an approximate structure of the page, how can I ensure that ...

The color of the ellipsis value does not match properly

In my table, I have lines that end with 3 dots '...' when the text overflows. To achieve this, I used the ellipsis value of the text-overflow property. While this works well and the '...' are displayed when resizing the window, I encoun ...

Best practice for encapsulating property expressions in Angular templates

Repeating expression In my Angular 6 component template, I have the a && (b || c) expression repeated 3 times. I am looking for a way to abstract it instead of duplicating the code. parent.component.html <component [prop1]="1" [prop2]="a ...

Variation in `th` & `td` Width in Table

Is it possible to have different widths for th and td, such as 50px for th and 500px for td? To address this issue, I am utilizing datatable. To enable others to help me, here is a simple code snippet: .abc { width: 500px; } .def { width: 50px; } ...

Creating Sleek Rounded Corners with Pure CSS in Older Versions of Internet Explorer (Compatible with jQuery)

Looking for a seamless solution to render rounded corners on browsers that do not support CSS3 without the delay typically seen with JQuery plugins. The use of .htc files with www.css3pie.com seems like the best option so far, but there is still a delay c ...

What are the implications of using :root along with the universal selector in CSS to overwrite Bootstrap variables?

As I work on theming my website, which utilizes Bootstrap, I am making adjustments to the Bootstrap variables. Some variables are defined against the :root element in a way that allows me to easily override them: :root { --bs-body-color: red; } Howeve ...

Is there a way to showcase a block of Python code using a combination of HTML, CSS, and Javascript to enhance its

On my website, I want to display code blocks similar to how StackOverflow does it. The code block should be properly colored, formatted, and spaced out for better readability. All the code blocks on my site will be in python. def func(A): result = 0 ...

Simple method to restrict duration of video uploads using HTML5's capture attribute

I'm working on a website that allows users to take photos and videos with their smartphones. Everything is running smoothly with HTML5 and some javascript, but I want to set a maximum time limit for the videos without requiring users to start recordin ...

PHP script to populate a table with images based on certain conditions

I have a table in HTML that displays results from a SQL database on the right hand side. The code snippet for populating each cell is as shown below: <tr> <td>House</td> <td><?php echo $row_buyerdetails['tod_hous ...

Managing both clicking and hovering events on a single element, ensuring that the popup modal remains open as long as it is being hovered over

After successfully implementing click and hover functionality on an element, I was able to position the popup relative to the mouse pointer based on a previous solution. However, I am now facing an issue where I want the popup modal to be fixed in a specif ...

Looking to display the ng-option in two lines within Angular 6?

How can I display data in a select dropdown with two lines for each option? I am currently using ng-select. <ng-select [(ngModel)]="selectedData" placeholder="Select Data"> <div *ngFor="let data of Data"> <ng-option [value]="da ...

Bootstrap columns are still disrupted by large images even when they have reached their maximum width and height

I have been using bootstrap templates that allow users to create displays with images and text. I previously added max-width:100% and height:auto to the img CSS, thinking it would resolve issues with large images breaking the container. However, when inse ...

Integrating jQuery Tooltip with Mouseover Event

I'm currently involved in creating a map of MIT projects for an architectural firm, and facing the challenge of maintaining the red dots mouseover state even when the mouse hovers over the tooltips that appear. Presently, the mouseover effect turns of ...

Designing the KendoUI combo box with a touch of style

Is there a way to customize the style of required and invalid fields for KendoUI elements, such as changing the background color of a required input field? I have been using the following styles: .k-textbox>input[required], .k-picker-wrap .k-input[re ...

"Performs smoothly in Postman, but doesn't function as effectively in

I have a requirement to showcase a dynamically generated variable from views.py in my login.html. The username (voucher) is being generated in views.py and I need it to be automatically populated in my login.html. Please note that the mpesa_body contains d ...

Step-by-step guide on generating a fluid list with Express and HTML

Looking to create a dynamic list by fetching data from a JSON file. I want the list items to redirect me to specific content based on their IDs when clicked. However, my current approach is not working as expected, and the list needs to be truly dynamic. ...