---
This article is related [[Add Social Links to the Sidebar of an Obsidian Publish Site]], but this case we can add these same social media links to the footer of your site. This guide will walk you through the steps to "hijack" your theme's default footer and replace it with your own set of stylized social media icons.
**Page Preview with Social Links in Footer**</br>
![[IMG-Add Social Links to the Footer of an Obsidian Publish Site-20250624215001486.png|600]]
</br>
**Enhance**</br>
![[IMG-Add Social Links to the Footer of an Obsidian Publish Site-20250624215001567.gif|600]]
</br>
This method works with existing theme’s structure. It uses JavaScript to dynamically inject the content and then CSS to style it.
</br>
### Step 1: The JavaScript (`publish.js`)
The JavaScript file will act as the engine for this customization. It will find your site's existing footer and replace its content with your custom social links. This will run automatically every time a visitor navigates to a new page.
**Sample of my Obsidian vault opened in VS Code**</br>
![[IMG-Add Social Links to the Sidebar of an Obsidian Publish Site-20250624215018125.png|300]]
</br>
1. Use a code editor, like VS Code to open your Obsidian vault.
2. In the root of your Obsidian vault, create or open a file named `publish.js`.
3. Copy and paste the entire code block below into your `publish.js` file.
4. Edit the `const socials` variable at the top of the script to replace the existing URLs with your profile links.
</br>
```js
/**
* @file publish.js
* @description This script enhances an Obsidian Publish site by dynamically inserting a custom
* social media footer. It uses a global constant to manage social media links for easy updates.
* @version 1.0.0
*/
let publishIntervalId;
/**
* @const {Array<Object>} socials
* @description A global constant holding an array of social media link objects.
* Each object contains the URL, name (for accessibility), and SVG icon HTML.
* This is the single source of truth for your social links.
*/
const socials = [
{
url: "https://github.com/drusho",
name: "GitHub",
svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" role="img"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>',
},
{
url: "https://linkedin.com/in/davidrusho",
name: "LinkedIn",
svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" role="img"><path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z"></path></svg>',
},
];
/**
* @function hijackFooter
* @description Finds the theme's default footer and replaces its content with social media icons.
* @param {Array<Object>} socials - An array of social media link objects.
* @returns {boolean} Returns true once the footer has been successfully updated, false otherwise.
*/
function hijackFooter(socials) {
const footer = document.querySelector(".site-footer");
if (!footer) return false;
if (footer.hasAttribute("data-footer-hijacked")) return true;
const socialLinksHTML = `<div class="footer-social-links">${socials.map((s) => `<a href="${s.url}" target="_blank" rel="noopener" aria-label="${s.name}" title="${s.name}">${s.svg}</a>`).join("")}</div>`;
footer.innerHTML = socialLinksHTML;
footer.setAttribute("data-footer-hijacked", "true");
return true;
}
/**
* @function runScriptsAndClearInterval
* @description A controller function that runs all enhancement scripts. When all scripts
* confirm they are finished, it clears the master interval timer.
*/
function runScriptsAndClearInterval() {
try {
const footerDone = hijackFooter(socials);
if (footerDone) {
clearInterval(publishIntervalId);
}
} catch (e) {
console.error("Publish script error:", e);
clearInterval(publishIntervalId);
}
}
/**
* @function onChangeDOM
* @description A callback for the MutationObserver that detects when a page navigation occurs
* in Obsidian Publish and re-runs the scripts.
* @param {MutationRecord[]} mutationsList - A list of mutations that were observed.
*/
const onChangeDOM = (mutationsList) => {
const pageChanged = mutationsList.some((mutation) =>
Array.from(mutation.addedNodes).some(
(node) =>
node.nodeType === 1 &&
(node.matches(".page-header") || node.querySelector(".page-header"))
)
);
if (pageChanged) {
clearInterval(publishIntervalId);
publishIntervalId = setInterval(runScriptsAndClearInterval, 100);
}
};
// --- Script Initialization ---
const targetNode = document.querySelector("body");
if (targetNode) {
const observer = new MutationObserver(onChangeDOM);
observer.observe(targetNode, {
childList: true,
subtree: true,
});
}
publishIntervalId = setInterval(runScriptsAndClearInterval, 100);
```
</br>
### Step 2: The CSS (`publish.css`)
Next lets edit the CSS code styles of the hijacked footer.
1. While still inside your code editor, now locate or create a file named `publish.css`.
2. Copy and paste the code below into your `publish.css` file.
</br>
```css
/**
* @file publish.css
* @description Custom styles for an Obsidian Publish site footer.
*
*/
/*
|--------------------------------------------------------------------------
| Footer Styling
|--------------------------------------------------------------------------
|
| Styles for the theme's default footer, which is hijacked to display
| custom social media links as a static element at the end of the page.
|
*/
/**
* Main container for the site footer.
* This rule resets the theme's styling to be a standard block element,
* centers the content, and adds a top border to separate it from the main content.
*/
.site-footer {
display: block !important; /* Ensures the footer is visible, overriding theme defaults. */
text-align: center; /* Centers the content within the footer. */
padding: 2em 1em; /* Provides vertical and horizontal padding. */
margin-top: 3em; /* Adds space between the page content and the footer. */
border-top: 1px solid var(--background-modifier-border); /* A subtle separator line. */
}
/**
* Container for the social media icon links.
* Uses flexbox to create a clean, evenly spaced horizontal row.
*/
.footer-social-links {
display: flex;
justify-content: center; /* Horizontally centers the icons as a group. */
align-items: center; /* Vertically aligns the icons. */
gap: 20px; /* Defines the space between each icon. */
}
/**
* Styles for the individual SVG icons.
* Defines the size and default color, which is inherited from
* the theme's muted text color for consistency.
*/
.footer-social-links svg {
width: 22px;
height: 22px;
fill: var(--text-muted);
transition: transform 0.2s ease-in-out, fill 0.2s ease-in-out; /* Smooth transition for hover effects. */
}
/**
* Hover effect for the social media icons.
* Changes the icon color to the theme's accent color and slightly
* enlarges it for clear visual feedback.
*/
.footer-social-links a:hover svg {
fill: var(--text-accent);
transform: scale(1.15);
}
```
</br>
### Step 3: Upload and Publish
1. Open Obsidian and go to **Settings** -> **Publish**.
2. In the "Publish changes" dialog, make sure your new/updated `publish.js` and `publish.css` files are selected for upload.
3. Click **"Publish"**.
**Sample of Obsidian Publish Menu**</br>
![[IMG-Add Social Links to the Sidebar of an Obsidian Publish Site-20250624215018257.png|500]]
</br>
Your site should now have a clean footer with your social media icons at the bottom of every page.
---
## Resources
</br>
### Related Articles
Check out the other articles from **Obsidian Publish Recipes** series:
%% DATAVIEW_PUBLISH_CONVERT start
```dataview
LIST WITHOUT ID
"**" + file.link + "** </br>" + description + "</br></br>"
FROM "07 - Publish - Obsidian"
WHERE
publish = true
AND file.name != "About Me"
AND file.name != "Home"
AND series = "Obsidian Publish Recipes"
SORT date DESC
```
%%
- **[[07 - Publish - Obsidian/Articles/Add Social Links to the Sidebar of an Obsidian Publish Site.md|Add Social Links to the Sidebar of an Obsidian Publish Site]]** </br>Customize your Obsidian Publish site by adding social media icons to the sidebar. This step-by-step guide uses simple CSS and JavaScript to create a "Connect" box that appears on every page, enhancing your site's professional look.</br></br>
- **[[07 - Publish - Obsidian/Articles/Obsidian Publish Workflow - Automating Publication Prep.md|Obsidian Publish Workflow - Automating Publication Prep]]** </br>Walkthrough of a Templater script to automate Obsidian Publish workflow. The script manages frontmatter properties and converts Dataview queries to static Markdown.</br></br>
- **[[07 - Publish - Obsidian/Articles/Add Social Links to the Footer of an Obsidian Publish Site.md|Add Social Links to the Footer of an Obsidian Publish Site]]** </br>How to customize an Obsidian Publish site by adding a social media links to the footer. This guide uses simple JavaScript and CSS to "hijack" your theme's default footer, creating a clean footer that appears on every page.</br></br>
- **[[07 - Publish - Obsidian/Posts/Series/Obsidian Publish Recipes.md|Obsidian Publish Recipes]]** </br>Articles related to customizing Obsidian Publish sites using javascript and css.</br></br>
%% DATAVIEW_PUBLISH_CONVERT end %%