How to make TripAdvisor Widget work on HTTPS

Recently, while working with a client, I faced an issue related to TripAdvisor review widget. The issue was the widget was not being rendered on the webpage with secure (HTTPS) url. The widget was loading Javascript from non-secure (HTTP) url and the webpage was blocking that content being requested from a non-secure url.

After going through TripAdvisor support forums, it became clear that they had no solution for this, as the request to fix this bug had gone unanswered and related post had been closed. It was time for brainstorming 🙂

Have a look at their widget:

<div id="TA_ssnarrowcollectreview339" class="TA_ssnarrowcollectreview">
<ul id="qt8r6ky" class="TA_links wvFoTJq">
<li id="aEQCghjce" class="8al3DtAX">
<a target="_blank" href="http://www.tripadvisor.com/"><img src="https://www.tripadvisor.com/img/cdsi/img2/branding/150_logo-16124-2.png" alt="TripAdvisor"/></a>
</li>
</ul>
</div><script src="http://www.jscache.com/wejs?wtype=ssnarrowcollectreview&uniq=459&locationId=4984311&lang=en_US&border=true&display_version=2"></script> 

The widget loads Javascript from url http://www.jscache.com/wejs?wtype=ssnarrowcollectreview&uniq=459&locationId=4984311&lang=en_US&border=true&display_version=2

This request generates a dynamic Javascript code which is as below:

document.write('<script src="http://www.tripadvisor.com/WidgetEmbed-ssnarrowcollectreview?uniq=339&locationId=4744311&border=true&lang=en_US&display_version=2"></script>');

You can see, it loads another Javascript in the widget, with the source url beginning from HTTP which is a red flag for secure (HTTPS) webpage. This was the issue which was preventing the widget from being rendered.

I replaced the Javascript in the original widget code with following:

<script src="https://www.tripadvisor.com/WidgetEmbed-ssnarrowcollectreview?uniq=339&locationId=4744311&border=true&lang=en_US&display_version=2"></script>

Note the HTTP had been replaced with HTTPS in the “src” attribute of above script. So the final widget code became:

<div id="TA_ssnarrowcollectreview339" class="TA_ssnarrowcollectreview">
<ul id="qt8r6ky" class="TA_links wvFoTJq">
<li id="aEQCghjce" class="8al3DtAX">
<a target="_blank" href="http://www.tripadvisor.com/"><img src="https://www.tripadvisor.com/img/cdsi/img2/branding/150_logo-16124-2.png" alt="TripAdvisor"/></a>
</li>
</ul>
</div>
<script src="https://www.tripadvisor.com/WidgetEmbed-ssnarrowcollectreview?uniq=339&locationId=4744311&border=true&lang=en_US&display_version=2"></script> 

Source url of the TripAdvisor logo image had also been changed to secure one (HTTPS) in the above code. This code rendered the widget successfully on secure (HTTPS) webpage.

Phew!! Wasn’t that tricky? What do you think?

Advertisements

14 comments

  1. I am having the same problem, but because I am not a code writer I am having problems understanding how to correct my code. I have been strugggling with this for months.

    If I send you my code, is it possible to help me correct it for https?

    From what I can discern, I only have to change http to https in two places?
    Do I need to remove the “wejs?…” statement shown above in red?

    Thank you

  2. Useful info, thanks!

    Just to add, for those running “mixed-protocol” sites (where only select pages are HTTPS), it’s possible to omit the “https:” prefix and start the link at the double-slash, e.g.

    //www.tripadvisor.com/blahblah

    This way the link will request the URL in whichever scheme the referring page was served under.

  3. Thank you very much! I’ve searched this information about 3 hours 🙂
    Really useful and helpful.

    I am using Enfold Theme and using SSL certificate, so before I fixed it I had only bullet-point before Tripadvisor logo.

  4. Hi Champ – this looks really simple! And – I think Tripadvisor has finally started to generate their code with the “S” but I just upgraded to SSL, and have a broken widget now – just showing the TA logo directing to TA root URL.

    Here’s the code the widget generates;

    https://www.jscache.com/wejs?wtype=cdsratingsonlynarrow&uniq=580&locationId=1146548&lang=en_CA&border=false&display_version=2

    Any ideas? Sorry to be a bother, but I posted on Stackoverflow too, and they referred me back to your post 😉

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s