Javatpoint Logo
Javatpoint Logo

How to add Like button in HTML and CSS

In this article, we will learn how to add like button with the help of HTML and CSS. We will explain this article using various examples with the help of libraries, codes, etc.

HTML

HTML stands for Hypertext Markup language.HTML is the most widely used markup language, and to mark up the contents on the web page, we use various commands called tags. Each HTML tag specifies some action that the browser should display as the text on the web page. HTML is the standard language for building and designing of web pages. The latest version of HTML is HTML5.

CSS

CSS stands for Cascading style sheet. CSS was developed in 1997 by World Wide Web Consortium (W3C) to create a consistent approach for providing style information for web pages. It is a presentation definition language supported by all browsers. The term cascading refers how the styles are applied if conflicting style rules appear on the web page. It gives website designers greater control over the presentation of an HTML page as they can use styles to various elements of a web page like lists, borders, margins, tables, etc.

CSS stands for Cascading style sheet. The cascading style sheet is a powerful way of controlling a web document's layout by adding styles to it. Cascading style sheet separates the form's content from the form's presentation, which improves the accessibility of content and provides more flexibility. Through this separation, one can make global changes to all documents from a single location, which reduces complexity.

There are four types of Cascading style sheet:

Create Like button using HTML and CSS

Example1:

Output:

The output of this example is given below:

How to add Like button in HTML and CSS

In the above output, we can see a Facebook like button, and when we click on it, the next page shows where we like the page. The output of the web page is shown below:

How to add Like button in HTML and CSS

Facebook developer kit for adding like button in HTML

Like Button, HTML5 Attributes: Using the HTML 5 attribute, you can change a like button's default properties.

HTML5 Attribute Description
data-action It can be either like (default) or recommended.
data-color scheme The color scheme is used for any text outside of the button itself. It can be light (default) or dark.
data-href It contains the URL of the webpage.
data-layout Selects one of the different layouts that are available for the plugin. It can be one of default, button_count, button, or box_count.
data-share It specifies whether to include a share button beside the Like button, true or false (default).
data-size The button is offered in 2 sizes i.e., large and small (default).

Example 1:

Output:

The output of this example is given below:

How to add Like button in HTML and CSS

Example 2:

Output:

The output of this example is given below:

How to add Like button in HTML and CSS

HTML code for heart symbol

We can also use the heart symbol as a like button in our websites and applications. In HTML, we can use multiple codes for heart symbols. With the use of these HTML code, we can create various designs for heart symbols used as a like button for websites and applications.

Symbol Name code Decimal code Hex code Description
♥ ♥ ♥ heart symbol
❤ ❤ heart symbol
❥ ❥ heart symbol

Let's take an example to create like button as heart code.

Example 1:

Output:

The output of this example is given below:

How to add Like button in HTML and CSS

Create Like button using library in HTML and CSS:

In HTML and CSS, we can use external "Font Awesome Icons library" to create like button for websites and applications. We can include this library in, <head> section of HTML with <link> tag.

Syntax:

Example:

In above example:

The rel attribute is used to specify the relation between the documents containing the <link> tag and the document containing styles. The value used for rel attribute is "stylesheet".

The href attribute is used to specify the URL for the document being linked to. The value of the href attribute is the URL of the external style sheet containing CSS rules. The URL can have either absolute path or relative path.

For example: "https://cdnjs.cloudflare.com/ajax/libs/fontawesome/4.7.0/css/font-awesome.min.css"

Let's takes some example using Font Awesome Icons library to create like button.

Example 1:

Output:

How to add Like button in HTML and CSS

Example 2:

Output:

Following is the output of the given example:

How to add Like button in HTML and CSS

Like/dislike button using HTML and CSS

Example:

Output: The output of above program is given below

To like the page, we can click on the button given below:

How to add Like button in HTML and CSS

To dislike the page, we can click on button the given below:

How to add Like button in HTML and CSS




Youtube For Videos Join Our Youtube Channel: Join Now

Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA