Sosyal medya paylaşım butonları eklemek için genellikle HTML ve CSS kullanılır. Bu butonlar, kullanıcıların içeriklerinizi sosyal medya platformlarında paylaşmalarını sağlar. İşte basit bir HTML ve CSS örneği:
HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sosyal Medya Paylaşım Butonları</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="social-buttons"> <a href="https://www.facebook.com/sharer/sharer.php?u=your-url" class="facebook" target="_blank">Facebook'ta Paylaş</a> <a href="https://twitter.com/intent/tweet?url=your-url&text=your-text" class="twitter" target="_blank">Twitter'da Paylaş</a> <a href="https://www.linkedin.com/shareArticle?url=your-url&title=your-title" class="linkedin" target="_blank">LinkedIn'de Paylaş</a> </div> </body> </html>
CSS (styles.css):
.social-buttons { display: flex; flex-direction: column; } .social-buttons a { display: inline-block; margin-bottom: 10px; padding: 10px 20px; background-color: #3b5998; /* Facebook mavi */ color: #fff; text-decoration: none; border-radius: 5px; font-size: 16px; } .social-buttons a .twitter { background-color: #1da1f2; /* Twitter mavi */ } .social-buttons a .linkedin { background-color: #0077b5; /* LinkedIn mavi */ }
Bu örnekte, Facebook, Twitter ve LinkedIn için paylaşım butonları oluşturulmuştur. Her bir buton, ilgili sosyal medya platformunun paylaşım URL'sine yönlendirilmiştir. target="_blank" özelliğiyle butonların yeni bir sekmede açılmasını sağlanmıştır. CSS ile butonların görünümü özelleştirilmiştir.
your-url, your-text ve your-title kısımlarını, paylaşılacak içeriğin URL'si, metni ve başlığıyla değiştirmeniz gerekmektedir. Bu şekilde butonlar, kullanıcıların belirlediğiniz içeriği sosyal medya platformlarında paylaşmasına izin verecektir.