Bollate

HTML

[ANSWERED] html – If I’m not using wordpress how do I use a premade amazon links in my website?

By

Nov 20, 2022

Solution 1 :

Your example seems to work fine, copying this into your page should get a result.
An iframe will copy the resulting html (from the link) into an element.

The link you have provided uses http, and not https, so you might have an issue bringing it in, as the browser sees it as unsecure. You can read more about the issue here: https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content/How_to_fix_website_with_mixed_content.

<div class='wrapper'>
    <div class='product_link'>
        <iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//ws-na.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&OneJS=1&Operation=GetAdHtml&MarketPlace=US&source=ac&ref=qf_sp_asin_til&ad_type=product_link&tracking_id=michaelsteven-20&marketplace=amazon&region=US&placement=B071WWBKDY&asins=B071WWBKDY&linkId=0d2a7fc755c7a536feb9394bdc228be2&show_border=true&link_opens_in_new_window=true&price_color=333333&title_color=0066c0&bg_color=ffffff">
        </iframe>
    </div>
</div>

Solution 2 :

I turned off adblock and now the link appears! But that raises the question, How do I make sure these links appear when other people visit my site?

Solution 3 :

EDIT:

<div class='wrapper'>
    <div class='product_link'>
        <iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="ws-na.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&OneJS=1&Operation=GetAdHtml&MarketPlace=US&source=ac&ref=qf_sp_asin_til&ad_type=product_link&tracking_id=michaelsteven-20&marketplace=amazon&region=US&placement=B071WWBKDY&asins=B071WWBKDY&linkId=0d2a7fc755c7a536feb9394bdc228be2&show_border=true&link_opens_in_new_window=true&price_color=333333&title_color=0066c0&bg_color=ffffff">
        </iframe>
    </div>
</div>

this works fine, just remove the // from your link.

Problem :

I am creating an ecommerce store that sells coffee using amazon affiliate links. I want to use the premade links that amazon gives you.

I’ve tried the obvious solution of copying and pasting the code into my HTML, but nothing appears when I copy the element into my index.html

All the tutorials I’ve found are for how to use amazon links in wordpress or youtube but I am creating my own website from scratch, so can put it in my portfolio and get hired.

<div class='wrapper'>
        <div class='product_link'>
            <iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//ws-na.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&OneJS=1&Operation=GetAdHtml&MarketPlace=US&source=ac&ref=qf_sp_asin_til&ad_type=product_link&tracking_id=michaelsteven-20&marketplace=amazon&region=US&placement=B071WWBKDY&asins=B071WWBKDY&linkId=0d2a7fc755c7a536feb9394bdc228be2&show_border=true&link_opens_in_new_window=true&price_color=333333&title_color=0066c0&bg_color=ffffff">
            </iframe>
        </div>
    </div>

I haven’t worked with iframe before, but I tried changing iframe to div and that didn’t fix it.

Comments

Comment posted by putvande

Divs can’t load other HTML in this way. So you just want to use iframes for now. Does the URL in the

Comment posted by games247

I copy pasted the URL into google and it took me to the properly styled product link. When I click refresh on my html page it attempts to load the image but it briefly shows the sad paper icon.

Comment posted by jsfiddle.net/putvande/w8xodpgy

Works fine here actually:

Comment posted by Tyler Edwards

When I removed the ‘//’ at the beginning of the url, it seemed to display just fine.

Comment posted by games247

I tried fiddle and it doesn’t work for me, the styled link doesn’t appear… Maybe there’s something different about my computer? I’m using chrome what browser are you using?

Comment posted by games247

Okay this question prompted me to think outside the box. I’ve turned off adblock on my index.html and now the link appears…………… So that raises the question, How do I make sure other people can see the link if they have adblock on?

Comment posted by Rimble

I’m pretty sure if you would figure that out you would make literal billions.

Comment posted by putvande

Why would it be a link? Its a page OP wants to show, to link to it.

Comment posted by games247

The amazon links I want to use have more than just an image. I don’t want to restyle all the text, borders and such.

Comment posted by hedgethe

Sorry I was confused I thought you wanted to style it yourself, see the edit above. Just remove // for your link.

By

Related Post

HTML

[ANSWERED] How do you add a background image in the margins and top of the page behind the body? (Html, Css)

Nov 20, 2022
HTML

[ANSWERED] html – I can’t get my carousel buttons to respond bootstrap 4

Nov 20, 2022
HTML

[ANSWERED] javascript – Locomotive Scroll not working with Vue.js when having to load images on page

Nov 20, 2022

You missed

HTML

[ANSWERED] javascript – Text box to display updated text and save on button click

Nov 20, 2022
HTML

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

Nov 20, 2022
HTML

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

Nov 20, 2022
HTML

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Nov 20, 2022