Amazon product links in WP post

lamzoR

11 years ago

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

Thanks

Signature

VG Sport.eu's mission is to provide sports fans with the most accurate projections and predictions.

{{ DiscussionBoard.errors[6401024].message }}

dconjar

11 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

Signature

I build websites and web apps.

{{ DiscussionBoard.errors[6401406].message }}

topnichewebsites

11 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

Signature

http://pixelcovers.com/ <- eBook add eCovers

https://www.unicommercesolutions.com <- WordPress Websites and Maintenance

{{ DiscussionBoard.errors[6401604].message }}

karma8

11 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

Thanks
1 reply

Signature

Treat others the way you want to be treated. :)
Check out my updated recipe site and the recent post for easy chewy chocolate brownies...mmm...
If you want to get a Linkvana subscription, I offer a $30 rebate every month here - Linkvana Discount. Make sure you email your receipt for the rebate b/c I have other promotions that don't offer the rebate. Thx

{{ DiscussionBoard.errors[6403362].message }}

dconjar

11 years ago

Originally Posted by karma8

Now I get can't any spaces between the two, either hardcoding them in html view (&nbsp

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?

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><!-- product-left -->

<div style="float: right;
     margin: 0;
     padding: 0;
     width: 45%;
     overflow: hidden;">
INSERT PRODUCT CODE HERE
</div><!-- product-right -->

<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><!-- product-left -->

<div style="margin: 0 auto;
     padding: 0;
     width: 30%;
     overflow: hidden;">
INSERT PRODUCT CODE HERE
</div><!-- product-left -->

<div style="float: right;
     margin: 0;
     padding: 0;
     width: 30%;
     overflow: hidden;">
INSERT PRODUCT CODE HERE
</div><!-- product-right -->

<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.

Thanks

Signature

I build websites and web apps.

{{ DiscussionBoard.errors[6403808].message }}

karma8

11 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!

Thanks
1 reply

Signature

Treat others the way you want to be treated. :)
Check out my updated recipe site and the recent post for easy chewy chocolate brownies...mmm...
If you want to get a Linkvana subscription, I offer a $30 rebate every month here - Linkvana Discount. Make sure you email your receipt for the rebate b/c I have other promotions that don't offer the rebate. Thx

{{ DiscussionBoard.errors[6409412].message }}

dconjar

11 years ago

Originally Posted by karma8

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.

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

Signature

I build websites and web apps.

{{ DiscussionBoard.errors[6415416].message }}

topnichewebsites

11 years ago

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

...

Sandra, Did you get this done ?

Thanks

Signature

http://pixelcovers.com/ <- eBook add eCovers

https://www.unicommercesolutions.com <- WordPress Websites and Maintenance

{{ DiscussionBoard.errors[6416400].message }}

cra16

11 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;">IFRAME HERE</div><div style="margin: 15px; float: left;">IFRAME HERE </div>

Change the margin to what suits you best.

[ 1 ] Thanks

Signature

http://www.searchbodyart.com

{{ DiscussionBoard.errors[6416632].message }}

karma8

11 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

Thanks
1 reply

Signature

Treat others the way you want to be treated. :)
Check out my updated recipe site and the recent post for easy chewy chocolate brownies...mmm...
If you want to get a Linkvana subscription, I offer a $30 rebate every month here - Linkvana Discount. Make sure you email your receipt for the rebate b/c I have other promotions that don't offer the rebate. Thx

{{ DiscussionBoard.errors[6417621].message }}

dconjar

11 years ago

Originally Posted by topnichewebsites

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

...

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.

Originally Posted by karma8

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.

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.

Thanks

Signature

I build websites and web apps.

{{ DiscussionBoard.errors[6420226].message }}

karma8

11 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

Thanks
1 reply

Signature

Treat others the way you want to be treated. :)
Check out my updated recipe site and the recent post for easy chewy chocolate brownies...mmm...
If you want to get a Linkvana subscription, I offer a $30 rebate every month here - Linkvana Discount. Make sure you email your receipt for the rebate b/c I have other promotions that don't offer the rebate. Thx

{{ DiscussionBoard.errors[6421219].message }}

