One more vote for Mastodon!
+1 for this, with proposed social networks aside from facebook and twitter:
- github
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.
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.
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.
Hello! Please, add a new social networks. For example: VKontakte, YouTube, Telegram, WhatsAPP, Viber.
- VK
- FB
- Youtube
- Telegram
- Viber
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!
At least Instagram. This should be a simple addition for the default theme.
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!
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?
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.
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&title={{encode title}}&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&title={{encode title}}&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:
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:
Thanks omisnomis,
This worked very well for me.