Additional social accounts in general settings

One more vote for Mastodon!

4 Likes

+1 for this, with proposed social networks aside from facebook and twitter:

  • linkedin
  • instagram
  • github
7 Likes

In the interim, roughly what level of effort would it entail for a developer to modify the ember admin themselves to support this functionality?

I havenā€™t dug into customizing the admin panel just yet, but Iā€™d be curious to learn if a change like this would be reasonable for an average developer.

1 Like

:+1:

having more possible integrations - sharing, but also story ā€˜cardsā€™ would be very very nice - actually the main thing I really miss in Ghost: linkedin and instagram integrationā€¦

Iā€™ve mostly lost confidence in a feature like this to make its way into ghost core any time soon- I try not to put any money behind philosophical design decisions.

As a workaround, Iā€™ve opted to make my theme configurable with MongoDB Atlas; this allows us to fill in data blanks where ghost core falls short, while stayin away from touching the core build.

Iā€™m not particularly proud of this solution from an architecture perspective. Itā€™s like trading ā€œseparation of concernsā€ for an inexplicable tumor leeching of the theme layer, but desperate times call for desperate measures. Otherwise nobody would know how cool I am on social media, which is simply unacceptable.

2 Likes

I think there should have an option to add custom social media icon, link, it would be helpful. By default 3 social media is fine but there should have Add New button to add more icons.

9 Likes

Hello! Please, add a new social networks. For example: VKontakte, YouTube, Telegram, WhatsAPP, Viber.

  1. VK
  2. FB
  3. Twitter
  4. Youtube
  5. Telegram
  6. WhatsAPP
  7. Viber
1 Like

I was surprised the social media icons are indeed only Facebook and Twitter. Wouldnā€™t it be possible to add custom ones? The user could be allowed to add an icon as well as the link?

cheers!

3 Likes

At least Instagram. This should be a simple addition for the default theme.

3 Likes

Would love to see GitHub as well. Tried digging around the default casper files but no success yet. Any support from the admins would be great!

1 Like

Hi,
while adding additional accounts I had to modify the knownHelpers within Gscan specs. It might be worth considering a dynamic implementation of gscan checks in relation to the model within the Ghostā€™s Themeā€™s API design.

+1 for YouTube, Instagram and moreā€¦

This should be like a basic feature, why did it stop with only those two?

3 Likes

I was working on submitting a PR for adding instagram support to Ghost-Admin and Casper Theme, but seeing this thread I may try to make the code more modular so that users can choose which social media they want to add links for. Hopefully they accept my PR when I submit it.

2 Likes

Adding icons to Casper is fairly easy (by editing partials/site-nav.hbs) so while it would be nicer to have them in the admin panel, itā€™s simple enough to add them yourself.

However, which icon set is this? Is it ghostā€™s own or a free one with other icons available?

Had no choice but to hijack the location field in order to specify the authorsā€™ linkedin profiles. OCD level = overflow

With a Facebook data scandal every month now, many of us are deleting their facebook accounts. Hence, it is essential that you now allow the option to provide links to other social media & messaging services.
Many media house offer the option of privately tipping them through Telegram & Signal while a lot other solely run on Twitter & Instagram. I think native support should be made standard now.

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

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

Thanks omisnomis,
This worked very well for me.

Youā€™re welcome @bruce_norton

Glad it helped you!