Skip to main content

Dynamic Facebook like button for your web articles | Code once and go viral on Facebook








Facebook allows its users to like web articles using their Facebook profiles and developers to configure a like button to put with their articles. 

But you have to go to the Facebook developer page and paste your article's URL and copy the code given by the Facebook developer tools.

It is not comfortable to copy-paste the code whenever you are writing or posting new articles. so javascript has the solution.

Just follow these simple steps.

You have to load Facebook SDK for Javascript once in your source code by adding this code between <body> </body> tags.

  <div id="fb-root"></div>
  <script async defer crossorigin="anonymous" 
        src="https://connect.facebook.net/en_US/sdk.js#xfbml=1
             &version={graph-api-version}
             &appId={your-facebook-app-id}
             &autoLogAppEvents=1" 
        nonce="FOKrbAYI">
  </script>
Then we have to put the code of like button

  <!-- Your like button code -->
  <div class="fb-like" 
       data-href="#" 
       data-width=""
       data-layout="standard" 
       data-action="like" 
       data-size="small"  
       data-share="true">
  </div>
The attribute data-href= says what is the URL of the article we like and we going to change it dynamically using Javascript.

<script>
    var x = getElementByClassName('fb-like');
    x.data-href = document.location.href;
 </script>

that's all .

our script gets the element with the class name 'fb-like'  and set its data-href to our article's URL
document.location.href returns you the URL of the current page.

Thank You for reading and don't forget to use the comment section below to express your thoughts.


.



Labels:

Comments

Post a Comment

Trending Now

Let's talk about cryptography.

Have you ever heard of cryptography?  People write their diaries every day. For many of them, their diary is one of their best friends to whom they tell their every secret. What happens when someone else finds such a diary? That would freak out the dairy's owner for sure. Also, it might put their lives in danger. Wise men always hide their diaries so no one else finds it.  But legends hide their message so that only they can read what they wrote. So even if the diary is found by someone else, they cannot know the secrets. for example, I wrote this in my diary today.   P dyval h isvn wvza hivba jyfwavnyhwof avkhf Can you understand it? This is just a very primitive level of cryptography yet powerful enough to hide what I wrote from 90% of people. I will discuss this type of cryptography in the next blog post. The human used cryptography from the very beginning to share their messages in secret and conceal their inventions. As you may know, many people tried to find a recip...
Post a Comment
Read more

How to make a your own Discord bot with Python in 2023. #01

I'm sure that you have heard of discord bots way before reading this article. But have you ever tried to make your own bot with Python? If not, this is the time. Let's get started. Over time tons of discord bot tutorials have been published, but if you follow them they don't help you to build a functional bot because many of the packages used in them are updated and no longer support older syntaxes. Here is the full guide to creating your own Discord Bot in 2023 with Python. STEP 1: Create a Discord account First of all, we have to set up a developer account to create the bot. Actually, you can use your ordinary discord account to access the discord developer portal, but it is highly recommended to create a separate account for development purposes. You can create a new discord account with this link:  https://discord.com/register STEP 2: Create a new Application After creating the discord account, you have to go to the discord developer portal and sign in with your newly-c...
Post a Comment
Read more