twitter-slider

1.0.0 • Public • Published

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

Dependencies (3)

Dev Dependencies (0)

    Package Sidebar

    Install

    npm i twitter-slider

    Weekly Downloads

    0

    Version

    1.0.0

    License

    MIT

    Last publish

    Collaborators

    • gmarzloff