How to add a “jobs” tab on your Facebook page

Note: 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




Copy everything in the “Javascript” tab in Codepen.



Paste that into the same area, on the bottom of the existing code.

 

Put it inside a <script> tag, like this :

 

<script type="text/javascript">

 

[ -- PASTE THE CODE HERE --]

 

</script>




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 and click on “view compiled”, to the right in the CSS frame.



Copy the contents.

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.

 

<style>

 

[-- PASTE CSS HERE --]

 

</style>



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:

 

Have more questions? Submit a request
Powered by Zendesk