Dynamic Social Media Link Buttons Display

INFORMATION & CODE

Dynamic Social Media Link Buttons Display

what the Code Does

The code creates a dynamic social-media button interface. The HTML provides a central square containing four social-media sections for Facebook, Twitter/X, Reddit, and GitHub. Each section contains an icon and is given a class that identifies its position and purpose. The four empty <p> elements inside .textBox are used by JavaScript to display the corresponding social-media link code when an icon is clicked.

How the Code Works

The CSS controls the appearance, positioning, colours, sizing, and animations. The .outer and .inner elements form the main containers, while .top-left, .top-right, .bottom-left, and .bottom-right position the four social-media buttons. Initially, the buttons are stacked in the centre and the icons are hidden. When the interface is opened, the containers expand and the four buttons move into the corners using CSS transforms and transitions. The --facebook-color, --twitter-color, and other variables are expected to be defined in a :root section.

The JavaScript first obtains references to the HTML elements using querySelector() and querySelectorAll(). The openFacebook(), openTwitter(), openReddit(), and openGithub() functions place example window.location.href code into their respective paragraphs. In other words, clicking a social-media icon does not actually open the social-media page; it displays the JavaScript code that could be used to navigate to that page. You need to replace the placeholder text such as "your name and Facebook link code" with the appropriate profile or page address.

The openOuter() function controls the main animation. When the interface is closed, clicking the central area enlarges .outer and .inner, moves the four coloured sections into the corners, hides the "Follow Me At..." text, and displays the social-media icons. Clicking again reverses these changes, returning the interface to its original compact state.

The .textBox has a click event listener that clears all four generated pieces of text. Therefore, after clicking a social-media icon and seeing its JavaScript code displayed, clicking the text area removes the generated text. This matches the instruction shown at the top of the page.

How to Use the Code

To use the component, place the HTML in your webpage, put the CSS in styles.css, and put the JavaScript in scripts.js. You should also make sure Font Awesome is loaded if you want the Facebook, Twitter/X, Reddit, and GitHub icons to appear, because the HTML uses classes such as fab fa-github. Finally, replace each placeholder social-media URL in the JavaScript with your actual links.

HTML


                <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Dynamic Social Media Link Buttons Display</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div class="outer_page">
      <h1>Dynamic Social Media Buttons</h1>
      <p class="info">How to adapt the JS share on social media. — Click on the generated text below to remove it.</p>
      <div class="outer">
        <div class="inner">
          <div class="bottom-right" onclick="openOuter()">
            <i class="fab fa-github" onclick="openGithub()"></i>
          </div>
          <div class="bottom-left" onclick="openOuter()">
            <i class="fab fa-reddit-alien" onclick="openReddit()"></i>
          </div>
          <div class="top-right" onclick="openOuter()">
            <i class="fab fa-twitter" onclick="openTwitter()"></i>
          </div>
          <div class="top-left" onclick="openOuter()">
            <p id="text">Follow Me At . . .<br>CLICK HERE</p>
            <i class="fab fa-facebook-f" onclick="openFacebook()"></i>
          </div>
        </div>
      </div>
            
      <div class="textBox">
        <p class="fbook"></p>
        <p class="twitt"></p>
        <p class="redit"></p>
        <p class="githb"></p>
      </div>
    </div>
    <script src="scripts.js"></scripts>
  </body>
</html>

