Adding ADDThis social widget

  • Profile Image
    perrymanku
    Asked on August 08, 2013 at 06:44 AM

    Hello,

     

    I want to add the ADDThis widget.  I have generated the code which is below:

     

    <!-- AddThis Smart Layers BEGIN -->

    <!-- Go to http://www.addthis.com/get/smart-layers to customize -->

    <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-520258e73a6d7014"></script>

    <script type="text/javascript">

      addthis.layers({

        'theme' : 'transparent',

        'share' : {

          'position' : 'left',

          'numPreferredServices' : 5

        }, 

        'follow' : {

          'services' : [

            {'service': 'facebook', 'id': 'unipartcarcarcentres'},

            {'service': 'twitter', 'id': 'carcarecentres'},

            {'service': 'google_follow', 'id': 'u/0/b/114731497546763217799/'},

            {'service': 'youtube', 'id': 'unipartcarcarecentres'},

            {'service': 'pinterest', 'id': 'uccc'}

          ]

        },  

        'whatsnext' : {},  

        'recommended' : {

          'title': 'Recommended for you:'

        } 

      });

    </script>

    <!-- AddThis Smart Layers END -->

     

    When i add this to the HTML field nothing happens. Am I doing it wrong.  Here is my test form, just add anywhere

     

    http://form.jotform.co/form/32115294482856

  • Profile Image
    jefreylandicho
    Answered on August 08, 2013 at 08:20 AM

    To add the widget in your form that uses a script code, you will first need to create an html page then add the "AddThis" script code. An example on an html page can be downloaded here. The reason why you have to create an HTML page is because you cannot use a script code in the html field as scripting get strip for some reason.

    Once you have created the HTML page with the AddThis embed script, the next step would be to use the Free Text(HTML) field to insert an IFRAME code. Please refer below how you can insert the html page in an IFRAME.

    <IFRAME SRC="http://domain.com/addthis.html"></IFRAME>

    Please replace the SRC value to where you have uploaded the html file.

    Furthermore, since you are using a Smart Layer Embed Script, I would recommend embedding the form in a web page with the AddThis Embed script together although you can still use Custom CSS to adjust the position if you are using the form direct link.

    If you need further assistance, please contact us again.

  • Profile Image
    perrymanku
    Answered on August 09, 2013 at 05:14 AM

    Hello,

     

    Thanks for this.  I have added it now on my form  http://www.jotform.com//?formID=32115294482856

     

    However, how do I align the buttons so there are no big gaps and everything is one line?

     

    Thanks

  • Profile Image
    guilledutra
    Answered on August 09, 2013 at 10:16 AM

    Hello,

    Could you replace your actual addthis iframe code for this one

    <iframe width="450" style="border: none;" src="//perrymanku.com/MyTestSTuff/ucccAddThis.html"></iframe>

    Thanks!

  • Profile Image
    perrymanku
    Answered on August 09, 2013 at 10:23 AM

    Hi thanks for this :)

     

    However, can i add any code to get rid of the bg gaps between tweet and G+

  • Profile Image
    guilledutra
    Answered on August 09, 2013 at 10:39 AM

    Let me make some tests, but I think that space is there in order to prevent that the width of the number of twits fits along with the other button.

    Thanks

  • Profile Image
    perrymanku
    Answered on August 12, 2013 at 05:39 AM

    Thanks :)