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

6 Likes
25

Thanks omisnomis,
This worked very well for me.

26

You’re welcome @bruce_norton

Glad it helped you!

27

What new about LinkedIn ?

1 Like
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:

1 Like
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?

1 Like
35

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

2 Likes
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!

1 Like
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