CSS


                      :root {
        --out-color: #f1f1f1;
        --light-color: #c3c3c3;
        --verylight-color: #dfdfdf;
        --facebook-color: #3b5999;
        --twitter-color: #1c9dec;
        --reddit-color: #d7d7d7;
        --github-color: #333333;
        --icon-size: 120px;
        --icon-offset: calc(var(--icon-size) * 0.1);
      }

      * {
        box-sizing: border-box;
        font-family: "Press Start 2P", VT323, cursive;
      }
                  
      .outer {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -30%);
        width: 250px;
        height: 250px;
        background-color: var(--out-color);
        box-shadow: 2px 8px 15px #555;
        transition-duration: 1s;
      }

      h1 {
        position: relative;
        top: -30px;
        font-family: "VT323", cursive;
      }
      .info {
        position: relative;
        top: -80px;
        color: #000000;
        line-height: 1;
      }
      .inner {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 210px;
        height: 210px;
        background-color: #fff;
        box-shadow: inset 0 0 10px #000;
        transition-duration: 1s;
      }
      .bottom-right {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 150px;
        height: 150px;
        background-color: var(--github-color);
        transition-duration: 1s;
      }
      .bottom-left {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 150px;
        height: 150px;
        background-color: var(--reddit-color);
        transition-duration: 1s;
      }
      .top-right {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 150px;
        height: 150px;
        background-color: var(--twitter-color);
        transition-duration: 1s;
      }
      .top-left {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 150px;
        height: 150px;
        background-color: var(--facebook-color);
        transition-duration: 1s;
      }
      
      p {
        padding: 22px 20px;
        color: #ffffff;
        font-size: 20px;
        font-weight: 700;
        text-align: center;
      }
      .textBox {
        position: absolute;
        top: 100px;
        width: 100%;
        height: 150px;
        padding: 20px;
        
      }
      .fbook {
        position: relative;
        top: 0;
        color: #777777;
        text-align: left;
      }
      .twitt {
        position: relative;
        top: -70px;
        color: #777777;
        text-align: left; 
      }
      .redit {
        position: relative;
        top: -140px;
        color: #777777;
        text-align: left; 
      }
      .githb {
        position: relative;
        top: -210px;
        color: #777777;
        text-align: left; 
      }
      .fab {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: none;
        color: #fff;
        font-size: var(--icon-size);
      }
      .fab.fa-facebook-f {
        display: none;
      }

JAVASCRIPT


                var i;
var outer = document.querySelector(".outer");
var inner = document.querySelector(".inner");
var tleft = document.querySelector(".top-left");
var tright = document.querySelector(".top-right");
var bleft = document.querySelector(".bottom-left");
var bright = document.querySelector(".bottom-right");
var text = document.querySelector("#text");
var fab = document.querySelectorAll(".fab");
var textBox = document.querySelector(".textBox");
var fbook = document.querySelector(".fbook");
var twitt = document.querySelector(".twitt");
var redit = document.querySelector(".redit");
var githb = document.querySelector(".githb");
      
function openFacebook() {
  fbook.textContent = 'window.location.href="https://www.facebook.com/your Facebook share code";' 
}

function openTwitter() {
  twitt.textContent = 'window.location.href="https://x.com/your Twitter share code";'
}

function openReddit() {
  redit.textContent = 'window.location.href="https://redditinc.com/your Reddit share code";'
}

function openGithub() {
  githb.textContent = 'window.location.href="https://github.com/your Github share code";'
}

textBox.addEventListener('click', () => {
  fbook.textContent = '';
  twitt.textContent = '';
  redit.textContent = '';
  githb.textContent = '';
});

function openOuter() {
  if (text.style.display == "none") {
    outer.style.width = "230px";
    outer.style.height = "230px";
    inner.style.width = "190px";
    inner.style.height = "190px";
    tleft.style.transform = "translate(-50% , -50%) rotate(0deg)";
    tright.style.transform = "translate(-50% , -50%) rotate(0deg)";
    bleft.style.transform = "translate(-50% , -50%) rotate(0deg)";
    bright.style.transform = "translate(-50% , -50%) rotate(0deg)";
    text.style.display = "block";
    for (i = 0; i < fab.length; i++) {
      fab[i].style.display = "none";
    }
  }else{
    outer.style.width = "380px";
    outer.style.height = "380px";
    inner.style.width = "340px";
    inner.style.height = "340px";
    tleft.style.transform = "translate(-100% , -100%) rotate(360deg)";
    tright.style.transform = "translate(0% , -100%) rotate(360deg)";
    bleft.style.transform = "translate(-100% , 0%) rotate(360deg)";
    bright.style.transform = "translate(0% , 0%) rotate(360deg)";
    text.style.display = "none";
    for (i = 0; i < fab.length; i++) {
      fab[i].style.display = "block";
    }
  }
}

MENU

INFORMATION & CODE