Skip to main content

How do I manually place the Buy Button toolbar on my page?

Updated

Fotomoto automatically tries to position the Buy links underneath the images on your website. It is possible to manually position the Buy links if desired.

Important!

  • By default, Fotomoto automatically puts the Buy Button toolbar under your images. If you just want to change the position or appearance of the Buy Buttons, we recommend that you use CSS and not the method below. Please see our Customizing the Buy Buttons article.
  • The following solution should only be used if you want to put the Buy Button toolbar in a different location within your page code.
  • The code below will cause only one Buy Button toolbar to appear on the page, and it should only be used for "image detail" pages where only a single image is for sale.
  • You must be using Fotomoto in API mode for this to work.

Manually positioning the Fotomoto Buy Button toolbar

To make your Buy Buttons appear in a specific location in your page's HTML code, you can insert the following DIV where you want the Buy Buttons to go:

<div id="FotomotoToolbar" class="FotomotoToolbarClass"></div>


How this works, technically speaking...

Normally Fotomoto will find any images on your page and insert the FotomotoToolbar DIV after the HTML paragraph or DIV that contains your image, like this:

If your image is inside a paragraph:

<p> <img src="yourimage" /></p>
<!--FOTOMOTO TOOLBAR WILL BE INSERTED HERE-->

 

If your image is inside a DIV:

<div> <img src="yourimage" /></div>
<!--FOTOMOTO TOOLBAR WILL BE INSERTED HERE-->

 

If you manually position the Buy Button toolbar using the DIV explained above, you could do something like this:

<div><img src="yourimage" /></div>
<p>You can buy this image using Fotomoto - just click the links below</p>
<!--FOTOMOTO TOOLBAR DIV MANUALLY PLACED HERE-->
 

Related articles