Member Avatar for muralibobby2015

hello,

i want to display social icons on images like facebook. is there any way to embedd?

Thanks

  • 3 Contributors
  • 2 Replies
  • 104 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by Coloradojaguar

Dani AI

Generated

Two common approaches depending on what you meant by “embed”:

  • overlay the social icon on top of the photo in the browser (keeps the icon clickable and accessible), or
  • permanently bake the icon into the image pixels (useful for exported thumbnails or when you must produce a single flat image).

raised the right distinction; that will help decide which path you need. mentioned badges — many services give badge images or embed snippets you can use as the icon source.

A simple, reliable overlay pattern (HTML + CSS):

<div class="photo">
  <img src="photo.jpg" alt="Photo description">
  <a class="share fb"
     href="https://www.facebook.com/sharer/sharer.php?u=https://example.com"
     aria-label="Share on Facebook"
     target="_blank" rel="noopener noreferrer">
    <img src="fb-icon.svg" alt="">
  </a>
</div>

.photo { position: relative; display: inline-block; }
.photo img { display: block; }
.photo .share { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; }
.photo .share img { width: 100%; height: 100%; display: block; }

Practical tips and troubleshooting:

  • Use inline SVG or an icon font for crisp scaling and fewer requests.
  • Ensure the wrapper is position:relative and the icon has a higher stacking context (z-index) if other overlays exist.
  • Make tap targets at least ~40–44px on mobile.
  • For permanent embedding on the server, composite images with PHP GD or Imagick (load base image, overlay icon with alpha, save).
  • Use aria-label and avoid decorative alt text on the icon image (use alt="") so screen readers focus on the link action.

This covers the two paths and common gotchas so a working overlay or a server-side composite can be implemented cleanly.

Recommended Answers

All 2 Replies

Member Avatar for Member #120589

You want to embed an image inside another image or do you want to place a 'button' on top of an image?

Member Avatar for Coloradojaguar

I'm not sure I understand your question? You can embed your badges for social media on your website just like it is an image. If you want to display your other social media sites on your facebook page then you can add it as an application on Facebook or add it to your posts on Facebook.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.