title: How to show the hashtag count from Twitter on a web page
body: <p>I am trying to figure out the best way to show the count of a specific hashtag from Twitter on a web page. I assumed this would be a fairly easy task, but I am running into a little confusion. The goal ultimately is to show the count when the page loads. It does not have to be dynamic, just run the request when the page loads. </p>
  
  <p>Ive got a Twitter Dev account, but I dont see how to grab the hash count anywhere in the docs. </p>
  
  <p><a href="https://developer.twitter.com/en/docs" rel="nofollow noreferrer">https://developer.twitter.com/en/docs</a></p>
  
  <p>I also found this: <a href="https://github.com/cstephen/hashtag-count" rel="nofollow noreferrer">https://github.com/cstephen/hashtag-count</a> which is doing what I want, but via npm. I don't know how I would take that object from a gulpfile to vanilla javascript to show it in html. Also, having it in gulp would mean I would need to setup a runner on the server. </p>
  
  <p>So far Ive got this: </p>
  
  <p><strong>The gulp path:</strong></p>
  
  <pre><code>var hc = new HashtagCount({
    'consumer_key': '...',
    'consumer_secret': '...',
    'access_token': '...',
    'access_token_secret': '...'
  });
  
  // Array of hashtags to tally. Do not include # prefix.
  var hashtags = ['superbowl', 'pizza', 'beer'];
  
  // Hashtag tallies for each time interval will be added to the results object.
  var interval = '30 seconds';
  
  // Delete data older than this.
  var history = '5 minutes';
  
  // Called at the end of each time interval.
  var intervalCb = function (err, results) {
    if (err) {
      console.error(err);
    } else {
      console.log(results);
    }
  };
  
  // Open a connection to Twitter's Streaming API and start capturing tweets!
  hc.start({
    hashtags: hashtags,       // required
    interval: interval,       // required
    history: history,         // optional
    intervalCb: intervalCb,   // optional
  }); 
  </code></pre>
  
  <p>If I go this route, </p>
  
  <p>A: How do I get this object into javascript, to show the integer in html?</p>
  
  <p>B: How would I set this up on a server to run the gulp task incrementally?</p>
  
  <p>Am I missing a simpler solution?</p>
  
  <p><strong>UPDATE</strong>
  <a href="https://i.stack.imgur.com/NtKpB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NtKpB.png" alt="enter image description here"></a></p>
  
  <p>Ive got the npm exmaple version working. I just need to get that data from Gulp to html. </p>
  
  <p><strong>My html so far</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;title&gt;Hashtag Counter&lt;/title&gt;
      &lt;link rel="stylesheet" href=""&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h1&gt;Total Hashtag Count&lt;/h1&gt;
      &lt;p id="hashCount"&gt;Replace this string with the hashtag count&lt;/p&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>