Amazon product links in WP post

by karma8 Posted: 14 years ago 18 replies

How do I put 2 Amazon iframe banners side by side in one WP post? When I enter the code in html view, they always end up one under the other. I tried deleting the end tag </iframe> and inserting spaces and then the next product code, but no luck. I also tried putting them in <p> tags, for the h... of it, but no luck. I'm not that proficient in programming so any help would be appreciated.

Also, there's enough room for 3 of these, so two shouldn't be a problem as far as the width goes in the post. I'm just using the links Amazon provides for specific products underneath recipes promoting a book/s similar to the recipe or other related items. I have a really cool cooking theme I want to keep. see afreerecipe .com

If there are any plugins that work, let me know. The one I have Amaniche doesn't let me do this, as far as I can tell. If so let me know how.

Thanks for any help!
Sandra

#programming #amazon #iframe #links #post #product #product links #wp post

lamzoR 14 years ago

html coding; creating a new div would solve your problem.

dconjar 14 years ago

I can't be remotely sure that this will work without viewing your source code, but you could try something like this:

HTML Code:

<div class="product-left">
INSERT PRODUCT CODE HERE
</div><!-- product-left -->

<div class="product-right">
INSERT PRODUCT CODE HERE
</div><!-- product-right -->

<div class="clear"></div>

And then add this to the end of your style.css file:

HTML Code:

.product-left, .product-right {
     float: left;
     margin: 0;
     padding: 0;
     width: 45%;
     overflow: hidden;
}

.product-right {
     float: right;
}

.clear {
     clear: both;
     margin: 0;
     padding: 0;
     line-height: 0;
}

If that works, you should consider making shortcodes for product-left, product-right, and clear. Just so you don't have to hard-code divs into the post each time.

If that doesn't work, try adding another style for the iframe element:

HTML Code:

.product-left iframe, .product-right iframe {
max-width: 270px !important;
width: 270px !important;
}

Just replace "270" with 45% of the width (in pixels) of your content div.

[ 1 ] Thanks

topnichewebsites 14 years ago

2x2

<div style="float:left;">
<iframe ............ </iframe>
</div>

<iframe> .... </iframe>

...........

If you want 3x3 then

<div style="float:left;">
<iframe ............ </iframe>
</div>

<div style="float:left;">
<iframe ............ </iframe>
</div>

<iframe> ... </iframe>
- [ 1 ] Thanks
karma8 14 years ago

Thanks dconjar for your suggestion. I may need that, but for now I'd tried Michael's suggestion(thx M.) just b/c it was a little easier, and it worked, mostly.

Now I get can't any spaces between the two, either hardcoding them in html view   or in putting them in while in view mode with the space bar, they disappear when I preview, so the ads are right next to each other. How else do you insert spaces in between iframes?

Thanks so much for your help I really appreciate it!
God bless the warrior forum!
Sandra
- [1] reply
- dconjar 14 years ago
  
  You use my solution.
  
  Edit: If you don't want to mess around with the CSS file and don't mind using janky, SEO-unfriendly inline styles, you can also do it this way:
  
  HTML Code:
  
  <div style="float: left; margin: 0; padding: 0; width: 45%; overflow: hidden;"> INSERT PRODUCT CODE HERE </div> <div style="float: right; margin: 0; padding: 0; width: 45%; overflow: hidden;"> INSERT PRODUCT CODE HERE </div> <div style="clear: both;"></div>
  
  Or, for three columns:
  
  HTML Code:
  
  <div style="float: left; margin: 0; padding: 0; width: 30%; overflow: hidden;"> INSERT PRODUCT CODE HERE </div> <div style="margin: 0 auto; padding: 0; width: 30%; overflow: hidden;"> INSERT PRODUCT CODE HERE </div> <div style="float: right; margin: 0; padding: 0; width: 30%; overflow: hidden;"> INSERT PRODUCT CODE HERE </div> <div style="clear: both;"></div>
  
  I recommend the original solution because it's better for SEO and you can easily make site-wide changes to the styles in the future.
karma8 14 years ago

Well, I just added another div with float right for the 2nd ad and it worked, similar to your suggestion, but I don't like the way it looks that far right, so I tried center, but it just put it next to the other ad again. Is there no way to get spaces between them? I do on an html site I have, but it doesn't work here.

