Additional social accounts in general settings

Ideas
23

How would I add an additional link to an external account link with an icon? (alongside the twitter and facebook links).

I tried adding everything that a grep -r twitter_url returned, with my desired rsi_url data but restarting ghost broke my setup; resulting in a 500 and missing rsi_url helper in default.hbs.

What is the correct way to do this

24

In case this helps anybody - I managed to achieve this by altering the Casper theme and doing the following:

Add a linkedin.hbs file in partials/icons/ with the following SVG:

<svg height="64" viewBox="0 0 32 32" width="64" xmlns="http://www.w3.org/2000/svg"><g stroke-width=".424533" transform="matrix(1.2327382 0 0 1.2327382 -44.651454 13.534524)"><path d="m60.258392-10.978809h-22.121116c-1.057086 0-1.915916.838027-1.915916 1.87049v22.214515c0 1.033737.85883 1.872613 1.915916 1.872613h22.121116c1.05879 0 1.92144-.838876 1.92144-1.872613v-22.214515c.00042-1.032463-.86223-1.87049-1.92144-1.87049z" fill="#0177b5"/><g fill="#fff"><path d="m40.070173-1.247249h3.85051v12.387859h-3.85051zm1.926104-6.157845c1.23072 0 2.230918 1.000199 2.230918 2.231768 0 1.232418-1.000198 2.232616-2.230918 2.232616-1.234116 0-2.233042-1.000198-2.233042-2.232616 0-1.231569.998926-2.231768 2.233042-2.231768"/><path d="m46.335424-1.247249h3.692584v1.692611h.05137c.514109-.973878 1.769874-2.000822 3.642914-2.000822 3.89891 0 4.61849 2.565875 4.61849 5.901002v6.794644h-3.84754v-6.024117c0-1.436618-.0263-3.284608-2.00082-3.284608-2.00337 0-2.310731 1.564827-2.310731 3.180598v6.128127h-3.84669v-12.387435z"/></g></g></svg>

Alter partials/floating-header.hbs and add the following lines below the “Share This” div (<div class="floating-header-share-label">Share this {{> "icons/point"}}</div>)

        <a class="floating-header-share-fb" href="https://www.linkedin.com/shareArticle?mini=true&amp;title={{encode title}}&amp;url={{url absolute="true"}}"
            onclick="window.open(this.href, 'share-linkedin', 'width=550,height=235');return false;">
            {{> "icons/linkedin"}}
        </a>

It’s a bit hacky because I haven’t set-up dedicated classes for the Linkedin logo or anything, but it does work.

Edit: I ended up doing this properly:

partials/floating-header.hbs now has the following (note the class change):

        <a class="floating-header-share-li" href="https://www.linkedin.com/shareArticle?mini=true&amp;title={{encode title}}&amp;url={{url absolute="true"}}"
            onclick="window.open(this.href, 'share-linkedin', 'width=550,height=235');return false;">
            {{> "icons/linkedin"}}
        </a>

Then add floating-header-share-li to screen.css in the following places:

.floating-header-share-li,
.floating-header-share-tw,
.floating-header-share-fb {
    display: block;
    align-items: center;
    width: 60px;
    height: 60px;
    color: #fff;
    line-height: 48px;
    text-align: center;
    transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
}

@media (max-width: 900px) {
    .floating-header {
        height: 40px;
    }
    .floating-header-title,
    .floating-header-logo {
        font-size: 1.5rem;
    }
    .floating-header-share-li,
    .floating-header-share-tw,
    .floating-header-share-fb {
        width: 40px;
        height: 40px;
        line-height: 38px;
    }
}

And lastly make sure the background colour matches the SVG background:

.floating-header-share-li {
    background: rgb(17, 120, 179);
}

It then results in the following:

image

Note: I also changed the SVG height to be 60% as it looked better IMO. You can do this by amending the following line in screen.css:

.floating-header-share svg {
    width: auto;
    height: 60%;
    fill: #fff;
}

Which looks like this, on Desktop:

image

25

Thanks omisnomis,
This worked very well for me.

26

You’re welcome @bruce_norton

Glad it helped you!

27

What new about LinkedIn ?

28

What?

29

Its pretty easy to submit a story to reddit. I think we should add Reddit along side twitter and facebook icons.

https://www.reddit.com/submit?url=<urlencoded-url>

30

@chovy I think you might be confusing share links with social links - share links give you the ability to share a post to a platform (such as facebook, twitter or reddit), while social links are your profiles on the platforms (e.g. github/tryghost, twitter/ghost, etc.)

You can add whichever share links you want to your theme; this topic is discussing adding more social links in the admin interface :slight_smile:

31

Ok

32

So no solution yet? I tried adding the Instagram link with the Code Injection feature but it doesn’t look neat.

33

You will probably get a better result by adding the link in the theme, you can download the theme from the Design view in the Admin :paintbrush:

34

Hi Omisnomis,

I tried your instructions however the LinkedIn logo doesn’t seem to be applying properly.

Capture11122

Would you be able to help me with this?

35

Sure, it looks like you’ve missed some CSS somewhere. Did you use the edited instructions, or the original?

36

Hi Omisnomis,

Thank you for replying.

I used the SVG from the first part, then followed the edited instructions below.

37

It really sounds like you’re missing some CSS. Are you a developer? Do you know what dev tools are in your browser?

Can you share your site URL?

38

Hiya,

It is blog.withsnap.co.uk.

I am not a “developer”, but I understand the basics. I copied your code word for word to make sure.

I inspected Bruce’s site and mine and really unsure where to look.

Sorry!

39

No need to be sorry :slight_smile:

I can have a quick look for you tomorrow, to see if I can figure out what’s going on.

40

Sure that would be kind.

If you wanted contact me at alex@withsnap.co.uk

41

I’ll probably just reply to you on here, so others can view the outcome.

42

You don’t have the LinkedIn logo on your site?

image
image.png695×218 5.65 KB