Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including twitter-slider with all npm packages installed. Try it out:

var twitterSlider = require("twitter-slider")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

twitter-slider v1.0.0

Formats user's recent tweets to json for use in front end slider on website

Twitter Slider

A plug-in to populate your tweets into a slider for use on a personal website


Introduction

There are 2 parts to this project.

  1. The first part is a node script index.js that uses the twitter API to fetch statuses from a user. For tweets referring to links, the script attempts to follow them to find metadata used to make the "summary cards" (image, title, description, etc). Finally, the script saves the tweets to a file (www/tweets.json by default). The index.js script uses node-crontab to run and update the tweet file every 30 minutes (user customizable).

  2. The second part is the front-end slider in the www folder. It parses the json file generated by node and renders the object data into a Lean-Slider. Check out the live demo of the slider.

Installation

  1. Clone the project, cd to the project directory
  2. Run npm install
  3. Create the config.js file and add your Twitter API app credentials to this file.
$ cp config/config.js.editme config/config.js

Generate the JSON data source

  1. The node script is designed to run in the server background and can be run with forever to accomplish this.
$ npm install forever -g

$ cd the/path/of/twitter-slider
$ forever start index.js

The tweet objects produced in the json have the following structure:

[
  {
    "created_at": "Tue Dec 27 18:17:33 +0000 2016",
    "status_text": "“10 Tips to become a better Swift Developer” by @bobleesj https://t.co/aY3boA5Fv5",
    "url": "https://t.co/aY3boA5Fv5",
    "display_url": "medium.com/ios-geek-commu…",
    "metadata": {
      "title": "10 Tips to become a better Swift Developer – iOS Geek Community",
      "description": "So, you’ve been around with Swift for a couple of months. Now, you want to become a better Swift Developer? DRY, KISS, and not WET? I’ve got golden nuggets here and there for you. Excuse me for the…",
      "image_src": "https://cdn-images-1.medium.com/max/1200/1*Q01FTzw-urEgt0r8_leF4Q.png",
      "target_url": ""
    }
  },
  // etc
]

Front-end Slider

The slider is available in the www/ folder. You can create a symbolic link to your web server directory. For example, if you are using default Apache settings and your www folder is /var/www, type this:

$ ln -s path/to/twitter-slider/www /var/www/twitter-slider

Now you can access the slider here: http://yourdomain/twitter-slider

alt text

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free