Skip navigation
Currently Being Moderated

How do I insert PayPal buttons onto my DreamWeaver CS5.5 webpages?

Apr 24, 2012 11:12 PM

Tags: #cs5 #dreamweaver #view #button #buttons #add #to #cart #paypal

I have hundreds of PayPal buttons stored at PayPal and am rebuilding my website asap because Microsoft OfficeLive is shutting down as of April 30th.  But I cannot figure out how to put the buttons onto my new pages.  I don't know what to put their code into. 

Microsoft had a "module" which inserted the code and the buttons appeared where the cursor was positioned on the page.

I tried an image placeholder, a form button, etc.  Nothing works.

Everything is ready to go, I just need to get these buttons onto my pages.  Please help asap!

 
Replies
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Apr 24, 2012 11:46 PM   in reply to Pedricks

    If you're just looking at inserting images, you could do this:

     

    <img src="relative-or-absolute-source-to-your-image" width="widthofimage" height="heightofimage" alt="Paypal" />

    If you need more help, post your HTML code here and let us know where you want the images and we'll help you.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 25, 2012 2:07 AM   in reply to Pedricks

    Hi Pedricks,

     

    Put your PayPal code inside a div on your page:

     

         <div>

              PayPal form code goes here

         </div>

     

    You can then use CSS in the <div> tag for positioning, padding, margins, centering, etc...

     

    ~codeDawg

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 25, 2012 6:13 AM   in reply to Pedricks

    Pedricks wrote:

     

    Microsoft had a "module" which inserted the code and the buttons appeared where the cursor was positioned on the page.

    Make a "snippef" of your button code, and you will have the same ability to insert your buttons wherever you wish.

    (use a noticeable string like xxx for the variable entries)

     

    <!-- ADD TO CART BUTTON -->

                  <form name="_xclick" target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">

                    <input type="hidden" name="cmd" value="_cart">

                    <input type="hidden" name="add" value="add=1">

                    <input type="hidden" name="business" value="your business@blabla.com">

                    <input type="hidden" name="item_number" value="XXX">

                    <input type="hidden" name="amount" value="XXX">

                    <input type="hidden" name="shipping" value="1.00">

                    <input type="hidden" name="no_shipping" value="0">

                    <input type="hidden" name="no_note" value="1">

                    <input type="hidden" name="currency_code" value="USD">

                    <input type="hidden" name="lc" value="US">

                    <input type="image" src="https://www.paypal.com/en_US/i/btn/x-click-but22_old.gif" name="submit" alt="Make payments with PayPal or major credit cards - it's fast, free and secure!">

                    <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">

                  </form>

     

    I used it here

    http://www.kardsbykaren.us/gallery-anniversary.php

     

    I like Scott's suggestion for a DIV

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 25, 2012 10:11 AM   in reply to Pedricks

    Hi -

     

    Always keep a code view open, or you'll never be proficient in code..I have ab old version,

    but I can't imagine the snippets feature would be removed from newer versions.

    http://help.adobe.com/en_US/dreamweaver/cs/using/WSc78c5058ca073340dcd a9110b1f693f21-7bd2a.html

     

    It's another Panel you can open that allows you to copy and paste reuseable code you wish

    and give it any name you wish.  Whenever you need that code, just select the desired snippet

    in in your snippets paned, place your cursor where you want it and click insert.

     

    The DIV aspect is just for creating a styled container for the snippet.

    Note that the snippet could also contain all the div container code precefing and following the button code.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 25, 2012 10:51 AM   in reply to Pedricks

    Pedricks wrote:

     

    Hi, I tried inserting a divider.  I used "Insert Div Tag" and it created a box with the text inside of

    "Content for class "content" id "PayPalButton" Goes Here" 

    Then I tried to copy and paste the paypal button code into the box and just got a mess on the page.  No button.

     

    That's proper, but somehow you got the paste wrong (probably because you tried to place your cursor within Design view which is difficult at best)

     

    I thought the code generated by PayPal included the design (container) for the button as well as the links.

     

    Nope you must create the container

     

    Thanks, I am trying to view code as I design.  But am still nervous about trying to insert code in code view. 

     

    Get over it - it's Waaaaay more precise than Design view

     

    Maybe I need to create a new CSS Rule?  And call it PayPal?

    Yes that will position your container

     

    Then insert an Image Placeholder into the container to replace the text "Content for class "content" id "PayPalButton" Goes Here"?

    Then use insert image and insert the code into the container?

     

    Nope - you are just pasting HTML code - the button image is part of that code

     

    To save myself grief from ruining the real website I hope to have ready by this week-end, I am experimenting with a "dummy" website called PedricksCorner.info which is currently live.

    I really hope to figure out how to put a PayPal button onto that site by today!

     

    GREAT IDEA be sure to post a link here, so we can check your code

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 25, 2012 10:44 AM   in reply to Pedricks

    Fantastic !!!!

     

    Are you in the US?

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 25, 2012 10:46 AM   in reply to Pedricks

    As you discovered, your instinct was perfect

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 25, 2012 7:11 PM   in reply to Pedricks

    Pedricks,

     

    Likewise - all "self-taught" here too.

    I "inherited" a DW site for a client and just dived right in.

     

    Ken is right - get yourself comfortable working in code view.  You will save yourself hours of frustration and end up with much "cleaner" code.

    I've always placed the PayPal button inside a div in code view - then just copied and pasted wherever I needed a new button.

         <div style="whatever is needed;">

              Paste your PayPal form code here (in code view)

         </div>

     

    I like Ken's idea of using a snippet. 

    Never thought of that - great idea!

     

    ~codeDawg

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 26, 2012 11:12 AM   in reply to Pedricks

    Hi again -

     

    Saw your test page with Paypal Button

     

    Recommend these two changes:

     

    In the page code change the beginning to

     

    <div class="PayPalButton">

     

     

    In your CSS file add this:

     

    .PayPalButton {

        text-align: center;

        width: 200px;

       margin: 0 auto;

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 26, 2012 4:53 PM   in reply to Pedricks
    SelectorExampleExample description
    .class.introSelects all elements with class="intro"
    #id#firstnameSelects the element with id="firstname"
     
    |
    Mark as:
  • Currently Being Moderated
    Apr 27, 2012 6:02 AM   in reply to Pedricks

    Pedricks wrote:

     

    Thanks codeDawg.  What is a "snippet"?  And if each of the 200 buttons is different and PayPal stores the code for each of them for me, how and why would I use one?  Very curious!

     

    A snippet is an easy way to copy "often-used" code into your page.  Check the DW help file for the details.

     

    You're right, each of your 200 PP buttons is different - but only in one place (for the button you posted in this thread, it's the hosted_button_id value).

    All of the other code in the form is the same.

    So, you make a snippet of one of your PP buttons ... the entire form.

    Insert the snippet on any of your pages, wherever you want your PP button to appear.

    Then change the button ID to the specific PP button you want.

     

    ~codeDawg

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points