Skip to content
Populate a fading slider with data from recent tweets
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
config
www
.gitignore
LICENSE
README.md
index.js
meta_utils.js
package.json

README.md

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
]

Notes

The index.js script retrieves data from a twitter feed, and then if there are insufficient properties stored for a tweet, the url is followed to the final target using needle, and any useful metadata are merged from that location.

If you are running this on an https web server, any fetching of http:// files (i.e. the preview images) may give you a warning in the browser. To check for and prefer https image URLs, keep settings.prefer_https true (default:true) in meta_utils.js.

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

You can’t perform that action at this time.