Hack Day Project: A Cool Facebook Feed for Community-Based Organizations

Background

Community-based non-profit organizations (such as charity organizations, church groups, sports clubs, etc.) often have an official website and a Facebook page.

The official website is for more formal announcements and relatively static information that is controlled by a group of administrators or collaborators. Most of these websites are managed by a content management system (CMS) such as WordPress, Wix, or Google Sites. They also normally have a unique domain name and URL (for example, www.awesome-group.com).

The Facebook page is the social media platform for all the members (staff and volunteers connected with the organization) and non-members (other Facebook users) to interact with each other by sharing information, comments, photos, or videos. The content can come from members or non-members.

In most of the groups I or my family members have participated in, there is a disconnect between the website and the Facebook page. Wouldn’t it be nice to have a super cool Facebook feed embedded into the official website?

Opportunity

ACL’s R&D teams regularly have Hack Days and Lunch & Learn events at the department level, and Security Friday and Book Club events at the team (or brigade) level.

You can find out more about Hack Day or Hackathon on this Wiki page. At ACL’s Hack Day, anyone can present an idea or a number of ideas that an individual or a group can work on. The idea can be either work-related or not work-related.

In the recent years, ACL R&D department had many opportunities giving back to the community. One good example was that Daniel, Yijia and Alex went to Prince George for an “Hour of Code” event (click here for details). People also discussed a Hackathon for Local Charities via Slack.

Daniel mentioned “Hackathon for Local Charities” in our Slack channel

Therefore, I decided to use an ACL Hack Day to build something useful for the community-based non-profit organizations.

This article is first of 3 articles series and it is based on the Hack Day project I did in October 2015.

The 3 articles:
1. Hack Day Project: A Cool Facebook Feed for Community-Based Organizations.
2. Security Friday Sharing: Man in the Middle Attack - A Common Risk for Community-Based Organizations
3. Security Friday Sharing: Enable “Free” HTTPS (Secure) to the website

In this article, I used:

Beginning Research

Since the end goal was for community-based organizations and non-technical administrators, I setup the following criteria for the MVP (minimum viable product):

  • a very cool Facebook feed
  • low cost (free is the best)
  • low maintenance
  • easy integration (embedding into an existing website)
  • secure (this is a MVP+ item)

After some Googling around, I found this awesome Facebook feed called “Meteor Facebook Feed” by Cristian Ambrozie. This “Meteor Facebook Feed” has pretty cool posts arrangement UI effects and the code is straight forward and clean. I never used Meteor framework before, so I thought it would be a great learning opportunity for me.

Here are some demo Facebook feed sites and their associated Facebook sites:

When visiting the demo sites, make sure you scroll up and down, change the browser window size, and zoom in and out to see the effects. My favourite feature is the “Infinite scroll to load more posts.

Facebook feed demo sites zoom out vs. in

In order to use this GitHub repository, here was the game plan:

  1. Setup the application locally
  2. Customize the code for the demo organization
  3. Deploy the customized application in the Cloud
  4. Embed the Facebook feed into the demo site
The game plan

Step 1: Setup the application locally

The very first step in the overall process was to setup this meteor-facebook-feed application locally in my MacBook Pro. At the end of step 1, I should have the default meteor-facebook-feed application running in my machine using port 3000. 
Here are the high level steps from meteor-facebook-feed GitHub Repo:

* Download / Clone the repository 
* Navigate to your project directory
* Update 'appId' and 'secret' in the private/facebook-config.js file
* Start the Meteor application with meteor
* Open http://localhost:3000 in your browser
Notes:
* For reference, the meteor installation can be found here:
https://www.meteor.com/install
* For Facebook “appId” and “secret”, Google “Facebook appId and secret.” There are many links (also YouTube tutorials) with detailed steps. For security and privacy reasons, I strongly recommend to use a new Facebook account.
Steps to have the default Facebook feed application running locally
* Click the [Change page] and change to desired Facebook ID.  
* The Facebook feed source is changed to "aclservices" here:
Change the Facebook feed source

Step 2: Customize the code for the demo organization

Once I had the default application up and running locally, I started to customize the code and verify the changes. Firstly, I wanted to make the application headless, and then make the overall layout more compact with narrower margins and smaller post cards width. Finally, I wanted to hardcode the application to use only the desired Facebook account.

2.1 Edit the “index.html” to comment out or remove the header section.
* You can either remove or comment out the code between “<div class=”container”>” and <div class=”row posts-row”>.  
* I used HTML comment tag (www.w3schools.com/tags/tag_comment.asp) here.
Comment out the header and the result
2.2 Change the style to be more compact and narrow.

Since I planned to embed the Facebook feed into an existing web site using an iFrame tag (www.w3schools.com/tags/tag_iframe.asp), I needed to have narrower margins and smaller post cards to accommodate a side navigation panel. I accomplished this by changing the CSS related files. I also added the [target=”_new”] to support a click-to-open new tab behaviour within the iFrame.

Please note that I made some very simple changes for demonstration purposes. Feel free to be very creative when trying this yourself.

