Solve The Issues With Blogger Widget After Enabling HTTPS Protocol

This one is our last post on the series about Blogger's HTTPS feature. We have already told you that how to redirect your blogger blog from HTTP to https even if JavaScript is disabled. We have also reported you some fixes by blogger team, and now, this is time for making your widgets working again that were got stopped after enabling HTTPS.

Friends, as we all know that when we add any widget from any blogger blog or other than from official blogger widgets, most of that widgets contain a <script src='.........'/> like line. This is called an external script. It fetches the script from the URL that is placed after src.

Do you know? The JavaScript or the CSSs that are hosted on another server can decrease the loading speed of your blogger blog or WordPress blog or of even a website. Another con of adding an external script is- if the host where the script is hosted doesn't have SSL certificate (you can verify it by seeing HTTPS in the starting of host's URL) then it won't get loaded if you will enable SSL certificate in your blogger blog. That's the reason because of which, many widgets had got stuck after enabling SSL certificate from your blogger blog dashboard.

How To Get Them Working?

Firstly, open notepad (or press Windows key + R and then type notepad.exe and then press enter) and then, go to Blogger > Template > Edit HTML > Ctrl + F and then type <script src and then, if you find any code related to it, cut it (Ctrl + X) and paste it into notepad (all). Similarly, search for external CSS codes, search for <link href= and then move all the related codes to the notepad file. Now, follow the steps:

• Let us suppose that you have got a code (by the method I gave your above) in notepad:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js' type='text/javascript'/>

• Now, try to open the URL between src='.....' (means this one). So, you can see that if you open:

http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js

• Then the URL shows a script. Now, if you open the following URL that is with https in its start, then also the same code gets displayed:

https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js

• So, replace such URL's HTTP to HTTPS, which are showing the same content when browsed over HTTPS and HTTP. This will fix almost 90% of the issues.

[warning headline="Carefully Check That The Same Things Are Appearing Over Both The Protocols"]You should carefully check that if you open that URL over HTTP and HTTPS, both URLs are showing same content. If there is a slight difference, then you might find some issues with some of the element of your template.[/warning]

What To Do If They Aren't Available Over Both Protocols?

In short, consider removing those widgets whom scripts or CSSs are not available over HTTPS protocol. You can quickly find that scripts by going to console (Ctrl + Shift + J on Chrome) (after opening your blog's any page) and then look for "mixed content" line. Their, there should be a URL that is creating issues or not loaded due to mixed content (mixing of HTTP and HTTPS) (the URL will only be their if you have any external script that is hosted on a host that is inaccessible over HTTPS protocol):

As you can see in the picture, the script - http://api.tweecool.com/?screenname=BloggerGuider&count=5 is creating the problem and not loaded. 

Now, you can see that the URL (in the picture) gives nothing when we browse it over HTTPS but shows the code when we browse it through HTTP. Simply, if you want to use HTTPS feature of blogger, then you will have to remove widget that runs using such external scripts.

You Can Host Some Of Them Internally Also!

As we know, www.yourjavascript.net is a free hosting service that provides you a fast hosting. But, it is not available when browsed over HTTPS protocol. In this case, with such hosts, you can open the URL and copy all the script and then, on your template, before </body>, you can add that script between <script> and </script>. But, remember that you can't do this with all the URLs (like URLs of AddThis, GetSiteControl). Simply, you can't do this if that script can be edited with any other person from another place.

Final Words

I hope you have got enough information about the topic. Well, I know that the tutorial I gave above was little bit techy, and therefore, you can ask for any help related to the topic in the comment section below. At last, if you liked the post, do share it and Thanks!

Share this post