Fakebook Theme

Hi @awesomerobot, comparing this theme to dev.to, is there a way to show all categories listed, rather than within a drop-down menu, on the left-hand side? Furthermore, I remember meta testing out a theme that let users follow categories to fine-tune/specify their activity stream – is this functionality available, and can it be combined with Fakebook?

Following in the footsteps of this theme’s inspiration, Fakebook now has a modern update!

This new theme is available under the name ‘Fakebook Modern’.

Don’t worry though! Fakebook Classic will still be available for you to enjoy

As always, if you see something that looks off, just let us know!

Hello,

Have a problem with fakebook and modern fakebook theme. On the right sidebar. This script should not load to logged out visitors. Is there any idea to load this script only the logged in users? Thank you

<!-- Custom sidebar widget -->

<script type="text/discourse-plugin" version="0.8">
  const ajax = require('discourse/lib/ajax').ajax;

  let currentUser = Discourse.User.currentProp('username');

  api.registerConnectorClass('discovery-below', 'sidebar', {
    setupComponent(args, component) {
      ajax("/u/" + currentUser + "/summary.json").then (function(result){

        stinkinBadges = [];

        userLikesReceived = result.user_summary.likes_received;
        userLikesGiven = result.user_summary.likes_given;

        result.badges.forEach(function(badges){
          stinkinBadges.push(badges);
        });

        component.set('userLikesReceived', userLikesReceived);
        component.set('userLikesGiven', userLikesGiven);
        component.set('stinkinBadges', stinkinBadges);
        component.set('userName', api.getCurrentUser().name);
        component.set('user', api.getCurrentUser().username);

      });

    }

  });
</script>

The error code is:

Hello again,

I just made it. It works with no errors but can anyone check my code is correct? Thanks

<!-- Custom sidebar widget -->

<script type="text/discourse-plugin" version="0.8">
  const ajax = require('discourse/lib/ajax').ajax;
if(api.getCurrentUser() != null) {
  let currentUser = Discourse.User.currentProp('username');

  api.registerConnectorClass('discovery-below', 'sidebar', {
    setupComponent(args, component) {
      ajax("/u/" + currentUser + "/summary.json").then (function(result){

        stinkinBadges = [];

        userLikesReceived = result.user_summary.likes_received;
        userLikesGiven = result.user_summary.likes_given;

        result.badges.forEach(function(badges){
          stinkinBadges.push(badges);
        });

        component.set('userLikesReceived', userLikesReceived);
        component.set('userLikesGiven', userLikesGiven);
        component.set('stinkinBadges', stinkinBadges);
        component.set('userName', api.getCurrentUser().name);
        component.set('user', api.getCurrentUser().username);

      });

    }

  })};
</script>

need to adjust the position of the title, text and some parts

iPhone 6s

Desktop

Hello,
Create a theme component and add this code to the mobile css.

.regular .container.posts{
    width: 100%;
}

The other is the cta sign up on desktop css:

.signup-cta{
    margin: 0;
}

better to wait for the theme creator to update

That’s why I said create a theme component because you can simple delete it when the theme updated and it’s good until they not update the theme. But if you don’t want to use it in production then wait.

The above issues have been fixed.

@Don thanks for bringing the issue of running this script even though a user wasnt logged in. This has also been fixed.

Hello Jordan,

Has got errors when a new user register. The right sidebar not shown any information except welcome text and subhead but without name. So i know it shows the likes if there are some and badges too. Is that possible to make this sidebar to show likes and badges fix? I mean 0 recieved , 0 given and no badges. You don’t have any badges yet… Check out how you get some… or something like this. So text or link if no badges yet.

Thank you!

The error code is for badges:

I would like to modify it as below.
However, it does not work on the mobile screen.
Can someone please help me on what to do.

I would like to make the link work for the topic excerpt and image.

