I am embedding a Yelp feed into my static site, and wish to style the width and height, but can't figure out how to target the Yelp element

Question

I'm trying to embed a Yelp review into my static site and then style its width and height, but I'm unable to figure out how. The code I'm pasting into my HTML is a span tag, but inspecting the page in Chrome, I can see that the Yelp review is embedded in an iframe.

Would I need to have the styling affect that iframe? If so, how can I target the iframe? I'm using the .less for my CSS.

This is the embedded Yelp code:

<span class="yelp-review" data-review-id="XHRGLZHuRQWjPK90OH1XQw" data-hostname="www.yelp.com">Read 
    <a href="https://www.yelp.com/user_details?userid=G7KpLAhF-jMDN05Erympbw"
    rel="nofollow noopener">Frank L.</a>'s 
    <a href="https://www.yelp.com/biz/mcdonalds-portland-2?hrid=XHRGLZHuRQWjPK90OH1XQw"
    rel="nofollow noopener">review</a> of <a href="https://www.yelp.com/biz/d-AFGxgOM-fQVODjFSMxsw"
    rel="nofollow noopener">McDonald's</a> on <a href="https://www.yelp.com" 
    rel="nofollow noopener">Yelp</a> <script async="async" src="https://www.yelp.com/embed/widgets.js" type="text/javascript"> 
    </script>
</span>

Here's how it is set in my HTML

<main>
    <section>
        <span class="yelp-review" data-review-id="XHRGLZHuRQWjPK90OH1XQw" data- 
            hostname="www.yelp.com">Read 
            <a href="https://www.yelp.com/user_details?userid=G7KpLAhF-jMDN05Erympbw"
            rel="nofollow noopener">Frank L.</a>'s 
            <a href="https://www.yelp.com/biz/mcdonalds-portland-2?hrid=XHRGLZHuRQWjPK90OH1XQw"
            rel="nofollow noopener">review</a> of <a href="https://www.yelp.com/biz/d-AFGxgOM- 
            fQVODjFSMxsw"
            rel="nofollow noopener">McDonald's</a> on <a href="https://www.yelp.com" 
            rel="nofollow noopener">Yelp</a> <script async="async" 
            src="https://www.yelp.com/embed/widgets.js" type="text/javascript"> 
            </script>
        </span>
    </section>
</main

Answer 1

I ended up following the link of the JS file, src="https://www.yelp.com/embed/widgets.js", copying the code in that file, pasting it into my own local files, and changing some width properties I found.

Seems to be working, I have control over the width like I wanted, though ideally this option isn't my #1 choice. I'd still like to hear if anyone has a better idea on how to manipulate the width property on the embedded Yelp element.

Answer 2

Because this platform is dedicated to connecting local people with local businesses, it makes sense to embed Yelp reviews on your website.

In addition to the usual benefits, you're also making it easy for potential customers to read about the experiences of consumers in their very own neighborhood.

Here's how to embed Yelp reviews on a website :

Step 1: You don't need to be signed into Yelp — simply type your business name or location into the search bar:

Step 2: The Yelp page for your business will appear. You'll see a section called 'Review Highlights'

Step 3: Scroll down the page, past the location information, amenities, and other information until you hit the reviews section. You'll see a dropdown menu to sort the reviews. If you're interested in your latest reviews hit 'newest first'.

Step 4: When you find a review you want to embed, click on the three dots to trigger a dropdown menu with two options:

1. Share review.
2. Embed review.

Step 6: Go to your website's back-end and paste the HTML into the page you'd like the Yelp review to appear on.

or use social media aggregator such as taggbox widget to add yelp reviews on any website.

Step 5: Click and a pop-up box will appear with the code to copy and preview: