20 Replies Latest reply: Apr 29, 2012 10:26 AM by Pedricks RSS

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

    Pedricks Community Member

      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!

        • 1. Re: How do I insert PayPal buttons onto my DreamWeaver CS5.5 webpages?
          sudarshan.t CommunityMVP

          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.

          • 2. Re: How do I insert PayPal buttons onto my DreamWeaver CS5.5 webpages?
            Pedricks Community Member

            If I post the code for the PayPal button here and it is copied and used elsewhere by public viewing our discussion, the code will take them to my account with PayPal.  So I have edited the links and the hosted button id to render it useless.  But it gives you an idea of what they generate when you make a button at their site.

             

             

             

            <form target="paypal" action=https://www.paypal.com method="post">

            <input type="hidden" name="cmd" value="_s-xclick">

            <input type="hidden" name="hosted_button_id" value="LNJ">

            <input type="image" src=https://www.paypalobjects.com border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">

            <img alt="" border="0" src=https://www.paypalobjects.com width="1" height="1">

            </form>

             

            The buttons are inserted next to the images of the items I sell on my website PedricksCorner.com

            I tried inserting this code in a number of ways, including as an image and as a form, and nothing worked.  There are over 200 images and 200 buttons to go with each one.  Plus my View Cart buttons.

            I work almost totally in design view.  I have never had to insert code in code view.

            • 3. Re: How do I insert PayPal buttons onto my DreamWeaver CS5.5 webpages?
              codeDawg Community Member

              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

              • 4. Re: How do I insert PayPal buttons onto my DreamWeaver CS5.5 webpages?
                Ken Binney CommunityMVP

                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

                • 5. Re: How do I insert PayPal buttons onto my DreamWeaver CS5.5 webpages?
                  Pedricks Community Member

                  I confess to giving myself a crash course in DreamWeaver using books for CS3.  Although there are huge gaps in my knowledge, I am almost ready to launch the new site.  All I need to do now is add my content (items for sale) and the PayPal buttons.  I have over 200 buttons stored at PayPal which I used on the site (which will be shut down by Microsoft Office Live monday night) and ready to go onto the new DreamWeaver site!

                  I will be deleting and adding new photos and new PayPal buttons on a regular basis as the inventory changes.  With the microsoft module for inserting the button code generated by PayPal, it was super easy.  Copy the code into the module and the button was placed on the page where ever the cursor had been positioned.

                   

                  I too, like the idea of a div

                  I need step by step instructions on how to make something which will enable me to insert and remove buttons often.

                  Is a div tag the way to go?

                  Do I define a div tag for PayPal buttons and add it to my main.css?  Then use it when I need to replace buttons?

                  Please remember I am not working in code view, but in design view.

                  I don't feel comfortable inserting code in code view.

                   

                  Ken, what is a "snippet"?  I liked your buttons.  You did not just place that code on the page though, you inserted it in code view?  By snippets, wouldn't that be what PayPal generates when they create a button for us?

                   

                  Be kind to a neebie

                  • 6. Re: How do I insert PayPal buttons onto my DreamWeaver CS5.5 webpages?
                    Ken Binney CommunityMVP

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

                    • 7. Re: How do I insert PayPal buttons onto my DreamWeaver CS5.5 webpages?
                      Pedricks Community Member

                      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.

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

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

                       

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

                      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?

                       

                      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!

                      • 8. Re: How do I insert PayPal buttons onto my DreamWeaver CS5.5 webpages?
                        Pedricks Community Member

                        Okay, if forcing myself to work in code view is what I need to do, then I must.

                        Still can't get a PayPal button to show up.

                         

                        Here is the line in code where I have the new divider:

                         

                        <div class="content" id="PayPalButton"></div>

                         

                        Where exactly in this line of code, do I insert the code for the button generated by PayPal?

                        After "PayPalButton">

                        And before </div> ?

                         

                        Thanks!

                        • 9. Re: How do I insert PayPal buttons onto my DreamWeaver CS5.5 webpages?
                          Pedricks Community Member

                          Couldn't wait!  Way too much to do between now and Monday night when current site goes down!

                          It worked!

                          And the button is functionall!!

                          Okay Ken, thank you for pushing me to look at the code view, it turned out to be the simplest and easiest answer.

                           

                          I know I cannot be the only Microsoft Office Live small business owner scrambling to rebuild a commercial website from scratch because they could not move our websites to their new server.  I have no intention of using their new Office 365, as they could pull the same stunt in a couple of years and I'd have to rebuild again. 

                          So I went with DreamWeaver CS5.5 instead and am so glad I did!

                           

                          The learning continues!

                          • 10. Re: How do I insert PayPal buttons onto my DreamWeaver CS5.5 webpages?
                            Ken Binney CommunityMVP

                            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

                            • 11. Re: How do I insert PayPal buttons onto my DreamWeaver CS5.5 webpages?
                              Ken Binney CommunityMVP

                              Fantastic !!!!

                               

                              Are you in the US?

                              • 12. Re: How do I insert PayPal buttons onto my DreamWeaver CS5.5 webpages?
                                Ken Binney CommunityMVP

                                As you discovered, your instinct was perfect

                                • 13. Re: How do I insert PayPal buttons onto my DreamWeaver CS5.5 webpages?
                                  Pedricks Community Member

                                  Hi Ken, Yes, I am in the US, California.

                                  I like your comment:

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

                                   

                                  Bear in mind that I don't know enough about html code to fill the prerequisites for taking a college class in DreamWeaver!  All self taught.  Everything I know about computers, software, websites.

                                   

                                  Here is the link to the dummy site, which I do hope will have real content by this next winter.

                                   

                                  http://pedrickscorner.info/

                                   

                                  Now...on to getting content onto 25 pages of the real website.  When it goes live this week-end, I'll post a link to it here for you to see.

                                  • 14. Re: How do I insert PayPal buttons onto my DreamWeaver CS5.5 webpages?
                                    codeDawg Community Member

                                    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

                                    • 15. Re: How do I insert PayPal buttons onto my DreamWeaver CS5.5 webpages?
                                      Ken Binney CommunityMVP

                                      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;

                                      }

                                      • 16. Re: How do I insert PayPal buttons onto my DreamWeaver CS5.5 webpages?
                                        Pedricks Community Member

                                        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!

                                         

                                        And thanks Ken, I will do that when I create the new css rule. 

                                        I got sidetracked researching how to put the content into my Contact Us page.  Sure wish there was a tutorial labeled: "Create your Contact Us page"

                                        And I have been wondering, in the text books all of the css rules start with #

                                        In the new CS5.5 all of the rules start with a period like your: .PayPalButton

                                        I used a template to create my initial page, then saved it as my main.css page, then also made it my main template, and used this template to create all 25 pages.  It is so cool that every change to the template also changes all the pages made from it!  In the regions designated as not being available to for editing content.

                                         

                                        It solved one of my other searches here.  I needed to know how to have a comment show up on every page.  The answers seemed far more complicated than necessary.  Creating and using a template solved it nice and neat!

                                         

                                        Anyway, all of the rules in the resulting main.css page start with a period and I was curious about that.

                                        ie, when making new rules, I should use the . instead of the #?

                                        • 17. Re: How do I insert PayPal buttons onto my DreamWeaver CS5.5 webpages?
                                          Ken Binney CommunityMVP
                                          SelectorExampleExample description
                                          .class.introSelects all elements with class="intro"
                                          #id#firstnameSelects the element with id="firstname"
                                          • 18. Re: How do I insert PayPal buttons onto my DreamWeaver CS5.5 webpages?
                                            codeDawg Community Member

                                            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

                                            • 19. Re: How do I insert PayPal buttons onto my DreamWeaver CS5.5 webpages?
                                              Pedricks Community Member

                                              I bet you guys were wondering how a goofy person who didn't even remember that .intro meant a class and #firstname was an ID, was going to be able to build a website!

                                              I can't tell you how much I have appreciated the help from both of you!

                                              Here is the results so far, just went live and canceled my redirect to microsoft:

                                               

                                              http://pedrickscorner.com/index.html

                                               

                                              Don't laugh too hard, I can already see I've got my work cut out for tomorrow.  Plus my four main pages are still missing their photos and paypal buttons, but I am thrilled to see the ones I did add are functional.

                                              I wanted to get it up and live so I could see the results.  Since it already existed on another server, I wasn't able to use f12 to preview any of my pages because my browser would keep taking me to the original site which will go down Monday night.

                                               

                                              I am certian I will be back here soon with lots of new questions

                                              Pedricks

                                              • 20. Re: How do I insert PayPal buttons onto my DreamWeaver CS5.5 webpages?
                                                Pedricks Community Member

                                                Last but not least.  In March, I did find a reference in Adobe to a PayPal object wizard available from the Insert menu/panel.  Here is the link:

                                                 

                                                http://help.adobe.com/en_US/Contribute/5.0_Using/WS5b3ccc516d4fbf351e63e3d1180fba3730-7e0b .html

                                                 

                                                What I did not realize at the time, was that this is a feature of Adobe Contribute CS4, but it sure would be nice if this is something the developers can consider adding to DreamWeaver!

                                                 

                                                For the moment though, my .PayPal class (with the changes Kenny suggested) and Insert Div tag worked quickly and easily to put my existing buttons at PayPal onto my pages and I feel very confident that adding the bulk of them to my main pages later on today will be simple and quick.  Thanks again for showing me what to do!

                                                 

                                                The code for the PayPal "View Cart" button is very long!  So I used Notepad to create a document for it in my Assets so I could just copy and paste it easily on the each page as needed.