{{~raw-plugin-outlet name="topic-list-after-title"}}
{{#unless topic.image_url}}
  {{#if topic.hasExcerpt}}
    <a href="{{topic.lastUnreadUrl}}" class="topic-excerpt-link">
      <div class="topic-excerpt-box">
        {{raw "list/topic-excerpt" topic=topic}}
      </div>
    </a>
  {{/if}}
{{/unless}}
{{#if topic.image_url}}
<a href="{{topic.lastUnreadUrl}}" class="topic-excerpt-link">
<div class="topic-image">
  <img src="{{topic.image_url}}" />
</div>
</a>
{{/if}}

This is the site I am testing.

Use this in mobile header
<script type='text/x-handlebars' data-template-name='mobile/list/topic-list-item.raw'> . . . </script>

iPhone 6S

I am testing this on Xcode simulator with iphone 6S and am not encountering this issue.

I have a couple questions:

Is this screenshot of you using meta.discourse.org ?
Which version of iOS are you using?
Which web browser?

Thanks

Does anyone try to play short video upload direct to discourse with Facebook theme on iOS phone?

Should I have missed something on config, but I can not play any uploaded video on phone. It’s working well on computer.

Any embedded video from Youtube working.

That why I do not know what happened, no errors, no warning.
So please advice

Yes, it is work perfect for me on any device. I think a theme is hard to cause this issue.
Did you try to play in safe mode?
Can you post the topic where the video so can check it.

Hi @Don
Yes, you should try at below link:
[Sưu tầm] Chuyên mục cười À ra Thế ! của Dr. VL - À ra Thế

Just tested and make sure that can not run on my iOS 11,

iOS 11 is pretty outdated that cause the problem. I can play the video without any problem on iOS 14 and it works great.

@Don Noted,

Thank you

This is fantastic!

Also… is it possible to add a link to the sidebar intro area?

where’s the link to add the theme?

Hey I am learning discourse theme / plugin development. I really like Fakebook theme and I am using it to develop my understanding but I have a few questions.

The “javascripts/discourse/templates/mobile/list/topic-list-item.hbr” has 100% subset duplicate code from the “common/header.html”

My questions:

1. Isn’t there a way to include a bhr file into html file so that we can just include topic-list-item.hbr into the common/header.html file instead of duplicating the code in two places?
2. Why do we need topic-list-item.hbr in the first place? Shouldn’t the files in common folder apply to both: desktop and mobile?

I don’t believe so… normally I could make a component that uses one template, and then I could include for the component in both overrides… but our topic list items are a special type of template built for performance (hbr = handlebars raw template), and raw templates can’t use components. (Some previous discussion in Mounting widget in raw template? - #7 by angus)

That’s how Discourse’s CSS is structured (and some special HTML files for themes like header/footer/etc), but within the javascripts/discourse/templates directory those templates are direct overrides of Discourse defaults (when there’s not an override, the default templates are used).

In Discourse there are two templates: /templates/list/topic-list-item.hbr and /templates/mobile/list/topic-list-item.hbr. So since there are two templates, we need two overrides.

Maybe there’s an easy way to point mobile to the non-mobile template in the JS… but if there is I’m not aware of it!

Spoke too soon! I took a look and actually figured this out soon after I posted the above response. Sometimes writing things out can do that.

I’ve made an update so it’s just one template… by default in topic-list-item.js we have some code that looks like:

  renderTopicListItem() {
    const template = findRawTemplate("list/topic-list-item");
    if (template) {
      this.set("topicListItemContents", template(this).htmlSafe());
    }
  },

so if I override const template in the theme…

  renderTopicListItem() {
    const template = findRawTemplate("list/custom-topic-list-item");
    if (template) {
      this.set("topicListItemContents", template(this).htmlSafe());
    }
  },

This now points to a separate template, and since there’s no mobile counterpart by the same name… it also gets used for mobile. Thanks for inspiring the change with your question @hyd504!

That’s really nice! I just changed on my site with Fakebook Modern theme Thank you so much!

@awesomerobot @Don

can you guys share links to some sample forums where I can see this theme in action?

Hello,

Sure, you can see the Fakebook theme in theme creator:

Mine contains relatively much modification but you can see it here:

Thanks @Don .

Just to double check the Preview points to GitHub - discourse/fakebook-modern theme?

Yes that is correct. The first what I quote is Fakebook theme and the second one what I use is Fakebook Modern theme.

Hey, @Don https://theme-creator.discourse.org/ shows the latest topics directly, how do I configure this? I currently see categories as well which I don’t want to show in the center column to give the feel like a Facebook feed.

You can configure it in admin settings. Or as a User in user settings.

As a User:

You can select in the interface area. Click here! and change the Default Home Page section.

As an Admin:

Go to this page: /admin/site_settings/category/all_results?filter=Top%20menu

And change this section:

Thanks @Don

This is exciting stuff. I wonder if there is a plugin that I can add which will allow me to have an entire suite of emojis on the “posts”? Well, I am essentially trying to explore if I can migrate my community from FB to Discourse to get more control over the data and have some on platform SEO advantages.

This theme is actually quite good, but doesn’t it provide a way to have Custom CSS/HTML like the light and dark theme provide? I would have wanted the In House Ads to show in this theme but there’s no way to writer custom CSS in this theme…

Moreover, if we have category style to BOX then, the height of box is quite big.

Have a look here

You never needed to edit the theme’s CSS for house ads. You should create a new theme component with your CSS and add it to the theme.

This is a potential improvement

Can you please let me know where you see this issue?

That’s a valid point for sure and I’ll make sure to make the change as soon as possible on my website.

Here’s an image to show the issue. You can also see that the “#” in front of categories is also miss-aligned somehow.

The profile section of Fakebook theme needs some padding.

Hello,
Is it possible to see your website please ? It helps me to understand this theme.
Thx a lot
Cédric

Hello,
Sure! You can see it here:

Love this theme. Great work @awesomerobot and @jordan.vidrine

Not sure where to lodge bug reports & suggestions for Facebook-modern so am just dropping them here for now:

• Global pinned topics i.e. banners, push the left-hand navigation bar over to the right
• Banners are slightly illegible due to light blue background and dark blue hyperlinks
• Links for topic on the topic list appear to be links to most recent comment, not to OP. This is confusing for users as they often end up seeing nothing but the ‘footer’ after clicking a topic.
• Suggested topics are left-aligned, whereas the current topic is centred. I guess it would look better all centred?
• Be awesome if the onebox previews for topics generated from hyperlinks, were actually hyperlinked. i.e. if you click the image it will take you to the external site. Currently the image is not hyperlinked at all. Also be great if these opened in a new tab.
• Be great if the end of the excerpt read See more instead of Read more... (also made bold to match FB)
• Clicking the little speech bubble at the bottom of a topic, bring up a strange up/down spinner with timestamps that appears to take you the prev/next post (?). This is confusing. I assume this might be a bug?
• Onebox images are not displaying in the Topic list previews. Although they seemed to be intially, I’m wondering if this was only in the ‘leftover’ posts from when I was testing TLP?

I may make some PRs for this once I figure out my way around Discourse a bit more! Cheers

Great! Now you gotta do Twitter or Insta

Ok, but all jokes aside, this is a greatly created theme, and it looks similar to FaceBook. must have taken a long time to create it.

Does anyone know how you get the onebox previews to work for plain websites? They only seem to work for me if I use a YouTube link.

I’m talking about in the topic list. Once you click into the topic the oneboxes seem to work universally.

how do I fix this?

There is also a problem when you go to the category page

Thanks for letting me know! I’ve updated the theme with some fixes.

Can somebody help me? I have the theme installed on my website
My forum is www.holaforo.com
I would like it to have these functions:

Does Fakebook work with Retort and Discourse Reactions?

i want the theme to be applied only for ‘Latest’ and ‘Top’ and certain categories. possible?

No, that’s not possible.

Personally, I would like to see a Google+ theme. Just throwing it out there. I definitely dont miss Google+ or anything like that…