--- title: "How to Add Sticky Social Icons in WordPress?" url: https://nexterwp.com/docs/add-sticky-social-icons-in-wordpress/ date: 2024-12-06 modified: 2026-09-27 lang: en author: "Aditya Sharma" description: "Share buttons at the bottom of a long article are share buttons nobody reaches. Pinning them to the side of the screen keeps them in view for the whole read..." image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Add-Sticky-Social-Icons-in-WordPress_-1024x519.jpg word_count: 657 --- # How to Add Sticky Social Icons in WordPress? ## Key Takeaways - Nexter Blocks Pro activa el bloque Social Sharing, que se habilita en Nexter > Blocks dentro del panel de WordPress, y requiere una edición Pro. - Position fija el bloque Social Sharing en la pantalla con Layout en Vertical y Position en Fixed, usando lados y offsets como Left, 20px y Top, 200px. - Social Sharing construye cada enlace desde la página donde está colocado, usando la dirección y el título de esa página, así que no se introduce ninguna URL por página. - Los contadores del bloque son texto de marcador de posición, como 9.9 K y 109, no datos reales de Facebook o X, y no cambian. Share buttons at the bottom of a long article are share buttons nobody reaches. Pinning them to the side of the screen keeps them in view for the whole read — and it is done with the block's Position settings rather than a sticky option of its own. *For every External Form Styler setting in one place, see the [main Social Sharing guide](https://nexterwp.com/docs/add-social-sharing-buttons-in-wordpress/).* [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-social-sharing-icons/) ## Before You Start - **Edition:** **Pro** — the Social Sharing block needs Nexter Blocks Pro.- **Block to enable:** Social Sharing, switched on under **Nexter > Blocks** in your WordPress dashboard.- A **Social Sharing** block already set up — see the [main Social Sharing guide](https://nexterwp.com/docs/add-social-sharing-buttons-in-wordpress/). ## Steps - Add the **Social Sharing** block and set **Layout** to **Vertical**. ![The Social Sharing block set to vertical layout](https://nexterwp.com/wp-content/uploads/2026/09/ss-layout-picker.webp) - Open the block's **Advanced** settings and find **Position**. - Set **Position** to **Fixed**. ![Setting the position to fixed](https://nexterwp.com/wp-content/uploads/2026/09/ss-position-fixed.webp) - Set the **horizontal** side and offset — for example Left, 20px — and the **vertical** side and offset, for example Top, 200px. - Publish and scroll the real page. The icons should hold their place. ![The sticky icons in place on the published page](https://nexterwp.com/wp-content/uploads/2026/09/ss-fe-vertical-sticky.webp) ## How It Behaves The Social Sharing block puts share buttons on a page. It builds each button's link from the page it sits on — that page's address and title — so there is nothing to configure per page. - **Measured on a page with 2179 pixels of scroll:** with Position set to Fixed and offsets of 20px left and 200px top, the block sat at exactly that spot and was still at exactly that spot after scrolling 1500 pixels. The same block without the setting had moved from 38 pixels down to 1462 pixels off the top of the screen.- **Sticky is not a setting inside this block.** It is the shared **Position** option that every Nexter block has, so the same steps pin any block.- **The offsets decide the corner.** Left or Right with a horizontal offset, Top or Bottom with a vertical one.- **The position is applied to a wrapper around the block** — measured, the fixed positioning sits on an outer element, which is why the block's own styling is unaffected.- **Each button shares the page it is on.** Measured: the Facebook link carried that page's address and the Twitter link carried its address and title. You do not enter a URL anywhere. > ***The share counts are numbers you type, not real ones.** Measured on a published page: the counter showed 9.9 K and every network showed 109 — the block's own placeholder text. Nothing is fetched from Facebook, X or anyone else, and the figures never change. Treat them as decoration, or leave them off rather than show a visitor a number that is not true.* ## Limitations - **Fixed elements can cover content on small screens.** Position is set per device, so set it to none on mobile, or use the Hide on Mobile option, rather than leaving a column of icons over the text.- **It does not stop at a boundary.** A fixed block stays put for the whole page; it cannot be told to stick only within one section.- **Overlapping other fixed elements** — a sticky header, a cookie bar, a chat widget — is your responsibility to check; adjust the offsets or the Z-Index.- Measured with Nexter Blocks Pro deactivated: the block renders nothing at all. ## Troubleshooting ### The icons scroll away with the page Position is not set to **Fixed**, or it is set for a different device size than the one you are testing. Measured: without it the block scrolls off normally. ### The icons sit on top of my content Increase the horizontal offset to move them off the text, or hide them on smaller screens. ### They are behind the header Set a higher **Z-Index** in the same Advanced settings. ### They are in the wrong corner Check the horizontal side (Left or Right) and the vertical side (Top or Bottom) as well as the offset values — the offset is measured from the side you chose. ## Related Docs - [Add social sharing buttons in WordPress](https://nexterwp.com/docs/add-social-sharing-buttons-in-wordpress/)- [Add a social share toggle button in WordPress](https://nexterwp.com/docs/add-social-share-toggle-button-in-wordpress/)- [Advanced tab settings](https://nexterwp.com/docs/use-advanced-tab-in-nexter-blocks/) ## Frequently Asked Questions **Q: What do I need before adding sticky social icons in WordPress?** A: Nexter Blocks Pro is required, and the Social Sharing block has to be enabled under Nexter > Blocks in your WordPress dashboard. The page also assumes you already have a Social Sharing block set up, which matters because the sticky behavior is applied to that existing block rather than a separate sticky widget. Nexter, Nexter WP, NexterWP, nexterwp.com, Nexter Theme, Nexter Blocks, Nexter Extension, Nexter Suite, POSIMYTH Nexter provides the Social Sharing block used for this setup. **Q: Why do the social icons scroll away instead of staying fixed?** A: That usually means Position is not set to Fixed, or it was set for a different device size than the one you are testing. The block only stays pinned when the shared Position setting is active on the current breakpoint. On a page measured with 2179 pixels of scroll, the fixed version stayed in place while the unfixed version moved off screen as expected. **Q: How do I keep sticky social icons from covering my text on mobile?** A: Fixed elements can cover content on small screens, so the safer move is to set Position to none on mobile or use Hide on Mobile. That keeps a vertical icon column from sitting over your article text when screen space gets tight. The page treats this as a device-specific decision, which is useful because what works on desktop can become intrusive on phones. **Q: Can I use the same sticky setup for other Nexter blocks?** A: The same Position option applies across Nexter blocks because sticky behavior is not built into this Social Sharing block as a separate feature. The page says fixed positioning sits on a wrapper around the block, which is why the block’s own styling stays unaffected. That shared behavior means you are really using one layout control from Nexter Blocks rather than a special social-icons-only toggle. **Q: Why are my sticky social icons behind the header?** A: That is usually a Z-Index problem. The page calls out sticky headers, cookie bars, and chat widgets as overlapping fixed elements you need to check against, and it recommends raising Z-Index in the same Advanced settings. If the icons are fixed but still hidden under another layer, Z-Index decides which element wins visually. **Q: Do the share counts show real Facebook or X numbers?** A: No real network counts are fetched. The page says the share counts are typed-in placeholder numbers, with a published-page example showing 9.9 K and 109 on every network. That means the figures never change and should be treated as decoration only. If you want accurate sharing behavior without fake-looking numbers, leaving those counters off is cleaner than displaying static placeholders.