index.html
1 Change [col-md-offset-1] to [col-md-offset-0]
2 Change [columnWidth=300] to [columnWidth=250]
3 Add [target=”_new”] after [a href=”{{link}}”] (3 changes)
style.css
1 Change [width: 300px;] to [width: 250px;] for [.postItem]
Please refer to https://getbootstrap.com/css/ for Bootstrap's CSS.
Style changes in index.html and style.css.
Before and after the style changes, mainly the margins and post box width
2.3 “Hardcode” the Facebook feed location

After step 2.2, the default Facebook feed source was “1mpics”. I needed to change it to “aclservices”.

In additional to the default Facebook feed, the original code base also supports multiple tenants and is basically open to any Facebook account. All you have to do is change the URL from “social/aclservices” to “social/anotherFacebookId”.

Since non-profit organizations will be the ones hosting this in the Cloud, I needed to make it less open to avoid EDoS (Economic Denial of Sustainability) and DoS (Denial Of Service) attacks. In the future article, I’ll describe how to use a free firewall to enhance the defence mechanism.

Here is a very simple way to hardcode the Facebook ID. It is easy to expand the mechanism to support pre-defined Facebook feeds (multiple tenants feature).

routes.js
* change the “1mpics” to “aclservices”
index.js
* set the variable [fbPage] to [‘aclservices’] (2 changes)
“Hardcode” the Facebook feed location

Step 3: Deploy the customized application in the Cloud

This hack day project was originally done using AWS. We use AWS extensively in ACL. The infrastructure team (or Jedi team) continuously improves ACL GRC infrastructure with many best industry practices. You can find more details in the articles by Peter Smith and Payam Moghaddam.

But AWS can be very expensive for community-based organizations.

I looked into several alternatives and narrowed down to DigitalOcean and Heroku. Since this is not a global application (in other words, 24X7 is not a requirement), Heroku free tier was my choice (it can be upgraded to Hobby tier for 24X7 uptime).

Please note that I skipped the details of installing Heroku Toolbelt, Heroku signup, and MongoLab signup. You can refer to the following links for more information:

Note: After registering with MongoLab, create a new MongoDB database (they give 500MB for free) and a database user and write down the connection information. The Facebook feed application itself does not use database, however, a database connection is needed for Heroku meteor stack setup. Therefore, this database is just a dummy database.

I needed to provide my credit card information to Heroku in order to get meteor deployed in Heroku due to the need of meteor-buildpack. But I never got charged because I only use Heroku free tier and MongoLab free database. You can refer to the following links for more information about deploying meteor applications on Heroku:
* http://justmeteor.com/blog/deploy-to-production-on-heroku/
* http://www.growthux.com/ux-html-css-js-growth-hack/installing-meteor-on-heroku

Create and setup Heroku app
$ heroku create aclfacebookfeed
$ heroku buildpacks:set https://github.com/AdmitHub/meteor-buildpack-horse.git
$ heroku config:set ROOT_URL=https://aclfacebookfeed.herokuapp.com
$ heroku addons:create mongolab:sandbox
$ heroku config:set MONGO_URL=mongodb://aclfacebookfeed:YourPassword@dsNNNNNN.mlab.com:NNNNN/aclfacebookfeed
Setup a meteor stack application in Heroku
Setup the database and user in MongoLab, then setup connection info in Heroku
Deploy (publish) the application to Heroku
$ git add .
$ git commit –m “Facebook feeds customization for aclservices”
$ git push heroku master
Publish the application to Heroku
Facebook Feed application is up and running in Heroku

Step 4: Embed the Facebook feed into the demo site

Once I had the Facebook Feed application running in Heroku, I embedded it into the demo site. For demo purposes, I used the old “Google Sites,” a CMS that Google hasn’t supported for a long time (I just learned that in June 2016, Google introduced a complete rebuild of the Google Sites platform.)

The old “Google Sites” is one of the most restricted CMS I have used. The iFrame properties I can configure is very limited and basically no JavaScript can be embedded. If I can make this Facebook feed into the demo site nicely, I believe it can be done even better in other CMS.

To embed the Facebook feed into the demo site, I needed to use iFrame gadget and configure the source and the size of the iFrame. That was pretty much all I need to do.

The demo site without the Facebook Feed
Google Sites iFrame Gadget Configuration
Demo site with Facebook Feed embedded

Summary

I used the Hack Day opportunity to learn many new things, including the meteor framework, Heroku meteor stack, MongoLab, and the process of building a Facebook feed application. I hope some community-based non-profit organizations will benefit from my sharing and I have shared this idea with a number of organizations.

The experience from a Hack Day is always very rewarding. However, the end result is normally not complete. Here are some ideas for further development:

  • In order to provide better user experience, create a cron job (or scheduled task) to curl the Facebook feed site every 25 minutes during the day time hours. Heroku will put the dyno into sleep mode if there is 30 minutes of inactivity.
  • Remove all the unused code (especially Java Script) in the source code.
  • Enhance the application to support pre-defined multiple tenants using a configuration file.
  • Enhance the application to support postings from multiple sources (all the sub-groups in a community) using a configuration file.