Adding Social Media Share Options to a JavaScript-Based Web App

As a software enthusiast currently working on a fun and interactive Memory Game, I wanted to provide users with an easy way to share their results with friends on social media platforms. This article walks you through how I implemented social media sharing when the Game Over modal appears, using JavaScript, HTML, and CSS.

Setting Up Social Media Share Links

The goal was to allow users to share their game results via Facebook, WhatsApp, Viber, and Instagram with dynamically generated messages.

Implementing the Share Logic in JavaScript

To generate shareable content dynamically, I created a function called updateShareLinks. This function extracts the game results (time and moves), formats a message, and updates social media links.

function updateShareLinks() {
    const time = document.getElementById('final-time').innerText;
    const moves = document.getElementById('final-moves').innerText;
    const gameUrl = window.location.href;
    const message = `I've solved the memory game in ${time} seconds in ${moves} moves! Can you do it better? Check out the game here: ${gameUrl}`;
    const encodedMessage = encodeURIComponent(message);

    document.getElementById('shareFacebook').href = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(gameUrl)}`;
    document.getElementById('shareWhatsApp').href = `https://wa.me/?text=${encodedMessage}`;
    document.getElementById('shareViber').href = `viber://forward?text=${encodedMessage}`;
    document.getElementById('shareInstagram').href = `https://www.instagram.com/?url=${encodeURIComponent(gameUrl)}`;
}

window.addEventListener('load', updateShareLinks);

Integrating the Share Options in the Game Over Modal

To display sharing options, I added buttons inside the Game Over modal, each linking to the appropriate platform.

<div class="modal">
		<div class="modal-inner">
			<h3>Phenomenal!</h3>
			<p class="modal-text">You solved the memory game in <span id="final-time"></span> seconds in <span id="final-moves"></span> moves!</p>
			<p class="modal-text" id="final-rating"></p>
			<p class="modal-text" id="replay"> <i class="fas fa-redo-alt"></i> Play again?</p>
			<button id="copyResultsButton">Copy your result and send it to your friend!</button>
				<div class="share-buttons">
					<p>Share your results with your friends:</p>
					<a id="shareFacebook" class="share-btn fb" target="_blank">📘 Facebook</a>
					<a id="shareWhatsApp" class="share-btn wa" target="_blank">📱 WhatsApp</a>
					<a id="shareViber" class="share-btn vb" target="_blank">📩 Viber</a>
					<a id="shareInstagram" class="share-btn ig" target="_blank">📸 Instagram</a>
				</div>
		</div>
		
	</div>

Styling the Share Buttons with CSS

To make the share buttons visually appealing, I applied basic CSS styling:

.share-buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 10px;
}
.share-btn {
	padding: 8px 12px;
	text-decoration: none;
	border-radius: 5px;
	color: white;
}
.fb { background: #3b5998; }
.wa { background: #25d366; }
.vb { background: #7360f2; }
.ig { background: #E1306C; }

Ensuring Share Links Are Updated on Game Over

I ensured that updateShareLinks() is called when the Game Over modal appears, so that the most recent game results are included.

function checkwin(num) {
    let won;
    if (difficultyClass === 'normal' && num === 8) {
        won = true;
    }
    if (won === true) {
        setTimeout(function() {
            document.getElementById('final-time').innerText = timer.innerText;
            document.getElementById('final-moves').innerText = moves;
            modal.classList.remove('hide');
            clearInterval(setTimer);

            updateShareLinks();

        }, 1000);
    }
}

Conclusion

With this implementation, players can easily share their game results with friends on various social media platforms. This feature helps increase engagement and encourages friendly competition.