Twitter API Question posted in
The official Twitter API documentation can be found here.

How would I include a Twitter Timeline into an HTML file? – Twitter API

How can use the twitter API’s to get my timeline and display it in a HTML page? I want to query the API’s using HTML.

The questions I found on Stack Overflow are old and the answers don’t seem to work any more.

Any help would be appreciated.

Tags:

3

Answers


  1. 0

    You can embed your timeline from twitter using this url: https://publish.twitter.com/

    Enter your profile url from twitter.

    It will generate a code similar to following:

    <a class="twitter-timeline" 
  href="https://twitter.com/elonmusk">
    Tweets by elonmusk
</a> 
<script async 
  src="https://platform.twitter.com/widgets.js" 
  charset="utf-8"></script>

    If you copy and paste the above code into your html, it will embed Elon Musk’s twitter timeline.

    You can also customize some settings while you’re in the website.

    What this code does:

    At the time of writing; It basically inserts 2 <script> tags in the <head> tag. Also replaces the <a> tag with a generated <iframe> with twitter’s own styling for the timeline. So it doesn’t matter what you write in the <a> tag. Only the href attribute should be your timeline link and you should also keep the twitter-timeline class.

    Login or Signup to reply.
  2. 0

    As I mentioned in the comments, you can use the script provided by Twitter after going through this tool. It relies on a quite large script (95 kB minified) to load in the timeline with updates, which is what differentiates that from using the API to load data in.

    The code provided is quite simplistic, as you just need a “link” that is then swapped out by Twitter’s code. 

    <script async src='https://platform.twitter.com/widgets.js'></script>
