Where to add custom javascript

General Discussion
  • I am using theme lavender and I want to implement facebook-like-box-for-pages in admin theme widget menu.

    To do so, I have to include this facebook Javascript SDK code on my page once, after body tag ( I will use this widget on homepage sidebar ) :

    <div id="fb-root"></div>
    <script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=520854318021267&version=v2.0";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
    

    Then, in admin widget menu, I will use home sidebar with html like this:

    <div class="fb-like-box" data-href="https://www.facebook.com/myfanpage" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true"></div>
    

    Where to insert this code in my app? Is it public src directory? I prefer to use this code as separate javascript e.g. facebook-like.js , so where to put it and how to require this script in order to be loaded on my home page ?

  • You can put that in the header.tpl file where it says to add it.
    Personally I would just create a partial template for things like that.

    As for the Facebook Like, you can put it in a sidebar widget and it should work.

  • @trevor thanks for advice. One more question : I created a new partial with name facebook-like.tpl in public/templates/patials directory .
    How to include this partial in header.tpl right after body tag ? I can not find some tutorials how nodebb partials works.

  • To add this facebook-like.tpl partial in the header.tpl you would use <!-- IMPORT -->.
    Add the following in your header.tpl;

    <!-- IMPORT partials/facebook-like.tpl -->

    The developers are constantly updating the documentation and adding new helpful articles and tutorials as time permits. For future references, I suggest you start here for further assistance;


    I hope this helps!

  • I used the iframe code in a widget with good results. Why reinvent the wheel!


Suggested Topics