An angular directive for getting Facebook, Twitter and Instagram posts.
JavaScript HTML PHP
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
js/bower_components initial commit Feb 27, 2015
src
tests initial commit Feb 27, 2015
LICENSE initial commit Feb 27, 2015
README.md added localStorage support Mar 12, 2015
bower.json

README.md

Description

A simple angular directive that gets the latest entries from Twitter, Facebook, Instagram. Can/must be templated by yourself.

Installation

Download manually or through bower:

$ bower install fxstr-social-stream

Plugin requires angular.

Usage

  1. Use $sce to display the HTML returned in the fields title and text in your template.

  2. Include fxstr-social-stream.js in your scripts:

    <script src="bower_components/fxstr-social-stream/src/fxstr-social-stream.js"></script>
  3. Load fxstr.socialStream in your angular module definition:

    angular.module( 'myModule', [ 'fxstr.socialStream' ] );
  4. If you'd like to use Facebook:

    Since ~2011, Facebook requires you to provide an access token, even when accessing the feed of a public page (yeah, I know). As you should (really!) not publish your access token in your javascript code, we use a simple PHP script that acts as a proxy, as the PHP code is not publicly accessible.

    1. Generate an access token. Make sure it doesn't expire. Here's a good tutorial.
    2. Make really sure it doesn't expire: Use it with the Graph Explorer, use the Debug (access token) tool.
    3. Copy the PHP script you'll find in this repo under /src/facebook-proxy.php (a node version might follow) to your site.
    4. Insert your access token into the PHP script.
  5. If you'd like to use Twitter:

    1. Visit Settings, then Widgets (direct link). Create a new widget.
    2. Note your widget's ID (take it from the URL: https://twitter.com/settings/widgets/[YOUR_WIDGET_ID]/edit)
  6. If you'd like to use Instagram:

    1. Generate an access token with read_stream privileges (your own stream will be displayed).
    2. Visit the instagram API console
    3. Chose OAuth as the authentication method.
    4. You will be redirected to https://instagram.com/oauth/authorize…
    5. From this URL, remove the scope params ( i.e. ?scope=likes+relationships& )
    6. Connect. Then in the API console, make a simple call (e.g. to /users/self/feed).
    7. Your API token will be visible in the URL that's being called.
  7. Add the social stream direcitve to your DOM:

    <div data-social-stream
      data-social-stream-facebook-page="'myPage'"
      data-social-stream-facebook-proxy="'/path/to/your/facebook-proxy.php'"
      data-social-stream-instagram-token="'instagramToken'"
      data-social-stream-instagram-user-id="'instagramUserId'"
      data-social-stream-twitter-id="'myWidgetId'"
      data-social-stream-caching-time="'60'">
    </div>

    The attribute data-social-stream-caching-time sets the time for which the stream may be cached in the local storage; this saves a lot of requests if your users view a lot of pages/visit. If you set it to 60, the stream will only be fetched every 60 min and in the meantime be stored in the user's browser (local storage). If it's not set, localStorage is not used.

  8. Create the template (id must be socialStreamTemplate, type `text/ng-template)

      <script type="text/ng-template" id="socialStreamTemplate">
        <ul>
          <li data-ng-repeat="post in posts | orderBy : 'publishDate' : true">
            <span>{{post.publishDate}}</span>
            <img data-ng-attr-src="{{post.image}}" />
            <p>{{ post.title }}</p>
            <small> {{ post.text }} </small>
            <div><span data-ng-repeat="action in post.actions"> | {{ action.count }} {{ action.name }} |</span></div>
            <a data-ng-attr-href="{{post.originalLink}}">{{ post.source }}</a> von <a data-ng-attr-href="{{post.author.link}}">{{post.author.name }}</a>
            <a data-ng-attr-href="{{post.link}}">link</a>
          </li>
        </ul>
      </script>