<a class='twitter-timeline' href='https://twitter.com/AP?ref_src=twsrc%5Etfw'></a>

    You can also set some basic customization, such as width, height, and colors from the widget generator.

    (I tried making it a snippet, but it fails on Stack Overflow)

    Unfortunately, this appears to be the only officially supported way of loading a timeline, short of implementing it with a backend and live updates via the API.

    NB: I have personally contacted Twitter with a follow up asking about the possibility of them open-sourcing the widget script. Doing so would allow anyone to remove the polyfills for features widely supported, as well as ship modern code that isn’t transpiled down to ES3. Combined, these efforts would provide a huge savings over the current 95k, but unfortunately I did not receive a response to either email.

    Login or Signup to reply.
  3. 0

    You can copy paste the below code to understand how twitter API tool works for showing timelineposts , hashtag data as well as you can see if the user is mentioned in any posts.

                    <?php include("header.php"); ?>
            <?php
            $user_input=$_GET['user_input'];
            $user_count=$_GET['user_count'];
            $user_until=$_GET['user_until'];
            $mention_count=$_GET['mention_count'];
            $hash_count=$_GET['hash_count'];


            $user_until = date("Y-m-d", strtotime($user_until));



            $user_data=userinfo(
            $user_input,
            $oauth_access_token,
            $oauth_access_token_secret,
            $consumer_key,
            $consumer_secret
            );

            $user_tweets=user_tweets(
            $user_input,
            $oauth_access_token,
            $oauth_access_token_secret,
            $consumer_key,
            $consumer_secret,
            $user_count);



            $mentiondata_content=mentioneddata($oauth_access_token,
            $oauth_access_token_secret,
            $consumer_key,
            $consumer_secret,
            $user_input,
            $user_until,
            $mention_count
            );
            $hashtagdata_content=hashtagdata_content($oauth_access_token,
            $oauth_access_token_secret,
            $consumer_key,
            $consumer_secret,
            $user_input,
            $user_until,
            $hash_count);




            $myJSON = json_encode($user_data);
            $myJSON2 = json_encode($user_tweets);
            $myJSON3 = json_encode($mentiondata_content);
            $myJSON4 = json_encode($hashtagdata_content);


            $users = array();
            $users[]=json_decode($myJSON, true);
            $users[]=json_decode($myJSON2, true);
            $users[]=json_decode($myJSON3, true);
            $users[]=json_decode($myJSON4, true);
            $myJSONdata = json_encode($users);
            $wikidata=wikipedia($user_data['name']);
            if ($user_data==NULL) {
            ?>
            <style type="text/css">
            .user_profile_sec , .profile_data_sec
            {display: none;}
            </style>
            <?php
            }
            ?>

            <section class="user_profile_sec"  >
            <div class="row">
            <div class="col-sm-12">
            Your search results of <?php echo $user_input;?> are given below.
            </div>
            </div>
            <div class="row">
            <div class="col-sm-4">
            <img src="<?php echo $user_data['profile_photo'];?>" style="width: 250px;">
            </div>
            <div class="col-sm-8">
            <div class="w3-padding w3-white user_data_sec01">
            <h4><b><?php echo $user_data['name']." </b>| " . $user_data['screen_name'];?> (<?php echo $user_data['user_id']; ?>)
            <?php
            if ($user_data['verified']==1) {
            echo "<span class='fa fa-check verfication_col'></span>";
            }
            ?>
            </h4>
            Followers =<?php echo $user_data['followers_count'];?> /
            Tweets <?php echo $user_data['statuses_count'];?> /
            friends_count =<?php echo $user_data['friends_count'];?> /
            listed_count =<?php echo $user_data['listed_count'];?> /
            favourites_count =<?php echo $user_data['favourites_count'];?>
            <br>
            <?php   echo $wikidata; ?>
            User Description :  <?php echo $user_data['description'];?>  <br>
            User Location : <?php echo $user_data['location'];?><br>
            User url : <a href="<?php echo $user_data['url'];?>" target="_blank">
            <?php echo $user_data['url'];?></a>  <br>
            Created_at : <?php echo $user_data['created_at'];?> <br>
            <div class="btn-group btn-group-justified">
            <div class="btn-group">
            <button type="button" class="btn btn-primary save_userdata_btn" value="<?php echo base64_encode($myJSONdata);?>"><b> Save Data
            <span class="fa fa-save"></span> </b>
            </button>
            </div>
            <div class="btn-group">
            <button type="button" class="btn btn-primary  "><b> Download Data
            <span class="fa fa-cloud-download"></span> </b>
            </button>
            </div>
            <div class="btn-group">
            <button type="button" class="btn btn-primary"><b> Clear Data
            <span class="fa fa-trash"></span> </b>
            </button>
            </div>
            </div>
            </div>
            </div>
            </div>
            <br>
            </section>


            <section class="profile_data_sec">
            <div class="row">
            <div class="col-sm-3"> <button class="btn btn-primary showbtn1 btn-block">Show default analysis</button>
            </div>
            <div class="col-sm-3">
            <button class="btn btn-primary showbtn1  btn-block">coming soons</button>
            </div>
            <div class="col-sm-3">
            <button class="btn btn-primary showbtn1  btn-block">coming soons</button>
            </div>
            <div class="col-sm-3">
            <button class="btn btn-primary showbtn1  btn-block">coming soons</button>
            </div>
            </div>


            <div class="row">
            <div class="col-sm-12">




            <div class="w3-card w3-white w3-padding">
            <div>
            <div class="w3-right">
            <button type="button" class="btn btn-primary download_data_btn1"><b> Download Data
            <span class="fa fa-cloud-download"></span> </b>
            </button>
            </div>
            <div class="w3-left">
            Result based on Profile.
            </div>
            </div>
            <div class=" ">
            <div class="table-responsivep">
            <table class="table" id="user_tweets_table1">
            <thead>
            <tr>
            <th>No</th>
            <th>Date</th>
            <th>Tweet</th>
            <th>Link</th>
            <th>Retweet</th>
            <th>Likes </th>
            <th>Comments</th>
            <th>Username</th>
            <th>Mentioned</th>
            <th>Hashtags</th>
            </tr>
            </thead>
            <tbody>
            <?php

            $n=1;
            foreach ($user_tweets as $data) {
            $retweeted = strpos($data['full_text'], "RT");
            ?>
            <tr>
            <td><?php echo $n;?></td>
            <td class="datetb"><?php echo date("d-m-Y", strtotime($data['created_at'])); ?>
            </td>
            <td class="tweet_text">
            <?php
            if ($retweeted === false)
            {
            echo $data['full_text'];
            //$sentidata=sentimental_result($data['full_text']);
            }else{
            $rdata=get_tweets($data['id'],
            $oauth_access_token,
            $oauth_access_token_secret,
            $consumer_key,
            $consumer_secret);
            echo "<span class='badge'><i class='fa fa-copy w3-border'></i> </span>" .$rdata['retweeted_status']['full_text'];
            $sentidata=sentimental_result($data['full_text']);
            }
            ?>
            <div class="sentidiv">
            <br>
            <?php //echo sentimental_html($sentidata); ?>
            </div>
            </td>
            <td>
            <?php
            if ($retweeted === false) {
            $user_for_likes= $data['user']['screen_name'];
            $user_id_for_likes= $data['id'];
            }else{
            $user_for_likes= $data['retweeted_status']['user']['screen_name'];
            $user_id_for_likes= $data['retweeted_status']['id'];
            }
            $url="https://twitter.com/".$user_for_likes."/status/".$user_id_for_likes."/";
            ?>
            <button class="btn btn-success btn_view" value="<?php echo $url;?>">
            View
            <span class="fa fa-eye"></span>
            </button>

            </td>
            <td class="nolik retweet_tab">
            <?php
            if ($retweeted === false) {
            $user_for_likes= $data['user']['screen_name'];
            $user_id_for_likes= $data['id'];
            }else{
            $user_for_likes= $data['retweeted_status']['user']['screen_name'];
            $user_id_for_likes= $data['retweeted_status']['id'];
            }
            $status_array=get_status($user_id_for_likes,$user_for_likes);
            echo $status_array['retweets'];
            ?>
            </td>
            <td class="nodot likes_tab">
            <?php
            if ($retweeted === false) {
            $user_for_likes= $data['user']['screen_name'];
            $user_id_for_likes= $data['id'];
            }else{
            $user_for_likes= $data['retweeted_status']['user']['screen_name'];
            $user_id_for_likes= $data['retweeted_status']['id'];
            }
            $status_array=get_status($user_id_for_likes,$user_for_likes);
            echo $status_array['likes'];
            ?>
            </td>
            <td class="comments_tab">
            <?php
            if ($retweeted === false) {
            $user_for_likes= $data['user']['screen_name'];
            $user_id_for_likes= $data['id'];
            }else{
            $user_for_likes= $data['retweeted_status']['user']['screen_name'];
            $user_id_for_likes= $data['retweeted_status']['id'];
            }
            $status_array=get_status($user_id_for_likes,$user_for_likes);
            echo $status_array['comments'];
            ?>
            </td>
            <td>
            <?php
            if ($retweeted === false) {
            echo $data['user']['screen_name'];
            }else{
            echo $data['retweeted_status']['user']['screen_name'];
            }
            ?>
            </td>
            <td class="alignleft">
            <?php
            foreach ($data['entities']['user_mentions'] as $key ) {
            echo "@".$key['screen_name']."<br>";
            }
            ?>
            </td>
            <td class="alignleft">
            <?php
            foreach ($data['entities']['hashtags'] as $key ) {
            echo "#".$key['text']."<br>";
            }
            ?>
            </td>
            </tr>
            <?php
            $n++;
            }
            ?>
            </tbody>
            </table>
            </div>
            </div>
            </div>
            </div>
            </div>
            <br>

            </section>
            <!--   ======================================================================  -->

            <div class="row">
            <div class="col-sm-12">
            <div class="w3-card w3-white w3-padding">
            <div>
            <div class="w3-right">
            <button type="button" class="btn btn-primary download_data_btn2"><b> Download Data
            <span class="fa fa-cloud-download"></span> </b>
            </button>
            </div>
            <div class="w3-left">
            Result based on Mentioning.
            </div>
            </div>
            <div class=" ">
            <div class="table-responsivep">
            <table class="table " id="user_tweets_table2">
            <thead>
            <tr>
            <th>No</th>
            <th>Date</th>
            <th>Tweet</th>
            <th>Link</th>
            <th>No.Retweet</th>
            <th>No.Likes</th>
            <th>No.Comments</th>
            <th>Username</th>
            <th>Mentioned</th>
            <th>Hashtags</th>
            </tr>
            </thead>
            <tbody class="w3-center">
            <?php
            //print_r($mentiondata_content['statuses']);
            $n=1;
            foreach ($mentiondata_content['statuses'] as $data) {
            $retweeted_hash=strpos($data['text'], "RT");
            ?>
            <tr>
            <td># <?php echo $n; ?>
            </td>
            <td class="datetb">

            <?php echo date("d-m-Y", strtotime($data['created_at'])); ?>
            </td>
            <td class="tweet_text">
            <?php
            if ($retweeted_hash === false)
            {
            $rdatas=get_tweets($data['id'],
            $oauth_access_token,
            $oauth_access_token_secret,
            $consumer_key,
            $consumer_secret);
            echo  $rdatas['full_text'];
            }else{
            $rdatad=get_tweets($data['id'],
            $oauth_access_token,
            $oauth_access_token_secret,
            $consumer_key,
            $consumer_secret);
            echo "<span class='badge'><i class='fa fa-copy w3-border'></i> </span>" .$rdatad['retweeted_status']['full_text']."</i></span>";
            }
            ?>
            </td>
            <td>
            <?php
            if ($retweeted_hash === false) {
            $user_for_likes= $data['user']['screen_name'];
            $user_id_for_likes= $data['id'];
            }else{
            $user_for_likes= $data['retweeted_status']['user']['screen_name'];
            $user_id_for_likes= $data['retweeted_status']['id'];
            }
            $url="https://twitter.com/".$user_for_likes."/status/".$user_id_for_likes."/";
            ?>
            <button class="btn btn-success btn_view" value="<?php echo $url;?>">
            View
            <span class="fa fa-eye"></span>
            </button>

            </td>
            <td class="nolik retweet_tab">
            <?php
            if ($retweeted_hash === false) {
            $user_for_likes= $data['user']['screen_name'];
            $user_id_for_likes= $data['id'];
            }else{
            $user_for_likes= $data['retweeted_status']['user']['screen_name'];
            $user_id_for_likes= $data['retweeted_status']['id'];
            }
            //echo get_retweets($user_id_for_likes,$user_for_likes);
            $status_array=get_status($user_id_for_likes,$user_for_likes);
            echo $status_array['retweets'];
            ?>
            </td>
            <td class="nodot likes_tab">
            <?php
            if ($retweeted_hash === false) {
            $user_for_likes= $data['user']['screen_name'];
            $user_id_for_likes= $data['id'];
            }else{
            $user_for_likes= $data['retweeted_status']['user']['screen_name'];
            $user_id_for_likes= $data['retweeted_status']['id'];
            }
            //echo get_likes($user_id_for_likes,$user_for_likes);
            $status_array=get_status($user_id_for_likes,$user_for_likes);
            echo $status_array['likes'];
            ?>
            </td>
            <td class="comments_tab">
            <?php
            if ($retweeted_hash === false) {
            $user_for_likes= $data['user']['screen_name'];
            $user_id_for_likes= $data['id'];
            }else{
            $user_for_likes= $data['retweeted_status']['user']['screen_name'];
            $user_id_for_likes= $data['retweeted_status']['id'];
            }
            //echo get_comments($user_id_for_likes,$user_for_likes);
            $status_array=get_status($user_id_for_likes,$user_for_likes);
            echo $status_array['comments'];
            ?>
            </td>
            <td>
            <?php echo $data['user']['screen_name']; ?>
            </td>
            <td class="alignleft">
            <?php

            foreach ($data['entities']['user_mentions'] as $key ) {
            echo "@".$key['screen_name']."<br>";
            }
            ?>
            </td>
            <td class="alignleft">
            <?php
            foreach ($data['entities']['hashtags'] as $key ) {
            echo "#".$key['text']."<br>";
            }
            ?>
            </td>
            </tr>
            <?php
            $n++;
            }
            ?>
            </tbody>
            </table>
            </div>
            </div>
            </div>
            </div>
            </div>







            <br>
            <!--   ======================================================================  -->

            <div class="row">
            <div class="col-sm-12">
            <div class="w3-card w3-white w3-padding">

            <div>
            <div class="w3-right">
            <button type="button" class="btn btn-primary download_data_btn3"><b> Download Data
            <span class="fa fa-cloud-download"></span> </b>
            </button>
            </div>
            <div class="w3-left">
            Result based on Hashtag.
            </div>
            </div>
            <div class=" ">
            <div class="table-responsivep">
            <table class="table " id="user_tweets_table3">
            <thead>
            <tr>
            <th>No</th>
            <th>Date</th>
            <th>Tweet</th>
            <th>Link</th>
            <th>No.Retweet</th>
            <th>No.Likes</th>
            <th>No.Comments</th>
            <th>Username</th>
            <th>Mentioned</th>
            <th>Hashtags</th>
            </tr>
            </thead>
            <tbody class="w3-center">
            <?php
            //print_r($mentiondata_content['statuses']);
            $n=1;
            foreach ($hashtagdata_content['statuses'] as $data) {
            $retweeted_hash=strpos($data['text'], "RT");
            ?>
            <tr>
            <td># <?php echo $n; ?>
            </td>
            <td class="datetb">

            <?php echo date("d-m-Y", strtotime($data['created_at'])); ?>
            </td>
            <td class="tweet_text">
            <?php
            if ($retweeted_hash === false)
            {
            $rdatas=get_tweets($data['id'],
            $oauth_access_token,
            $oauth_access_token_secret,
            $consumer_key,
            $consumer_secret);
            echo  $rdatas['full_text'];
            }else{
            $rdatad=get_tweets($data['id'],
            $oauth_access_token,
            $oauth_access_token_secret,
            $consumer_key,
            $consumer_secret);
            echo "<span class='badge'><i class='fa fa-copy w3-border'></i> </span>" .$rdatad['retweeted_status']['full_text']."</i></span>";
            }
            ?>
            </td>
            <td>
            <?php
            if ($retweeted_hash === false) {
            $user_for_likes= $data['user']['screen_name'];
            $user_id_for_likes= $data['id'];
            }else{
            $user_for_likes= $data['retweeted_status']['user']['screen_name'];
            $user_id_for_likes= $data['retweeted_status']['id'];
            }
            $url="https://twitter.com/".$user_for_likes."/status/".$user_id_for_likes."/";
            ?>
            <button class="btn btn-success btn_view" value="<?php echo $url;?>">
            View
            <span class="fa fa-eye"></span>
            </button>
            </td>
            <td class="nolik retweet_tab">
            <?php
            if ($retweeted_hash === false) {
            $user_for_likes= $data['user']['screen_name'];
            $user_id_for_likes= $data['id'];
            }else{
            $user_for_likes= $data['retweeted_status']['user']['screen_name'];
            $user_id_for_likes= $data['retweeted_status']['id'];
            }
            //echo get_retweets($user_id_for_likes,$user_for_likes);
            $status_array=get_status($user_id_for_likes,$user_for_likes);
            echo $status_array['retweets'];
            ?>
            </td>
            <td class="nodot likes_tab">
            <?php
            if ($retweeted_hash === false) {
            $user_for_likes= $data['user']['screen_name'];
            $user_id_for_likes= $data['id'];
            }else{
            $user_for_likes= $data['retweeted_status']['user']['screen_name'];
            $user_id_for_likes= $data['retweeted_status']['id'];
            }
            //echo get_likes($user_id_for_likes,$user_for_likes);
            $status_array=get_status($user_id_for_likes,$user_for_likes);
            echo $status_array['likes'];
            ?>
            </td>
            <td class="comments_tab">
            <?php
            if ($retweeted_hash === false) {
            $user_for_likes= $data['user']['screen_name'];
            $user_id_for_likes= $data['id'];
            }else{
            $user_for_likes= $data['retweeted_status']['user']['screen_name'];
            $user_id_for_likes= $data['retweeted_status']['id'];
            }
            //echo get_comments($user_id_for_likes,$user_for_likes);
            $status_array=get_status($user_id_for_likes,$user_for_likes);
            echo $status_array['comments'];
            ?>
            </td>
            <td>
            <?php echo $data['user']['screen_name']; ?>
            </td>
            <td class="alignleft">
            <?php

            foreach ($data['entities']['user_mentions'] as $key ) {
            echo "@".$key['screen_name']."<br>";
            }
            ?>
            </td>
            <td class="alignleft">
            <?php
            foreach ($data['entities']['hashtags'] as $key ) {
            echo "#".$key['text']."<br>";
            }
            ?>
            </td>
            </tr>
            <?php
            $n++;
            }
            ?>
            </tbody>
            </table>
            </div>
            </div>
            </div>
            </div>
            </div>

            <!-- ###########################################################################  -->
            <script type="text/javascript">
            $('.btn_view').click(function(){
            var url=$(this).val();
            var urlis="https://twitframe.com/show?url="+url;
            $('.statuses_body_frame').prop('src', urlis);
            $('#myModal').modal('toggle');
            });


            $('.save_userdata_btn').click(function(){
            var userdata=$(this).val();
            $.ajax({
            type: 'POST',
            url: 'save_user_data.php',
            data: { userdata: userdata },
            success: function(response) {
            alert(response);
            }
            });

            });


            function exportTableToExcel(tableID, filename = ''){
            var downloadLink;
            var dataType = 'application/vnd.ms-excel';
            var tableSelect = document.getElementById(tableID);
            var tableHTML = tableSelect.outerHTML.replace(/ /g, '%20');

            // Specify file name
            filename = filename?filename+'.xls':'excel_data.xls';

            // Create download link element
            downloadLink = document.createElement("a");

            document.body.appendChild(downloadLink);

            if(navigator.msSaveOrOpenBlob){
            var blob = new Blob(['ufeff', tableHTML], {
            type: dataType
            });
            navigator.msSaveOrOpenBlob( blob, filename);
            }else{
            // Create a link to the file
            downloadLink.href = 'data:' + dataType + ', ' + tableHTML;

            // Setting the file name
            downloadLink.download = filename;

            //triggering the function
            downloadLink.click();
            }
            }

            $('.download_data_btn1').click(function(){
            exportTableToExcel("user_tweets_table1","user_datas");
            });
            $('.download_data_btn2').click(function(){
            exportTableToExcel("user_tweets_table2","mentioned_datas");
            });
            $('.download_data_btn3').click(function(){
            exportTableToExcel("user_tweets_table3","hashtag_datas");
            });

            </script>
            <div id="myModal" class="modal fade" role="dialog">
            <div class="modal-dialog">

            <div class="modal-content">
            <div class="modal-body">
            <div class="statuses_body">
            <iframe class="statuses_body_frame" border=0 frameborder=0  style="height: 70vh;width: 100%;"
            src=""></iframe>
            </div>
            </div>
            </div>

            </div>
            </div>



            </body>
            </html>

            <?php include("footer.php"); ?>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search