Adds a Facebook Page RSS widget to the Apostrophe content management system
apostrophe-facebook is a widget for the Apostrophe content management system. Apostrophe lets you display an RSS feed for a Facebook Page in any content area.
In order to run the Apostorphe Facebook app in your Apostrophe project, you'll need to register your app with Facebook through their developer portal. Once you've registered your app, you'll need both the App ID and the App Secret in order to configure the Apostrophe Facebook module. That configuration happens in the app.js of your project along with the other modules:
modules:apostrophe-facebook:fbAppId: 'xxxxxxxxxxxxxxx'fbAppSecret: 'xxxxxxxx'
Now that we've got the widget configured, we can simply add it to our template and use the bundled template in the module (we'll override that later). In your template, simply add "apostrophe-facebook" to the controls array in your
aposAreapage 'main' controls: 'style' 'bold' 'italic' 'facebook'
Out of the box, the apostrophe-facebook module depends on a data-attribute driven template to render a Facebook feed on the client side (which allows the widget to load independently of the page). Here's the basic template included in the module itself:
Any of the markup in this template can be adapted to your project's needs so long as you include the appropriate data-attributes in this template (you can also omit anything that doesn't fit your needs). Note that the classes in this example are there only for the default styles and therefore should likely be changed in your projects template. To create a project-level template, simply add a file called
facebook.html in the views folder of your project-level override of the apostrophe-facebook module:
lib > modules > apostrophe-facebooks > views.
Because the apostrophe-facebook widget is loaded on the client-side, we're taking advantage of the
apos.widgetPlayers object to load the widget, specifically in the
apos.widgetPlayers.facebook.afterLoad() allows you to add your own custom callback to the widgetPlayer. This function will fire at the conclusion of the load and you have access to
$el as well as the
posts object which is the response that our server returns when the widget loads. Here's an example that you might find in a
//Make the first post in the widget$elfind'[data-apos-post]'eq0css'color' 'red';//Send the posts object to the console for inspectionconsole.logposts;
- [x] Build it
- [x] Publish to NPM
- [x] Switch loader logic to browser-side player (like Twitter)
- [ ] Clean up caching to make sure you get new data on save
- [ ] Build some nice basic styles
- [ ] Write some tests?