Announcement

Collapse
No announcement yet.

“Pin It” Button for Websites

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    “Pin It” Button for Websites

    According to the pinterest site http://pinterest.com/about/goodies/ (scroll down to “Pin It” Button for Websites), I need to enter a web address for each page that I want to put a pin it button on,

    Thats not really an option (time wise etc) anyone know of a way around this? or have i completly gotten the wrong end of the stick.

    TON

    #2
    Add a Pin it button to every product

    Hi TON,
    To add Pinterest to your site, with a Pin it button on every product page: First you'll need to load the following into the head section of your outer layout:

    <script type="text/javascript">
    (function() {
    window.PinIt = window.PinIt || { loaded:false };
    if (window.PinIt.loaded) return;
    window.PinIt.loaded = true;
    function async_load(){
    var s = document.createElement("script");
    s.type = "text/javascript";
    s.async = true;
    if (window.location.protocol == "https:")
    s.src = "https://assets.pinterest.com/js/pinit.js";
    else
    s.src = "http://assets.pinterest.com/js/pinit.js";
    var x = document.getElementsByTagName("script")[0];
    x.parentNode.insertBefore(s, x);
    }
    if (window.attachEvent)
    window.attachEvent("onload", async_load);
    else
    window.addEventListener("load", async_load, false);
    })();
    </script>

    Then you'll need to load the following code to your product layout where you want the Pin it button to show:

    <!-- Customize and include for EACH button in the page -->
    <a href="http://pinterest.com/pin/create/button/?url=<actinic:variable name="CatalogURL" /><actinic:variable name="SectionPageName" />&media=<actinic:variable name="CatalogURL" /><actinic:block php="true">echo basename(str_replace('\\','/', '<actinic:variable name="ProductImageFileName" encoding="perl" selectable="false" />'));</actinic:block>&description=<Actinic:Variable Name="ProductName"/>" class="pin-it-button" count-layout="horizontal">Pin It</a>

    This last bit will show a Pin it button embedded with the url of your section page, the image url (without subfolders) and your product name. We found that if we included the product description instead of the name, then html commands would show in the Pin it description.
    Cheers, Todd Edwardson
    sigpic
    Edwardson.com & SellerDeck US Sales & Service
    800-503-5717 | 609-773-0800
    todd@edwardson.com

    Comment


      #3
      That worked perfectly,

      Thanks
      TON

      Comment


        #4
        or use addThis or ShareThis ...
        Adventure Centre Ltd - CheapTents.com

        Comment


          #5
          Originally posted by cheaptents View Post
          or use addThis or ShareThis ...
          +1 for "ShareThis"

          Comment


            #6
            you can also add the price at the end so pinterest shows it as a 'gift' or whatever they call it - we do that at Legendgames.co.uk - but you need to change the price format if you do that or it doesnt work well... and dont forget to use a blockif to stopthe pinterest script when you are in preview mode doing design or updates. We use ProductDescription but see note above about html fragments......

            heres our code:

            Code:
            <actinic:block if="%3cactinic%3avariable%20name%3d%22IsPreviewMode%22%20%2f%3e%20%3d%3d%20false">
            <a href="http://pinterest.com/pin/create/button/?url=www.legendgames.co.uk/acatalog/<actinic:variable name="SectionPageName" />&media=www.legendgames.co.uk/acatalog/<actinic:block php="true">echo basename('<actinic:variable name="ProductImageFileName" encoding="perl" selectable="false" />');</actinic:block>&description=<Actinic:Variable Name="ProductName"/> - <actinic:variable name="ProductDescription" /> for <actinic:block php="true" >echo "£" . number_format((<actinic:variable encoding="perl" name="ProductPriceRaw" selectable="false" />), 2);</actinic:block> + Postage " class="pin-it-button" count-layout="horizontal"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a><br/>
            </actinic:block>
            Andy Warner

            www.legendgames.co.uk - rpgs, boardgames, dice and other geeky stuff
            www.RPGMiniatures.com D&D and Star Wars Miniatures

            Both running the Cart from Search Page hack

            Also www.mainlymurder.co.uk www.thegamesplace.co.uk and www.thediceplace.co.uk

            All running V8.5.2 Multisite on a windows 7 quad PC, augmented by Mole End automation, from a single shared database, using actinic specific hosting from Host-IT.

            Comment


              #7
              Hi

              After a bit of self teaching from the Advanced user guide, I have managed to paste this into the relevant code sections with no errors. However, I am not getting a graphical button for pinit, just a text link (which works perfectly).

              Any pointers please?

              Thanks

              Alan
              www.therhubarbtree.co.uk

              Comment


                #8
                I took a look at your website on different browsers and I can see the pinit button showing on the product pages. Are you looking from within the software? Or what operating system / browser do you have the problem on?.
                Peblaco

                Comment


                  #9
                  Originally posted by peblaco View Post
                  I took a look at your website on different browsers and I can see the pinit button showing on the product pages. Are you looking from within the software? Or what operating system / browser do you have the problem on?.
                  Thanks for looking - I actually changed it many times last night - the last thing I tried was the Addthis code, but that doesnt seem to work either. I have just put the Addthis code back in the product layout just after the Product Description.

                  BTW, I am using SD2013, and I have looked at it with IE and Chrome.

                  This is the code I used

                  <actinic:block if="%3cactinic%3avariable%20name%3d%22IsNotPreviewMode%22%20%2f%3e">
                  <!-- AddThis Button BEGIN -->
                  <div class="addthis_toolbox addthis_default_style ">
                  <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
                  <a class="addthis_button_tweet"></a>
                  <a class="addthis_button_pinterest_pinit" piinit:layout="horizontal"></a>
                  <a class="addthis_counter addthis_pill_style"></a>
                  </div>
                  <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=xa-52f8ac6b64fc0e16"></script>
                  <!-- AddThis Button END -->
                  </actinic:block>
                  www.therhubarbtree.co.uk

                  Comment


                    #10
                    Sorry - just re-read your message - you say you can see it!

                    Maybe I had better back track
                    www.therhubarbtree.co.uk

                    Comment


                      #11
                      Thanks Louise

                      I have restored the code to the use the one at the top of this post and uploaded it to my site. However, I still see only the link text (alttext?)

                      I have tried on Chrome and IE with ctrlF5 to refresh the cache (does this still work)
                      www.therhubarbtree.co.uk

                      Comment


                        #12
                        Chrome problem with this code

                        It seems that Chrome has a problem with this code - please see the attached image that shows it cannot load the asset.
                        Attached Files
                        www.therhubarbtree.co.uk

                        Comment


                          #13
                          Thanks again - I have managed to get it visible on IE by resetting to defautls (win 8.1 and IE11) Chrome is still a mystery. Works on my phone and my wife's Win 8.1 PC on Chrome and IE. Anyway - its working enough and as you say, not an SD problem.
                          www.therhubarbtree.co.uk

                          Comment

                          Working...
                          X