# Floating Social Media Icons Bar

> Shows a slim bar of social media icons fixed to the side of the screen, with built-in SVG icons, accessible labels and an option to hide it on small screens.

- Type: PHP
- Runs: Frontend only
- Category: [Frontend & Design](https://wpide.com/library/category/frontend/)
- Tags: frontend, social, icons, svg
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/floating-social-icons-bar/

## Code

```php
// Your profile links, in the order they appear. Leave a link empty to hide that icon.
$wpide_social_links = array(
    'facebook'  => 'https://www.facebook.com/yourpage',
    'x'         => 'https://x.com/yourname',
    'instagram' => 'https://www.instagram.com/yourname',
    'linkedin'  => '',
    'youtube'   => '',
    'tiktok'    => '',
    'pinterest' => '',
    'bluesky'   => '',
    'whatsapp'  => '', // e.g. https://wa.me/15551234567
    'email'     => '', // e.g. mailto:hello@example.com
    'rss'       => '', // e.g. https://example.com/feed/
);

// 'left' or 'right' edge of the screen.
$wpide_social_bar_side = 'left';

// Hide the bar on screens narrower than this, in pixels. 0 shows it everywhere.
$wpide_social_bar_hide_below = 768;

// Open the profiles in a new tab.
$wpide_social_bar_new_tab = true;

// Colors (hex).
$wpide_social_bar_background = '#1e1e1e';
$wpide_social_bar_color      = '#ffffff';

add_action( 'wp_footer', function () use ( $wpide_social_links, $wpide_social_bar_side, $wpide_social_bar_hide_below, $wpide_social_bar_new_tab, $wpide_social_bar_background, $wpide_social_bar_color ) {
    // Simple line icons drawn on a 24 x 24 grid.
    $icons = array(
        'facebook'  => array( 'Facebook', '<path d="M15.5 3.5H13a4 4 0 0 0-4 4V10H6.5v3.5H9v7h3.5v-7h2.6l.6-3.5h-3.2V8a1 1 0 0 1 1-1h2z"/>' ),
        'x'         => array( 'X', '<path d="M4 4h4.5L20 20h-4.5z"/><path d="M19.5 4l-6.3 7.2M10.8 12.8 4.5 20"/>' ),
        'instagram' => array( 'Instagram', '<rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.3" cy="6.7" r=".8" fill="currentColor" stroke="none"/>' ),
        'linkedin'  => array( 'LinkedIn', '<rect x="3" y="3" width="18" height="18" rx="3"/><path d="M8 10.5V17M8 7.4v.1M12 17v-6.5M12 13.6a2.6 2.6 0 0 1 5.2 0V17"/>' ),
        'youtube'   => array( 'YouTube', '<rect x="2.5" y="5.5" width="19" height="13" rx="4"/><path d="M10.2 9.3v5.4l4.6-2.7z" fill="currentColor"/>' ),
        'tiktok'    => array( 'TikTok', '<path d="M14 3.5v11a3.5 3.5 0 1 1-3.5-3.5"/><path d="M14 3.5c.4 2.6 2.4 4.5 5 4.8"/>' ),
        'pinterest' => array( 'Pinterest', '<circle cx="12" cy="12" r="9"/><path d="M11.7 9.4 9.9 20.6"/><path d="M8.6 11.6a4 4 0 1 1 4 3.3c-.8 0-1.5-.3-2-.8"/>' ),
        'bluesky'   => array( 'Bluesky', '<path d="M12 11.2C10.6 8.3 7.4 5 5 5c-1.3 0-1.6 1.3-1.6 2.2 0 1 .4 4.3 2.4 5 1.8.6 3.4.3 3.4.3s-2.8.8-2.8 2.7c0 1.3 1.3 2.5 2.5 2.5 1.7 0 2.8-2.2 3.1-3.8.3 1.6 1.4 3.8 3.1 3.8 1.2 0 2.5-1.2 2.5-2.5 0-1.9-2.8-2.7-2.8-2.7s1.6.3 3.4-.3c2-.7 2.4-4 2.4-5 0-.9-.3-2.2-1.6-2.2-2.4 0-5.6 3.3-7 6.2z"/>' ),
        'whatsapp'  => array( 'WhatsApp', '<path d="M4.5 19.5l1.2-3.7a8.2 8.2 0 1 1 2.7 2.6z"/><path d="M9.3 8.6c-.2 2.9 2.6 5.8 5.6 5.9l.9-1.5-1.8-1-.9.8a3.6 3.6 0 0 1-1.9-1.9l.8-.9-1-1.8z"/>' ),
        'email'     => array( 'Email', '<rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3.6 6.6 8.4 6.4 8.4-6.4"/>' ),
        'rss'       => array( 'RSS feed', '<path d="M5 11a8 8 0 0 1 8 8M5 5a14 14 0 0 1 14 14"/><circle cx="6" cy="18" r="1.2" fill="currentColor" stroke="none"/>' ),
    );

    $items = '';

    foreach ( $wpide_social_links as $network => $url ) {
        $url = trim( (string) $url );

        if ( '' === $url || ! isset( $icons[ $network ] ) ) {
            continue;
        }

        $external = $wpide_social_bar_new_tab && 0 !== strpos( $url, 'mailto:' );
        $label    = $icons[ $network ][0] . ( $external ? ' (opens in a new tab)' : '' );

        $items .= sprintf(
            '<li><a href="%1$s" aria-label="%2$s"%3$s><svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">%4$s</svg></a></li>',
            esc_url( $url ),
            esc_attr( $label ),
            $external ? ' target="_blank" rel="me noopener"' : ' rel="me"',
            $icons[ $network ][1]
        );
    }

    if ( '' === $items ) {
        return;
    }

    $side       = 'right' === $wpide_social_bar_side ? 'right' : 'left';
    $inner      = 'right' === $side ? 'left' : 'right';
    $background = sanitize_hex_color( $wpide_social_bar_background ) ? sanitize_hex_color( $wpide_social_bar_background ) : '#1e1e1e';
    $color      = sanitize_hex_color( $wpide_social_bar_color ) ? sanitize_hex_color( $wpide_social_bar_color ) : '#ffffff';
    $hide_below = absint( $wpide_social_bar_hide_below );
    ?>
    <nav class="wpide-social-bar" aria-label="Social media"><ul><?php echo $items; // phpcs:ignore WordPress.Security.EscapeOutput -- escaped above. ?></ul></nav>
    <style>
        .wpide-social-bar { position: fixed; top: 50%; <?php echo esc_html( $side ); ?>: 0; z-index: 9990; transform: translateY(-50%); }
        .wpide-social-bar ul { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
        .wpide-social-bar li { margin: 0; padding: 0; }
        .wpide-social-bar a { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: <?php echo esc_html( $background ); ?>; color: <?php echo esc_html( $color ); ?>; text-decoration: none; transition: filter .15s ease; }
        .wpide-social-bar li:first-child a { border-top-<?php echo esc_html( $inner ); ?>-radius: 6px; }
        .wpide-social-bar li:last-child a { border-bottom-<?php echo esc_html( $inner ); ?>-radius: 6px; }
        .wpide-social-bar a:hover { filter: brightness(1.35); }
        .wpide-social-bar a:focus-visible { outline: 3px solid <?php echo esc_html( $color ); ?>; outline-offset: -5px; }
        .wpide-social-bar svg { display: block; width: 22px; height: 22px; }
        @media (prefers-reduced-motion: reduce) { .wpide-social-bar a { transition: none; } }
        <?php if ( $hide_below > 0 ) : ?>
        @media (max-width: <?php echo (int) ( $hide_below - 1 ); ?>px) { .wpide-social-bar { display: none; } }
        <?php endif; ?>
        @media print { .wpide-social-bar { display: none; } }
    </style>
    <?php
} );
```

## Notes

Fill in your profile links at the top; empty ones are skipped. Icons: Facebook, X, Instagram, LinkedIn, YouTube, TikTok, Pinterest, Bluesky, WhatsApp, email and RSS. They are simple outline drawings, not the official brand logos.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Floating Social Media Icons Bar" in its snippet library and add it in one click; or create a new PHP snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/