Home / Archive / Floating Social Media Icons
Duplicate Snippet

Embed Snippet on Your Site

Floating Social Media Icons

Display your Social Media accounts in a floating sidebar.

90+
Code Preview
php
<?php
    // Define social media links
    $facebook_link = 'https://facebook.com/yourprofile';
    $twitter_link = 'https://twitter.com/yourprofile';
    $instagram_link = 'https://instagram.com/yourprofile';
    $linkedin_link = 'https://linkedin.com/in/yourprofile';
    echo '
    <style>
        .floating-social-icons {
            position: fixed;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            z-index: 1000;
        }
        .floating-social-icons a {
            display: block;
            margin: 5px 0;
            width: 40px;
            height: 40px;
            background-color: #333;
            color: white;
            text-align: center;
            line-height: 40px;
            border-radius: 50%;
            transition: background-color 0.3s;
        }
        .floating-social-icons a:hover {
            background-color: #000;
        }
        .floating-social-icons a svg {
            width: 20px;
            height: 20px;
            fill: white;
            vertical-align: middle;
        }
    </style>
    <div class="floating-social-icons">
        <a href="' . esc_url( $facebook_link ) . '" target="_blank" rel="noopener">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                <path d="M22.675 0h-21.35c-.734 0-1.325.591-1.325 1.325v21.351c0 .733.591 1.324 1.325 1.324h11.494v-9.294h-3.125v-3.622h3.125v-2.672c0-3.1 1.892-4.787 4.654-4.787 1.325 0 2.463.099 2.794.143v3.241l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.311h3.587l-.467 3.622h-3.12v9.294h6.116c.733 0 1.324-.591 1.324-1.324v-21.351c0-.734-.591-1.325-1.324-1.325z"/>
            </svg>
        </a>
        <a href="' . esc_url( $twitter_link ) . '" target="_blank" rel="noopener">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.611 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-2.723 0-4.928 2.205-4.928 4.928 0 .386.043.762.127 1.124-4.094-.205-7.725-2.165-10.148-5.144-.424.729-.666 1.574-.666 2.475 0 1.708.869 3.215 2.19 4.099-.807-.026-1.566-.247-2.229-.616v.062c0 2.385 1.697 4.374 3.946 4.827-.413.112-.849.171-1.299.171-.317 0-.626-.031-.929-.088.626 1.956 2.444 3.379 4.6 3.419-1.68 1.318-3.799 2.105-6.1 2.105-.396 0-.788-.023-1.176-.069 2.179 1.396 4.768 2.212 7.548 2.212 9.054 0 14.004-7.498 14.004-13.986 0-.213-.005-.425-.014-.637.962-.693 1.797-1.562 2.457-2.549z"/>
            </svg>
        </a>
        <a href="' . esc_url( $instagram_link ) . '" target="_blank" rel="noopener">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                <path d="M12 2.163c-3.204 0-3.584.012-4.85.07-1.366.062-2.633.336-3.608 1.311-.975.975-1.249 2.243-1.311 3.608-.058 1.266-.07 1.646-.07 4.85s.012 3.584.07 4.85c.062 1.366.336 2.633 1.311 3.608.975.975 2.243 1.249 3.608 1.311 1.266.058 1.646.07 4.85.07s3.584-.012 4.85-.07c1.366-.062 2.633-.336 3.608-1.311.975-.975 1.249-2.243 1.311-3.608.058-1.266.07-1.646.07-4.85s-.012-3.584-.07-4.85c-.062-1.366-.336-2.633-1.311-3.608-.975-.975-2.243-1.249-3.608-1.311-1.266-.058-1.646-.07-4.85-.07zm0-2.163c3.259 0 3.667.012 4.947.072 1.352.062 2.786.332 3.851 1.397 1.065 1.065 1.335 2.499 1.397 3.851.059 1.28.072 1.688.072 4.947s-.012 3.667-.072 4.947c-.062 1.352-.332 2.786-1.397 3.851-1.065 1.065-2.499 1.335-3.851 1.397-1.28.059-1.688.072-4.947.072s-3.667-.012-4.947-.072c-1.352-.062-2.786-.332-3.851-1.397-1.065-1.065-1.335-2.499-1.397-3.851-.059-1.28-.072-1.688-.072-4.947s.012-3.667.072-4.947c.062-1.352.332-2.786 1.397-3.851 1.065-1.065 2.499-1.335 3.851-1.397 1.28-.059 1.688-.072 4.947-.072zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.162 6.162 6.162 6.162-2.759 6.162-6.162-2.759-6.162-6.162-6.162zm0 10.324c-2.291 0-4.162-1.871-4.162-4.162s1.871-4.162 4.162-4.162 4.162 1.871 4.162 4.162-1.871 4.162-4.162 4.162zm6.406-11.845c-.796 0-1.441-.645-1.441-1.441s.645-1.441 1.441-1.441 1.441.645 1.441 1.441-.645 1.441-1.441 1.441z"/>
            </svg>
        </a>
        <a href="' . esc_url( $linkedin_link ) . '" target="_blank" rel="noopener">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                <path d="M22.23 0h-20.46c-.976 0-1.77.794-1.77 1.77v20.46c0 .976.794 1.77 1.77 1.77h20.46c.976 0 1.77-.794 1.77-1.77v-20.46c0-.976-.794-1.77-1.77-1.77zm-15.785 20.452h-3.662v-11.97h3.662v11.97zm-1.831-13.62c-1.169 0-2.118-.948-2.118-2.117s.949-2.117 2.118-2.117c1.169 0 2.118.948 2.118 2.117s-.949 2.117-2.118 2.117zm15.085 13.62h-3.662v-5.789c0-1.379-.027-3.155-1.944-3.155-1.946 0-2.243 1.52-2.243 3.055v5.889h-3.662v-11.97h3.516v1.637h.05c.49-.933 1.688-1.917 3.476-1.917 3.715 0 4.401 2.444 4.401 5.621v6.629z"/>
            </svg>
        </a>
    </div>
    ';

Comments

Add a Comment