||You will need to know a bit of HTML/CSS to implement this on your Facebook page!|
Go to “Static HTML: iframe tabs” in Facebook, or click this link: https://apps.facebook.com/static_html_plus/ (This is a third party tool not supported by Lever — email the developer if you have any questions specifically about the Static HTML: iframe tabs tool).
Add this app to your page
Click ‘edit tab’ on your new tab
Find one of our API examples on Github — https://github.com/lever/postings-api
(You can also write your own, but in this tutorial we’ll use an example.)
Choose the first one.
Copy everything in the “HTML” container in Codepen.
Paste it into the Static HTML iframe tool
Paste that into the same area, on the bottom of the existing code.
Put it inside a <script> tag, like this :
[ -- PASTE THE CODE HERE --]
Now, if you want to make your jobs look a little fancier, you can copy the CSS also. (But this is optional).
Go to Codepen - You'll need to get the Compiled CSS. If you see CSS (Stylus) in the top left corner like in the below screenshot, then you’ll want to press the carat in the top right, and select “View Compiled CSS”. Copy the contents.
If you see CSS Compiled in the top left like in the screenshot below, then all you need to do is copy the CSS!
Paste the CSS into the top of the document, below the <head> tag. Add a style tag to the beginning and the end of the CSS, like this.
[-- PASTE CSS HERE --]
If we look at ‘preview’, the page should look something like this:
If you want to change the name of the tab, go to ‘tab name & image’.
Now you can click ‘save and publish’ and go back to see your new tab in action. It should appear something like this: