Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

Show twitter news feed on click problem!

Hello, ive been trying to show twitter newsfeed on click on a twitter icon, but i dont know how to put in the embed code to jquery, heres the embed code that i have in a variable

var $twitterfeed = $('<div><a class="twitter-timeline" href="https://twitter.com/username" data-widget-id="4565325235235255">Tweets av @username</a></div>

  <script>!function(d,s,id){
var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>');

i have a overlay also, so it gets darker around the body, and it works when i click the image, but when i add this embedded twitter code, everything stops working..

Any ideas?

Kind Regards

Erdrag

1 Answer

Ryan Field
PLUS
Ryan Field
Courses Plus Student 21,242 Points
Ryan Field
Ryan Field
Courses Plus Student 21,242 Points

Hi, Erdrag. It looks like you just have some quote issues. You're surrounding your entire value with single quotes, but the code inside that is also using two sets of single quotes, which will break your JavaScript. Try this:

var $twitterfeed = $('<div><a class="twitter-timeline" href="https://twitter.com/username" data-widget-id="4565325235235255">Tweets av @username</a></div>

  <script>!function(d,s,id){
var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?"http":"https";if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>');
erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

Hello, i added the code to the variable, but nothing happend when i do it,

and when i remove this code, then the overlay shows.. So it must be something with the embed code :/

Ryan Field
Ryan Field
Courses Plus Student 21,242 Points

That's certainly possible. It's hard to tell what that code is actually doing, since it looks minified.

erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

The code is from twitters "widget" thing, where you can get the embed code from your news feed, and i got this code :/

erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

Any idea how i could fix this?

heres the full code, so you get the idea 

var $twitteroverlay = $('<div id="twitter-overlay"></div>');
        var $twitterfeed = $('<div><a class="twitter-timeline" href="https://twitter.com/username" data-widget-id="4565325235235255">Tweets av @username</a></div>

                <script>!function(d,s,id){
                var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?"http":"https";if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>');


        //add twitter feed to the overlay
        $twitteroverlay.append($twitterfeed);
        //add twitteroverlay to the body
        $("body").append($twitteroverlay);


        $('#twitter').click(function(event) {
            event.preventDefault();

            $twitteroverlay.fadeIn("slow");
        });

        $twitteroverlay.click(function() {
          $twitteroverlay.fadeOut("slow");
        });