Add Mastodon to the site, icon and all

Integrations & API
1

Can we have the ability to add Mastodon to the site as an option against Twitter?

4 Likes
2

You can add any link/icon you want, by editing your theme.

Twitter is included in settings only because it’s used to generate automatic structured data in <head> to support rich cards:

Mastodon already supports the same structured data via opengraph, so nothing new is needed:

3 Likes
3

I’ll add one more resource here that’s relevant:

5 Likes
4

Cool. Had no clue. Thanks.

5

What about link to a mastodon account in the author’s profile?

3 Likes
6

I followed all the steps in the the tutorial and the icons on MarketingJunto.com aren’t showing up in the nav. Help!!!

7

Are you sure you loaded all the required css? If you skip that first line, the icons won’t show up.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/brands.min.css" integrity="sha512-+oRH6u1nDGSm3hH8poU85YFIVTdSnS2f+texdPGrURaJh8hzmhMiZrQth6l56P4ZQmxeZzd2DqVEMqQoJ8J89A==" crossorigin="anonymous" referrerpolicy="no-referrer" />

8

Oh, no, I see it in your console logs. I think the version of font-awesome has probably bumped again, so this link doesn’t work.

Try this:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/brands.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />

Hey @RyanF , the documentation needs updating, as this link doesn’t work.

9

Still nothing. Hmmmmm

10

It looks like the CSS is off. Try this:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/brands.min.css" integrity="sha512-W/zrbCncQnky/EzL+/AYwTtosvrM+YG/V6piQLSe2HuKS6cmbw89kjYkp3tWFn1dkWV7L1ruvJyKbLz73Vlgfg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<style>
    .nav .nav-mastodon a,
    .nav .nav-linkedin a {
        font-size: 0 !important;
    }

    .nav .nav-mastodon a::before,
    .nav .nav-linkedin a::before {
        font-family: "Font Awesome 6 Brands";
        display: inline-block;
        font-size: 20px;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
    }

    .nav .nav-mastodon a::before {content: "\f4f6"}
    .nav .nav-linkedin a::before {content: "\f08c"}
</style>
11

Thanks! That worked! I appreciate it!

1 Like