dconjar

11 years ago

Originally Posted by karma8

I did on the first post, but I didn't make it a hyperlinked url b/c I didn't think I could. Thx

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.

Thanks
1 reply

Signature

I build websites and web apps.

{{ DiscussionBoard.errors[6428984].message }}

karma8

11 years ago

Originally Posted by dconjar

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.

The code is there if you view source and scroll down, but don't worry about it anymore.

If you know the answer to the above posted question I'd be interested in your thoughts.

Thx

Thanks
1 reply

Signature

Treat others the way you want to be treated. :)
Check out my updated recipe site and the recent post for easy chewy chocolate brownies...mmm...
If you want to get a Linkvana subscription, I offer a $30 rebate every month here - Linkvana Discount. Make sure you email your receipt for the rebate b/c I have other promotions that don't offer the rebate. Thx

{{ DiscussionBoard.errors[6453925].message }}

dconjar 11 years ago

Originally Posted by karma8

I found a plugin called WP Amazon Associates that uses my api key. Is this better than the iframe codes? Does it matter?

They're conceptually the same. If you check out the source, you'll see that it's still the same old iframe.

If the plugin makes it easier, run with it.

Originally Posted by karma8

The code is there if you view source and scroll down.

Aha, AdBlock must've been blocking it. My bag.

You've got the iframes in divs, which is a good start. You can adjust the margins using CSS.

For instance, on your "orange cinnamon flavored coffee" page, you can do this:

(changes are in bold)

<div style="float: left;"><iframe src="http://rcm.amazon.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFF FFF&fc1=000000&lc1=0000FF&t=afreerecip e-20&o=1&p=8&l=as1&m=amazon&f=if r&asins=B003X7S45U" style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe></div>

<div style="float: left; margin: 0 20px;"><iframe src="http://rcm.amazon.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFF FFF&fc1=000000&lc1=0000FF&t=afreerecip e-20&o=1&p=8&l=as1&m=amazon&f=if r&asins=B003X7RXRU" style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe></div>

Or for a more elegant solution that you can easily repeat throughout your site:

<div class="product-left"><iframe src="http://rcm.amazon.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFF FFF&fc1=000000&lc1=0000FF&t=afreerecip e-20&o=1&p=8&l=as1&m=amazon&f=if r&asins=B003X7S45U" style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe></div>

<div class="product-right"><iframe src="http://rcm.amazon.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFF FFF&fc1=000000&lc1=0000FF&t=afreerecip e-20&o=1&p=8&l=as1&m=amazon&f=if r&asins=B003X7RXRU" style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe></div>

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

.product-left, .product-right { float: left; }
.product-right { margin: 0 20px; }

That will add 20px of spacing between the two Amazon widgets and the bookmark button. You can adjust the spacing by editing the code.

I tested it using Chrome Developer Tools. Should do the trick.
- Thanks
Signature
I build websites and web apps.
{{ DiscussionBoard.errors[6454006].message }}

eluminousdev

11 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>

Thanks

{{ DiscussionBoard.errors[6432809].message }}

karma8

11 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.

Thanks

Signature

Treat others the way you want to be treated. :)
Check out my updated recipe site and the recent post for easy chewy chocolate brownies...mmm...
If you want to get a Linkvana subscription, I offer a $30 rebate every month here - Linkvana Discount. Make sure you email your receipt for the rebate b/c I have other promotions that don't offer the rebate. Thx

{{ DiscussionBoard.errors[6452452].message }}

karma8

11 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

Thanks

Signature

Treat others the way you want to be treated. :)
Check out my updated recipe site and the recent post for easy chewy chocolate brownies...mmm...
If you want to get a Linkvana subscription, I offer a $30 rebate every month here - Linkvana Discount. Make sure you email your receipt for the rebate b/c I have other promotions that don't offer the rebate. Thx

{{ DiscussionBoard.errors[6537783].message }}

Amazon product links in WP post

Trending Topics

Google Map Expert?

Do I Need To Use Exact Keywords On My Website To Rank?

5 tools to ramp up your content marketing for the year

Question regarding Quora affiliate marketing strategy

The best movie/movies you have ever seen ??