CODEWITHSUNDEEP
jquerytwitter
dranxo
dranxo

Reputation: 3388

How do I render a single tweet in a webpage?

I am trying to include a rendered tweet in a webpage. I searched around and eventually got myself this solution:

<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>

<script type='text/javascript'>
$(document).ready(function(){
    $.getJSON("https://api.twitter.com/1/statuses/oembed.jsonid=287348974577385474&align=center&callback=?",
        function(data{$('#tweet123').html(data.html);});
});
</script>


<div id="tweet123"></div>

Now, this is only giving me the tweet text. I want the nicely rendered tweet, like the one I see here: https://dev.twitter.com/docs/embedded-tweets

I think I should mention that I have jquery somewhere else on the page I want to make. I suppose I could remove it if I need to do that in order to get rendering working. But I'd rather not.

edit: the page looks like this, I am not happy with the rendering: not rendered the way I want

edit: my code right now, bear with me I know almost nothing about web programming:

<!DOCTYPE html>
<html>

<head>

<meta charset="utf-8">
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script language="javascript" src="../supporting_data/seaofclouds-tweet-d433d14/tweet/jquery.tweet.js" type="text/javascript"></script>
<script type="text/javascript"src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA4aH3NUbCC-DiqD1hUcsy6EMPmqDgn-Yo&sensor=false"></script>

<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>

<script type='text/javascript'>
jQuery(function(){
    $.getJSON("https://api.twitter.com/1/statuses/oembed.json?id=287348974577385474&align=center&callback=?,
        function(data{$('#tweet123').html(data.html);});
});
</script>

</head>

<body>



<p>
<div id='tweet123'></div>  
</p>


<!-- experiment with seaofclouds -->
        <script type='text/javascript'>
            jQuery(function($){
                $(".coffeeTweet").tweet({
                    username: "coffee_dad",
                    join_text: "auto",
                    avatar_size: 32,
                    count: 5,
                    loading_text: "downloading tweets..."
                });
            });
        </script>
<p>
<div class="coffeeTweet"></div>
</p>

</body>
</html>

Upvotes: 2

Views: 3734

Answers (3)

samazi
samazi

Reputation: 1171

First you can try changing //platform.twitter.com/widgets.js to http://platform.twitter.com/widgets.js

EDIT:

The following works from my computer.

<!DOCTYPE html>
<html>

<head>

<meta charset="utf-8">
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

<script type='text/javascript'>
$(document).ready(function(){
    $.getJSON("https://api.twitter.com/1/statuses/oembed.json?id=287348974577385474&align=center&callback=?",
        function(data){$('#tweet123').html(data.html);});
});
</script>

</head>

<body>



<div id='tweet123'></div>  



</body>
</html>

HTML Output

EDIT: I am running this web page from a local web server on my computer. I get the same result as you if I simply open the file in my browser with the file:/// protocol.

I would try running the file on a web server, because very often your browser will restrict certain operations while under the file:/// protocol for security reasons.

Upvotes: 3

Coronus
Coronus

Reputation: 587

If you want the fully rendered tweet, you're going to have to embed it using the methods found here: https://dev.twitter.com/docs/embedded-tweets

Upvotes: 0

joeltine
joeltine

Reputation: 1620

I'm assuming you'd also need to include the associated css that styles this markup from twitter.

Upvotes: 0

Related Questions