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.