The crawler used by facebook to read the opengraph meta tag from websites doesn't execute javascript thus making any angular website appear badly when shared on facebook
Detect if the website is been requested by a user and serve the actual app or a facebbok crawler and serve a static page rendered by the webserver.
This is a proof of concept of the solution in this file and is composed of three components a sinatra backend, a angular frontend served with a express webserver and a node script that will allow you to test it using localtunnel.js to create a tunnel to the angular and sinatra server making it visible from facebook directly from the local pc.
- ruby (2.4.1)
- node and npm
- tmux (optional but will make your life easier) op
- clone the repo
- install the dependecies
bundle installfrom thesinatra-BEfoldernpm install && bower installfrom theangular-FEfoldernpm installfrom the root folder
the simples way to test this app on a osx/linux machine is to simply run the session.sh script this will start tmux and split the terminal window in 3 panel with the front end in the top left corner, sinatra in the right top corner and the localtunnel script in the bottom, the angular panel will ask you for the backen url it can be found in the bottom panel.
To test this app without tmux simply open three teminal window/tab and run:
cd angular-FE && grunt build && npm startcd sinatra-BE && ruby app.rbnode localtunnel.js
osx: brew install tmux
linux: in any package manager
probably you'll use only this key combination:
ctrl + b then ← or ↑ or → or ↓ to move between panels
ctrl + b then x then y to close the active panel