Thanks!
- [1] reply
- dconjar 14 years ago
  
  If you remove the float from the right div, you might be able to use non-breaking spaces to add spacing, but that's not a good way to do it.
  
  Just adjust the margins of the divs to make it look the way you want.
  
  For instance, you should be able to move the right-floated div 10px to the left by adding this style to it, either as an inline style or (preferably) as an external CSS rule:
  
  margin-left: -10px;
  
  [ 1 ] Thanks
topnichewebsites 14 years ago

I didnt notice DCON was from just around my corner in Baltmore. Small world ...

Sandra, Did you get this done ?
cra16 14 years ago

Not to sure if you have already found a fix for this. But if not, this should work (if I have remembered correctly).

<div style="margin: 15px; float: left;"></div><div style="margin: 15px; float: left;"> </div>

Change the margin to what suits you best.
- [ 1 ] Thanks
karma8 14 years ago

I tried the dconjar sugg but I guess I put it in the wrong place and they didn't line up and made my bookmark button show up in the wrong place, so I tried cra16's sugg & it was similar but they were lined up, but the share button was next to it. I put it back to next to each other.

I'll just live with it this way. I only have two recs on some posts, not all. At least they are next to each other now.
Thanks for all your help!
Sandra
- [1] reply
- dconjar 14 years ago
  
  That should make my world domination project significantly easier to bring to fruition. Ha ha, hah ha ha hah ha ha ha.
  
  I write out my villain laughs.
  
  If you give us your URL, we can give you advice that actually works. When we're not able to inspect your elements, all we can do is guess.
karma8 14 years ago

I did on the first post, but I didn't make it a hyperlinked url b/c I didn't think I could. Thx
- [1] reply
- dconjar 14 years ago
  
  I'm not seeing the amazon code anywhere on afreerecipe.com.
  
  Also, you may want to consider another theme. There's no content above the fold for 1024x768 browsers, which is terrible for SEO. And there's a ton of unnecessary markup in there.
  
  [1] reply
eluminousdev 14 years ago

Hi Friend,

I hope following complete HTML code will help you.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.mainDiv{
width:990px;
height:auto;
margin:0 auto;
overflow:auto;
}
.leftBox{
width:298px;
height:280px;
float:left;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
color:#333;
margin-right:10px;
padding:10px;
text-align:left;
border:1px solid #CCC;
}
.midBox{
width:298px;
height:280px;
float:left;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
color:#333;
margin-right:10px;
padding:10px;
text-align:center;
border:1px solid #CCC;
}
.rightBox{
width:298px;
height:280px;
float:left;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
color:#333;
margin-right:10px;
padding:10px;
text-align:right;
border:1px solid #CCC;
}
</style>
</head>

<body>
<div class="mainDiv">
<div class="leftBox"> First Iframe code here</div>
<div class="midBox">Second Iframe code here</div>
<div class="rightBox">Third Iframe code here</div>
</div>
</body>
</html>
karma8 14 years ago

I found a plugin called WP Amazon Associates that uses my api key. Is this better than the iframe codes? Does it matter?
They end up looking the same way, but it is a little easier doing it from the post instead of manually searching Amazon and pasting the code, but it doesn't show the starr rating for me to choose a high rated product, so good & bad that way.
karma8 13 years ago

Dconjar
margin: 0 20px; this worked good and I actual altered a little to make 3 fit on the page. Thanks!
I haven't att'd the css stuff yet. I'll try when I have time to fix any mistakes I make.
Sandra

Join the discussion

Next Topics on Trending Feed

22

Amazon product links in WP post

karma8 • 14 years ago • 18 replies

How do I put 2 Amazon iframe banners side by side in one WP post? When I enter the code in html view, they always end up one under the other. I tried deleting the end tag </iframe> and inserting spaces and then the next product code, but no luck. I also tried putting them in <p> tags, for the h... of it, but no luck. I'm not that proficient in programming so any help would be appreciated. Also, there's enough room for 3 of these, so two shouldn't be a problem as far as the width goes in the post. I'm just using the links Amazon provides for specific products underneath recipes promoting a book/s similar to the recipe or other related items. I have a really cool cooking theme I want to keep. see afreerecipe .com