Blogspot : How to Add JavaScript Code in Blogger Blog?

In this article I will tell you how you can correctly add JavaScript code in your Blogger Blog. I am getting so many request from my users about how they can use my jquery plugins(shareit.js, jumboShare, whatsapp share button) in their blog and I found that they are facing problem while adding JavaScript Code in their blog.

While adding JavaScript Code in your blog, you may be getting an error like “Error parsing XML, line 268, column 20: The content of elements must consist of well-formed character data or markup. These sorts of error occurs when the JavaScript code is not well formed, or there are some error in the code syntax.

This tutorial will help all those bloggers who have just started learning Blog Template and Plugin Development. If you are one of them, then this tutorial is for you and you can learn how to add JavaScript code in Blogger blog.

Before:

When you are adding your code in your blogger blog you should be adding it like :

<script type="text/javascript">
$(document).ready(function() {
    $(document).on("click", '.mct_whatsapp_btn', function() {
        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
            var text = $(this).attr("data-text");
            var url = $(this).attr("data-link");
            var message = encodeURIComponent(text) + " - " + encodeURIComponent(url);
            var whatsapp_url = "whatsapp://send?text=" + message;
            window.location.href = whatsapp_url;
        } else {
            alert("Please use an Mobile Device to Share this Article");
        }
    });
});
</script>

The above is to add the WhatsApp Share button in your blog.This is how we add JavaScript code in our website or page other than Blogger Blogs. But this code will not work in your blogspot blog.

How you will turn this code in a working code for blogger blog?

After

The Answer is simple.Just add the code like this:

<script type="text/javascript">
//<![CDATA[ 

//Your JavaScript Code Goes Here

//]]>
</script>

So the Corrected code will look like:

<script type="text/javascript">
//<![CDATA[

$(document).ready(function() {
    $(document).on("click", '.mct_whatsapp_btn', function() {
        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
            var text = $(this).attr("data-text");
            var url = $(this).attr("data-link");
            var message = encodeURIComponent(text) + " - " + encodeURIComponent(url);
            var whatsapp_url = "whatsapp://send?text=" + message;
            window.location.href = whatsapp_url;
        } else {
            alert("Please use an Mobile Device to Share this Article");
        }
    });
});

//]]>
</script>

Now the above code will work perfectly in your blogger blog.

http://youtu.be/pWFaVZBnCbw

Where to Add the Correct JavaScript code in Blogger Blog?

Now after making the JavaScript code usable, this question may be coming in your mind that Where to add this corrected JavaScript code?.

Follow the Below Methods:

Step 1: Sign in to Blogger.

Step 2: Select the blog to update.

Step 3: In the left menu, select Template.

Step 4: Under Live on Blog, click Edit HTML.

Step 5: Now paste your Corrected JavaScript code before </head>

Correct Place to add JavaScript Code in Blogger Blog

Note: You can also add the corrected JavaScript Code before </body> tag or inside your post.
You can ask your question in the comments or the community.

Shubham Kumar

Hey, I am Shubham and i love Blogging, Coding and exploring new things and obviously sharing my experience with you.

You may also like...

5 Responses

  1. sravya says:

    is it possible to add javascript in single page or post. i dont want it as common for all pages . could you please help me

  2. Shiwam says:

    Great Information you provided Shubham but unfortunately I left blogger a long time ago and started using wordpress just because I found too much difficulties understanding that . Also wordpress have more feature than blogger and several plugin that made the blogging easy . This post will really help blogger who are still using that .

  3. Thanks for sharing. I am not in need of these code right now but I know that in the future I may bump into the same question.

Leave a Reply

Your email address will not be published. Required fields are marked *