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?

6 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?

4 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
12

How can I add Bluesky?

1 Like
13

Bluesky is now included in the generator that was previously shared here. So you can generate the code injection again, including all the social networks you’d like.

It looks like your snippet was a variation on that, so you’d need to add CSS for .nav-bluesky every time you do .nav-mastodon and .nav-linkedin. The icon is "\e671"

Adding Bluesky to the previous snippet that Ryan gave you, it’ll look something like 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, .nav .nav-bluesky a {
        font-size: 0 !important;
    }

    .nav .nav-mastodon a::before,
    .nav .nav-linkedin a::before, .nav .nav-bluesky 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"}
    .nav .nav-bluesky a::before {content: "\e671"}
</style>