Contact

How do I add a Facebook share button to my website

Hello guys, in this post, I'm going to tell you the best possible way through which you can implement the Facebook share button or link on your website so that your users can share the post, page, or article available on your website.

For a practical point of view, let me create a web page first. So I created a simple web page using the following HTML code:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>How do I add a Facebook share button to my website?</title>
   </head>
   <body>
   
   <div class="container">
      <h1>How do I add a Facebook share button to my website?</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, quod.</p>
   </div>

   </body>
</html>

Now I just created a simple web page titled "How do I add a Facebook share button to my website?" Now I can implement the Facebook share button on this newly created web page.

So to add the Facebook share button, what I need to do first is decide where I need to put the Facebook share button on my website. Let's suppose I need to add the Facebook share button below a "DIV" whose class name is "container." Consider the following snapshot as an example of the placement where I need to put my Facebook button link.

Facebook share button placement

Above the red box, I have the content inside the "DIV" with the class name "container." Now you can create an "HR" tag to create a horizontal line, then create a "DIV" with a class name something like "facebookShare" and put the share button inside this DIV. Here is the code you need to use where you want to add or place a Facebook share button.

<div class="facebookButton">
   <a href="https://www.facebook.com/sharer/sharer.php?u=https://goshlike.com" id="fshare" target="_blank">Share on Facebook</a>
</div>

Still, I have not done it. You need to use the JavaScript code to replace the value of the "u" parameter after the "https://www.facebook.com/sharer/sharer.php?" to get the current URL of the web page, so that the user only shares the current page that he or she is viewing. Because if we do not replace the value of the "u" parameter from the above code, then every time the user clicks on the Facebook share button, they will be going to share "goshlike.com," the home page of the website. You have to replace "goshlike.com" with your domain.

So, after the Facebook share button, paste the JavaScript code below into your website.

<script>
var cu = window.location.href;
var hv = "https://www.facebook.com/sharer/sharer.php?u=" + cu;
document.getElementById('fshare').href = hv;
</script>

In the above code, what I have done is create a JavaScript variable "cu" and initialize the current URL of the website to it. Then I created another JavaScript variable to bind the Facebook share link along with the current URL. Therefore, let's suppose if the URL is "https://goshlike.com/celebrities/female-celebrities," then the variable "hv" will hold the following value after executing the first two JavaScript statements from the above code fragments:

hv = "https://www.facebook.com/sharer/sharer.php?u=https://goshlike.com/celebrities/female-celebrities";

Note: Be sure to put the above JavaScript code fragment after the Facebook share button.

You can also add the "Facebook button" instead of the text. For this, you can use the "font-awesome" icons from "Cloudflare." Following is the complete version of the code that shows you how to implement the Facebook share button on your website.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>How do I add a Facebook share button to my website?</title>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   <style>
      .facebookButton {
         max-width: 100px;
         margin: 20px auto;
      }

      .fa-facebook {
         font-size: 24px;
         text-decoration: none;
         padding: 12px 16px;
         border-radius: 5px;
         background: #3B5998;
         color: #fff;
      }
   </style>
</head>
<body>

<h1>How do I add a Facebook share button to my website?</h1>
<div class="container">
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, quod.</p>
</div>

<hr>
   
<div class="facebookButton">
   <a href="https://www.facebook.com/sharer/sharer.php?u=https://goshlike.com" id="fshare" class="fa fa-facebook" target="_blank"></a>
</div>

<script>
   var cu = window.location.href;
   var hv = "https://www.facebook.com/sharer/sharer.php?u=" + cu;
   document.getElementById('fshare').href = hv;
</script>

</body>
</html>

The output of the above HTML, CSS, and JavaScript code to implement or add the Facebook share button into your website for free, and of course without any plugins at all, just the simple code to do the job, is shown in the screenshot below.

add Facebook share button to website

You can also fix the position of the the Facebook share button into your website. To fix the position of the Facebook share button into your website, use or simply add the following CSS code in the above:

.facebookButton {
   position: fixed;
   bottom: 0;
   right: 0;

After using the above CSS code, your Facebook share button will stick to the bottom right corner of your website.

Other changes are still possible, but because they will be based on your mood and design preferences, I'm closing the discussion on this topic right now because everything is discussed.

Summary

So the summary of this post regarding the implementation of a Facebook share button on your website without any plugin is:



Sharing is stylish! Gift your friends this awesome read!