Custom facebook button being overwritten by certain interactions with the forum


(Shayden Martin) #1

We have a custom inserted facebook button on the header bar, that indicates to users that they can register to the forum with facebook before the registration modal is actually displayed. Right now this button just mimics the action of the register button. This is done via the css/html editor in the Discourse admin panel, please see code below:

<script type="text/javascript">
    $(document).ready(function() {
        var action_id = $('.sign-up-button').attr('data-ember-action');
        var fb_button = '<button class="btn btn-primary facebook-login" data-ember-action="' + action_id + '">Connect with fb</button>';
        $('.sign-up-button').after(fb_button);
    });
</script>

The only issue with this button is that certain interactions with the forum, such as opening a topic, seem to override the header without triggering a new page load, thus our button is not inserted in the newly loaded header.

As a quick fix, I have the same script that inserts the button in a jquery event listener to replace it in case the header is re-loaded but the page is not. See below:

<script type="text/javascript">
    $(document).ready(function() {
        var action_id = $('.sign-up-button').attr('data-ember-action');
        fb_button = '<button class="btn btn-primary facebook-login" data-ember-action="' + action_id + '">Connect with fb</button>';
        
        if ($('.facebook-login').length < 1 ) {
            $('.sign-up-button').after(fb_button);
        }
        
        $('body').mousemove(function() {
            if ($('.facebook-login').length < 1 ) {
                $('.sign-up-button').after(fb_button);
            }
        });
    });
</script>

However, this is obviously not an ideal solution.

I was hoping that someone with more Discourse/EmberJS experience might be able to offer a better solution, so that end user does not notice when the button is inserted after a header reload, as is, if the user does not move the mouse it is quite noticeable that the button is not added immediately with the header.

Thanks for any help you can offer.


How to show Facebook connect button next to "register"?
(Khoa Nguyen) #2

In my opinion, you should overwrite the header template instead
https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/templates/header.hbs

See my post :


(Shayden Martin) #3

This was enormously helpful, thank you.

Ideally, we would actually like to open the modal and initiate the facebook login/registration process with that button, if you have an opinion on how best we could do that as well it would be greatly appreciated.


(Khoa Nguyen) #4

Sorry. I can’t help you on this. Here is what I can find so far : discourse/login-buttons.js.es6 at a0d0f859ba9220ebad4aea756b339ac1bc2e02bc · discourse/discourse · GitHub


(Shayden Martin) #5

Alright, thanks anyway.


(Shayden Martin) #6

Other changes to the template aren’t being rendered on mobile, is there a separate template for that?


(Khoa Nguyen) #7

Yes there are. You have to overide mobile template too


(Rodrigo Farcas) #8

Hey
How is the mobile template for that called?


(Khoa Nguyen) #9

Just paste it in mobile tab

But you should find use mobile template to modify it :smile: