Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/apostrophecms-legacy/apostrophe-twitter-widgets

Twitter for Apostrophe 2
https://github.com/apostrophecms-legacy/apostrophe-twitter-widgets

Last synced: 1 day ago
JSON representation

Twitter for Apostrophe 2

Awesome Lists containing this project

README

        

[![CircleCI](https://circleci.com/gh/apostrophecms/apostrophe-twitter-widgets/tree/master.svg?style=svg)](https://circleci.com/gh/apostrophecms/apostrophe-twitter-widgets/tree/master)

# apostrophe-twitter-widgets

apostrophe-twitter-widgets is a module for the [Apostrophe](https://apostrophecms.com) content management system. apostrophe-twitter-widgets lets you add a Twitter feed to any content area created with Apostrophe.

## Requirements

Due to Twitter's API access policies, you must [register a Twitter "app"](https://dev.twitter.com/) to use this module. The `consumerKey` and `consumerSecret`, `accessToken` and `accessTokenSecret` options must be set when initializing the module. After registering your app on dev.twitter.com, click "create my access token." Then refresh the page as Twitter usually fails to display the token on the first try.
nodemon

## Setup

Adding this module is as simple as:

```
npm install apostrophe-twitter-widgets
```

And in your app.js file:

```javascript
modules: {
... other modules ...
'apostrophe-twitter-widgets': {
consumerKey: 'get',
consumerSecret: 'your',
accessToken: 'own',
accessTokenSecret: 'credentials'
},
... yet more modules ...
}
```

Now it will be included in the default set of controls. If you are setting the `controls` option on your areas, the widget's name is `twitter`.

To insert it as a singleton, you might write:

```markup
{{ apos.singleton(data.page, 'twitter', 'apostrophe-twitter', { limit: 3 }) }}
```

If you want the same feed to appear on many pages, you might use the `global` doc:

```markup
{{ apos.singleton(data.global, 'twitter', 'apostrophe-twitter', { limit: 3 }) }}
```

## Options

### limit

The `limit` option controls the number of tweets to be displayed, at most. The `limit` option defaults to `3`.

## aposTwitterReady

Once the tweets have been fully loaded into the template, a jQuery event called 'aposTwitterReady' fires on the body element. If you are manipulating the tweets on the front-end, you will want to listen for `aposTwitterReady`, rather than other DOM events. If you don't, the tweets may take a few seconds to load and your wonderful functions will fire before the tweets are accessible.

You can then target the twitter widget easily. For example:

```javascript
$('body').on('aposTwitterReady', '.apos-widget', function() {
$widget = $(this);
$widget.find('.apos-tweets').makeThemMoreAwesome();
});
```

Enjoy!