Yelp 5 star reviews badge to open in new window

Question

I can't figure out how to add the target="_blank" attribute to the 5 star rating badge.

This is what I've inserted into webpage...coming from yelp. I added the last line to the script to try and add attribute but it wont accept. I can, however get it to accept on the div before as well as the img after just not on the anchor tag.

<div class="localsocialyelpreviews"><div id="yelp-biz-badge-fsc-N6ciVLIYpasN2FWN3Nxy9Q">Gina's Pizza & Pastaria</div><script type="text/javascript">
!function(doc, id){
  var js;
  var scriptElement = doc.getElementsByTagName("script")[0];
  if (!doc.getElementById(id)) {
    js = doc.createElement("script");
    js.id = id;
    js.src = "//dyn.yelpcdn.com/biz_badge_js/fsc/N6ciVLIYpasN2FWN3Nxy9Q.js";
    scriptElement.parentNode.insertBefore(js, scriptElement);
  }
} (document, "yelp-biz-badge-script-fsc-N6ciVLIYpasN2FWN3Nxy9Q");
$("div#yelp-biz-badge-fsc-N6ciVLIYpasN2FWN3Nxy9Q > a").attr("target","_blank");</script></div>

This is what ends up happening. NO TARGET ATTRIBUTE :/

<div class="localsocialyelpreviews">
<div id="yelp-biz-badge-fsc-N6ciVLIYpasN2FWN3Nxy9Q"><a href="http://www.yelp.com/biz/ginas-pizza-and-pastaria-corona-del-mar"><img width="125" height="55" src="http://dyn.yelpcdn.com/extimg/fsc/N6ciVLIYpasN2FWN3Nxy9Q.png" alt="Gina's Pizza &amp; Pastaria"></a></div>
<p><script type="text/javascript">
!function(doc, id){
  var js;
  var scriptElement = doc.getElementsByTagName("script")[0];
  if (!doc.getElementById(id)) {
    js = doc.createElement("script");
    js.id = id;
    js.src = "//dyn.yelpcdn.com/biz_badge_js/fsc/N6ciVLIYpasN2FWN3Nxy9Q.js";
    scriptElement.parentNode.insertBefore(js, scriptElement);
  }
} (document, "yelp-biz-badge-script-fsc-N6ciVLIYpasN2FWN3Nxy9Q");
$("div#yelp-biz-badge-fsc-N6ciVLIYpasN2FWN3Nxy9Q &gt; a").attr("target","_blank");</script></p></div>

I appreciate any insight.. I've tried this many different ways and searched for the solution to this in yelp and stackoverflow but cannot find the answer. Thanks

Answer 1

Modify the script provided by yelp to set the target='_blank' attribute once the script has loaded. Add this (be sure to insert YOUR YELP CODE):

g.onload = function() {
    document.querySelector('#yelp-biz-badge-YOUR-YELP-CODE a').setAttribute('target', '_blank');
}

See below:

<div id="yelp-biz-badge-YOUR-YELP-CODE">
    <a href="http://yelp.com/biz/YOUR-YELP-URL?utm_medium=badge_star_rating_reviews&amp;utm_source=biz_review_badge" target="_blank">
    Check out my biz on Yelp
    </a>
</div>
<script>(function(d, t) {
    var g = d.createElement(t);
    var s = d.getElementsByTagName(t)[0];
    g.id = "yelp-biz-badge-YOUR-YELP-CODE";
    g.src = "//yelp.com/biz_badge_js/en_US/YOUR-YELP-CODE.js";
    s.parentNode.insertBefore(g, s);

    g.onload = function() {
        document.querySelector('#yelp-biz-badge-YOUR-YELP-CODE a').setAttribute('target', '_blank');
    }

}(document, 'script'));
</script>

Answer 2

I don't know if you still need an answer to this, but I had the same question and was able to figure it out.

I'm not a JavaScript expert, but from what I can tell, the default Yelp! snippet re-orders all your scripts so that its remote script is at the very end of the queue; so, even though your line is after the Yelp code, I think your "attr" modification line is still getting queued before the remote Yelp script runs that actually creates the anchor ( <a\\> ) object you're trying to modify.

I was able to clean up the snippet for my own site, and just place the "attr" modification into my site's "onReady" functions. I can't imagine this would affect the behavior of the Yelp! script in any way; it's doing exactly what Yelp's snippet does, except it's not queuing it at the end of the JavaScript execution pipeline.

<div id="yelp-link">
    <div id="yelp-biz-badge-script-plain-BlWbNrrOL4HJqwYcmr6SUw"></div>
    <script type="text/javascript" id="yelp-biz-badge-script-plain-BlWbNrrOL4HJqwYcmr6SUw" src="//dyn.yelpcdn.com/biz_badge_js/plain/BlWbNrrOL4HJqwYcmr6SUw.js">
    </script>
</div><!-- #yelp-link -->

... and later on in my functions.js file:

$(document).ready(function() {
   $("#yelp-link a").attr("target","_blank");
});

I hope this makes sense, and helps :-)

Answer 3

I was looking for an answer months ago and gave up - my js skills are not quite at that level yet. But the same issue came up again, and the answer just came to me in a flash - cover the badge with my own transparent link. I put the yelp script in a div, and just added my own link immediately after the script. Here's the html that goes after the script:

<a href="http://www.yelp.com/biz/yourpage" target="_blank" class="yelp-button">My Yelp Page</a>

and the css:

.yelp-button { background: transparent;
display: block;
height: 56px;
width: 125px;
position: absolute;
top: 0;
text-indent: -9999px;
}

Answer 4

I found a direct way to fix the javascript, so this actually works.

(1): Look at the code provided by yelp for your Yelp business badge/button. Copy the link to the *.js javascript file that's referenced in the script, and save a local copy in your root directory. You're going to modify it.

(2): For the *.js file modifications... In the innerHTML line of the javascript, add the following piece of code after the href link:

\u003ca target=\"_blank\"

The \ which precedes the target=\\"_blank\\" tells the javascript to put target="_blank" inside of the yelp button's hyperlink/anchor tag. Anything written after the \>\ text will appear in the yelp button's image tag.

So, an example copy of the modified yelp-javascript-file.js should be like this:

var badge_element = document.getElementById("yelp-badge");
badge_element.innerHTML = "\u003ca href=\"http://www.yelp.com\" \u003ca target=\"_blank\" \u003e\u003cimg alt=\"Yelp\" src=\"http://dyn.yelpcdn.com/extimg/genericYelpBizButton.png\" height=\"33\" width=\"88\"\u003e\u003c/a\u003e";

(3): Now, in the code provided by Yelp... make sure it is pointing to your modified javascript file, and not the original javascript file. For a simple button pointing to Yelp, the code will look like this:

<div id="yelp-badge" title="Yelp Business Page">
<a href="http://yelp.com">Check out Yelp</a></div>

<script type="text/javascript">(function(d, t) {var g = d.createElement(t);var s = d.getElementsByTagName(t)[0];g.id = "yelp-badge-script";g.src = "yelp-javascript-file.js";s.parentNode.insertBefore(g, s);}(document, 'script'));</script>

(Final Result): Below is a copy of the html loaded after the script runs and your button appears. and YES... it opens in a new window / new tab.

<div id="yelp-badge" title="Yelp Business Page">
<a href="http://www.yelp.com" target="_blank">
<img alt="Yelp" src="http://dyn.yelpcdn.com/extimg/genericYelpBizButton.png" height="33" width="88">
</a>
</div>