Replacing the default Social Accounts in General Settings

According to this thread, the set of Social Accounts that can be configured in Settings → General is fixed, currently to Facebook and Twitter.

Some 20 months ago, the thread was closed with the conclusion that the social media links can now be configured using the “Secondary navigation”, and a tutorial is even provided on how to do this with the default Theme, Casper.

Perhaps something has changed, because today Casper definitely doesn’t use the “Secondary navigation” links in the header, and instead creates a gh-head-actions div which contains the two fixed social links.

So instead of following the tutorial, I took some inspiration from @jamespayne 's post earlier in the thread, and actually came up with a way to override the default links without modifying the Theme. The catch is that this will only allow one of the default links to be replaced by another, rather than adding or removing links.

My solution was simply to add this to the Site Footer in Settings → Code injection:

<script>
    //The only social accounts that can be configured by default are Facebook and Twitter.
    //Override the Facebook one with LinkedIn here.
    //Note we avoid the overhead of multiple jQuery calls and use vanilla JS. The SVG is from https://simpleicons.org/
    var fb = document.getElementsByClassName("gh-social-facebook")[0]; //Assumes the element only used once on the page
    fb.setAttribute("href", "https://www.linkedin.com/in/heath-raftery-0584552/"); //the Admin interface won't accept a non-Facebook URL, so change that here too.
    fb.setAttribute("title", "LinkedIn"); //Used in the Tooltip, for example.
    fb.innerHTML = '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>';
</script>

and voila, the Facebook social media link is replaced with a LinkedIn one pointing to my LinkedIn page. The top right corner of each page now looks like this:

Screen Shot 2021-09-27 at 6.48.42 pm

Hope that helps!

3 Likes