OK. Thanks. I’ll look into that. 
How about only a 3rd “pick your own”? / that might appease a lot of folks here (I need LinkedIn badly)
2 Likes
You could just add this to the theme code! I can help if you’re unsure
Add what exactly? / I meant a field in the admin for the general settings and users that stores the field in the database just like Facebook and Twitter do
You can add this to the theme code 
, if it’s a single link that won’t change often then it doesn’t need to be stored in the database
For the blog yes, but not for each user
I am new with the Ghost CMS
Could you please tell how can I do this step by step if it is possible ?
There is no short answer to this in my opinion but maybe the Ghost Staff can chime in here. I’m not even sure this will work with the Ghost hosted solution because I run my own server and ghost blog but here is how I did it with the stock Casper theme:
What I did was find a svg version of the social icon that I wanted to use. In my case it was github. You can find an example here:
Download that svg and copy the text from that file in a text editor. You’ll probably need to open it with something like notepad on windows or textedit on mac. Don’t just double click on it because it will probably open as an image - you want the text content of the file.
Create a new file at /content/themes/casper/partials/icons called github.hbs (in this example I used github.hbs because that was the social link I wanted to add; you should name it whatever is appropriate for the site. e.g. facebook.hbs, instagram.hbs etc.) and paste the contents of the text of the svg file you downloaded into the new file. Save that file.
Open the file /content/themes/casper/partials/site-nav.hbs and add the following code replacing the href and the {{> “icons/github”}} values with the url of your social link and the name of the icon without the .hbs extension. Here is an example:
<div class="social-links">
{{#if @site.facebook}}
<a class="social-link social-link-fb" href="{{facebook_url @site.facebook}}" title="Facebook" target="_blank" rel="noopener">{{> "icons/facebook"}}</a>
{{/if}}
{{#if @site.twitter}}
<a class="social-link social-link-tw" href="{{twitter_url @site.twitter}}" title="Twitter" target="_blank" rel="noopener">{{> "icons/twitter"}}</a>
{{/if}}
<a class="social-link" href="https://github.com/jamespayne">{{> "icons/github"}}</a>
</div>
You should be able to see that I’ve added the link:
<a class="social-link" href="https://github.com/jamespayne">{{> "icons/github"}}</a>
Take note: The svg file that we created has an .hbs extension. You don’t need that in the {{> “icons/github”}} code.
You should make sure you include the class “social-link” as above to keep some consistency. Keep what you altered in the same class. I’m not sure what the outcome would be otherwise.
Restart Ghost and do a hard refresh in your browser to check to see if it is working.
I’ve used this on my site here.
You can repeat this process for each social icon and site you want to add.
I’m not claiming this is the right way to do it. It’s just what worked for me. I hope this helps and let me know if you have any questions. 
@DavidDarnes Is this the correct way to do it? If not, please let me know and I’ll update my response.
3 Likes
a vote for LinkedIn
2 Likes
Thanks. It’s right question because svg is just a code and it will work like a code
But I asked about social medias in site’s settings. You added new input for github. How did you do that?
Thank you a lot once more)
What I did in that case was changing the core code (the main code of Ghost) which you shouldn’t do unless it’s been approved and agreed on by the developers of Ghost. This was discussed in this thread:
So you will need to do it the way I mentioned.
LinkedIn, YouTube & Instagram would be great additions
This was helpful and for this to work, I had to add a line in default.hbs as well in London Theme. When I used Icons, they were very big, they didn’t take the default size of other icons in the theme. Also, the London Theme uses Text instead of Icons.
How do I fix it? If I have to use Icons
Here’s my linkedin.hbs for Icon.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M16 14c0-2.203-1.797-4-4-4s-4 1.797-4 4 1.797 4 4 4 4-1.797 4-4zM18.156 14c0 3.406-2.75 6.156-6.156 6.156s-6.156-2.75-6.156-6.156 2.75-6.156 6.156-6.156 6.156 2.75 6.156 6.156zM19.844 7.594c0 0.797-0.641 1.437-1.437 1.437s-1.437-0.641-1.437-1.437 0.641-1.437 1.437-1.437 1.437 0.641 1.437 1.437zM12 4.156c-1.75 0-5.5-0.141-7.078 0.484-0.547 0.219-0.953 0.484-1.375 0.906s-0.688 0.828-0.906 1.375c-0.625 1.578-0.484 5.328-0.484 7.078s-0.141 5.5 0.484 7.078c0.219 0.547 0.484 0.953 0.906 1.375s0.828 0.688 1.375 0.906c1.578 0.625 5.328 0.484 7.078 0.484s5.5 0.141 7.078-0.484c0.547-0.219 0.953-0.484 1.375-0.906s0.688-0.828 0.906-1.375c0.625-1.578 0.484-5.328 0.484-7.078s0.141-5.5-0.484-7.078c-0.219-0.547-0.484-0.953-0.906-1.375s-0.828-0.688-1.375-0.906c-1.578-0.625-5.328-0.484-7.078-0.484zM24 14c0 1.656 0.016 3.297-0.078 4.953-0.094 1.922-0.531 3.625-1.937 5.031s-3.109 1.844-5.031 1.937c-1.656 0.094-3.297 0.078-4.953 0.078s-3.297 0.016-4.953-0.078c-1.922-0.094-3.625-0.531-5.031-1.937s-1.844-3.109-1.937-5.031c-0.094-1.656-0.078-3.297-0.078-4.953s-0.016-3.297 0.078-4.953c0.094-1.922 0.531-3.625 1.937-5.031s3.109-1.844 5.031-1.937c1.656-0.094 3.297-0.078 4.953-0.078s3.297-0.016 4.953 0.078c1.922 0.094 3.625 0.531 5.031 1.937s1.844 3.109 1.937 5.031c0.094 1.656 0.078 3.297 0.078 4.953z"/></svg>
I have used Icons from https://icomoon.io
Hi vamsi3001,
You’ll need to do some troubleshooting. Here’s an article about how to change the size of a SVG:
You can either change the height and width attributes of the svg element or change your CSS.
What I suggest you do is use your browsers developer tools to inspect the CSS properties of the icon.
It seems the CSS properties for the social icons are here London/screen.css at bbc4bb6c9cb6b80dee1b5c22cfb40466e2f33cc0 · TryGhost/London · GitHub
To remove the text from the element, you just need to delete the text between the opening and closing tags of the a element e.g:
<a href="https://www.facebook.com/ghost" title="Facebook" target="_blank" rel="noopener"></a>
I hope this helps.
Not changing often = theme code ?
Then why facebook and twitter got special place there?
Plus, code is not user (read: blogger) friendly.
Mentioned blogger because that’s ghost target market: Blogging
Not all blogger knows how to code
Pick Your Own is a great option i could say.
Since ghost is focusing on blogging. I hope option to add telegram channel in meta data as suggested here can be considered by the contributors. Because telegram does have “instant view” things in their ecosystem, that would help blogger reach the reader from there and help telegram team and contributor prioritise which domain will be added into their system.
Facebook have current special place there, i understand as facebook have the instant article stuff. I don’t know about twitter if is has something similar, but maybe twitter card is the reason.
I hope the pick your own option is a great way to solve this. Maybe even pick your own from the first list so that the blogger that doesn’t have facebook or twitter doesn’t even need to leave it empty because he or she just need to pick what is needed.
you might want to add pick your own option or maybe share with us how this thing being done.
Hi Eddie,
Please see my discussion with Kevin. As it’s a part of the core code e.g. the main code which is developed by Ghost developers, it’s not recommended to modify the core code unless it’s accepted as a feature by them. Sure, you can go ahead and download the core code and modify it yourself but you risk causing problems when it comes to upgrading Ghost and other possible unknown problems.
I’ve provided an example that is in line what they have suggested which is to edit your theme. Please see the post here Additional social accounts in general settings - #70 by jamespayne
If you can come up with a solution that is accepted, I’d be happy to write the code and get it merged into the core code.
1 Like
Hey everyone! In December we add a whole new navigation menu to Ghost which can now be used to add as many social media links as you like.
It can be accessed in themes with {{navigation type="secondary"}} and will output the links and labels entered in Ghost Admin, same as the original Navigation menu.
Themes can implement special styles, colors or icons using CSS (or if your theme doesn’t have these, you can easily add styles via code injection) like this: https://codepen.io/JohnONolan/pen/qBEGwev
We’ll put together a more detailed tutorial for this on the main site so it’s easier to discover, too 
PS. you can find lots of free SVG icons for stuff like this on https://iconmonstr.com
4 Likes