5 Replies Latest reply on Mar 29, 2017 4:11 AM by markfy

    Embed a tweet

    markfy Level 1

      Hi guys... this is proving harder than you would expect. Someone must have found a method of achieving this...

       

      We want to be able to embed a tweet (by ID) or display tweets via a hashtag, and render them as you would on a website using twitters developer code.

       

      Any ideas would be greatly appreciated. Googling hasn't really helped to discover if this is impossible to achieve with PhoneGap or not.

        • 1. Re: Embed a tweet
          kerrishotts Adobe Community Professional

          What embedding methods have you tried, specifically?

          • 2. Re: Embed a tweet
            markfy Level 1

            Hiya, thanks for the reply...

             

            So, I’ve created tweet.html and placed the following on it. (Note; This same html renders perfectly in a normal browser and we're testing using the PhoneGap Developer app).

             

            <blockquote class="twitter-tweet" data-lang="en-gb"><p lang="en" dir="ltr">A great American, Kurt Cochran, was killed in the London terror attack. My prayers and condolences are with his family and friends.</p>&mdash; Donald J. Trump (@realDonaldTrump) <a href="https://twitter.com/realDonaldTrump/status/844930836663357440">23 March 2017</a></blockquote>

             

            This is a tweet from Trump about the death of US citizen at Westminster.

             

            I’ve then added the following:

            <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

             

            Then

             

            <script async src="http://platform.twitter.com/widgets.js" charset="utf-8"></script>

             

            Then

             

            <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

             

            I’m able to retrieve the tweet content from Twitter using various APIs, but I’m assuming the problem here is the rendering of the html (which is what twitters widgets.js handles) and not the data itself.

             

            We’ve also whitelisted various Twitter related domains:

             

            <access origin="*" />

            <access origin="https://twitter.com" subdomains="true" />

            <access origin="http://twitter.com" subdomains="true" />

            <access origin="http://platform.twitter.com" />

            <access origin="https://platform.twitter.com" />

            <access origin="https://cdn.syndication.twimg.com" />

            <access origin="http://cdn.syndication.twimg.com" />

            • 3. Re: Embed a tweet
              ShazronAbdullah Adobe Employee

              Is there a sample index.html that we can run to test this independently of the Developer App? It could be Content-Security-Policy (CSP) Content-Security-Policy - HTTP | MDN

              • 4. Re: Embed a tweet
                markfy Level 1

                This is a simplified bit of html that runs pefectly fine on our webserver and renders the tweet, yet when run within the app it just displays raw text un-rendered. With the CSP (as below in place) it just shows unrendered text, remove the CSP and it renders using twitters widgets.js. Removing the CSP in the app on PhoneGap Developer makes no difference, it still refuses to render.

                 

                <!doctype html>

                <html class="no-js" lang="en" dir="ltr">

                <head>

                    <meta charset="utf-8">

                    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

                    <meta http-equiv="Content-Security-Policy" content="script-src * 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline' blob:; img-src *; media-src *; font-src data:" />

                    <title>Tweet Test</title>

                </head>

                <body>

                    <blockquote class="twitter-tweet" data-lang="en-gb"><p lang="en" dir="ltr">A great American, Kurt Cochran, was killed in the London terror attack. My prayers and condolences are with his family and friends.</p>&mdash; Donald J. Trump (@realDonaldTrump) <a href="https://twitter.com/realDonaldTrump/status/844930836663357440">23 March 2017</a></blockquote>

                    <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

                </body>

                </html>

                • 5. Re: Embed a tweet
                  markfy Level 1

                  Yes, it's definitely the CSP. Adding 'object-src * 'self'' has kicked the widgets.js into action.

                   

                  Thanks for the pointer.