1 Reply Latest reply: May 5, 2012 6:02 AM by JulienKraakman RSS

    Popular request: How to Share articles via Facebook/twitter/eMail

    Johannes Eckert Community Member
    Johannes Eckert Dec 12, 2011 4:00 PM

      I wrote a comprehensive post on how to share your article via facebook, twitter or eMail or collect community comments right inside your folio. This is how I established an overlaying layer of comments and discussion in my DONE magazine.

       

      This is a bit complicated, has some problems, but is a popular request and might help you to enable more discussion about your content:

       

      Share Articles via Facebook, twitter or eMail

      http://tumblr.com/Z3N6zxDAlQsX

       

      I hope this covers all and is repeatable.

      —Johannes

      • 674 Views
      • Tags:
        • 1. Re: Popular request: How to Share articles via Facebook/twitter/eMail
          JulienKraakman
          JulienKraakman May 5, 2012 6:02 AM (in response to Johannes Eckert)

          Hi Johannes,

           

          Thanks a lot, it is very helpful!

          I actually wouldn't be posting here if I wouldn't have a problem with it though.

          The thing is, I can't get it to work!

           

          So to clear things up here is my HTML code I'm trying to get working on an InDesign document (based on your HTML 5 template - Facebook like button code within the "body" tag):

           

          <!DOCTYPE html>

          <!--

                    HTML5-1file-framework for use in Digital Publishing Suite from Adobe

                    v0.2-110224 (Tested with drop9)

                    http://digitalpublishing.tumblr.com

          -->

          <html laneg="en">

          <head>

          <!-- title not visible in the viewer unless viewed with a browser / popup -->

          <title>HTML5 Framework for DPS</title>

                    <meta charset="utf-8" />

           

           

                    <!--

                              meta viewport tag

                              this tag controls the rendering of the html on the devices. it might be handled differntly

                              between iOS/Android, so be carefull. this is a complete example tag. change for your needs or omit completly.

           

           

                              -Pagination of HTML stacks: omit completly or do not use user-scalable and target-densitydpi

                              -PinchZoom: use "Scale Content to Fit" in InDesign and use maximum-scale greater than 1.0, do not use user-scalable=no

                    -->

                    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi"/>

           

           

                    <!-- your document css -->

                    <style type="text/css">

                    /* basic css reset */

                    body {

                              margin: 0;

                              padding: 0;

                              /* make WebOverlay transparent in InDesign: "Use Transparent Background" */

                              /* use following line for semi-transparent-background (fourth value is alpha value) */

                              /* background: rgba(50,150,250,0.5); */

                    }

           

           

                    /* your css styles here */

           

                    </style>

          </head>

          <body>

           

           

          <div id="fb-root"></div>

          <script>(function(d, s, id) {

            var js, fjs = d.getElementsByTagName(s)[0];

            if (d.getElementById(id)) return;

            js = d.createElement(s); js.id = id;

            js.src = "//connect.facebook.net/nl_NL/all.js#xfbml=1";

            fjs.parentNode.insertBefore(js, fjs);

          }(document, 'script', 'facebook-jssdk'));</script>

           

           

          <div class="fb-like" data-href="http://www.website.com/" data-send="true" data-width="450" data-show-faces="true" data-font="tahoma"></div>

           

           

          </body>

          </html>

           

          What I do:

          I create an empty frame in my InDesign document.

          In  the overlay creator I tell it to be a Web Content.

          I select the HTML file containing above code.

          I update the article in the Folio Builder and test it on the iPad.

           

          The result is actually... nothing. The area in which the frame is, displays a small loading wheel and after that it's totally empty.

           

          What am I doing wrong??

           

          Thanks.