FonPageBuilder Sosyal Paylaşım Bileşeni Son Güncelleme: 04-07-2026

Sosyal Paylaşım Bileşeni Nedir?

FonPageBuilder Sosyal Paylaşım Bileşeni, sayfanıza eklediğinizde ziyaretçilerinizin içeriğinizi tek tıkla farklı platformlarda paylaşmasını sağlayan pratik bir araçtır. Yönetici panelinden hangi sosyal ağların (örneğin Facebook, X/Twitter, LinkedIn, WhatsApp, E-posta vb.) gösterileceğini seçebilir, butonların görünümünü ve stilini özelleştirebilirsiniz.

Önyüzde bileşen aktif hale geldiğinde, seçilen sosyal medya ikonları ziyaretçilere sunulur ve kullanıcılar bulundukları sayfayı doğrudan tercih ettikleri sosyal platformda paylaşabilirler. Böylece hem içeriklerinizin erişimi artar hem de paylaşım süreci ziyaretçileriniz için son derece kolaylaşır.

Sosyal Paylaşım Bileşenini sayfanıza ekledikten sonra Bileşen Düzenleme Araçlarındaki Bileşeni Düzenle ögesine tıkladığınızda açılan Bileşen Düzenleme Penceresindeki ögelerin detaylarına aşağıda erişebilirsiniz.

Genel Ayarlar

• Bileşen Adı
  : Sitenizdeki her bir dil için bileşeninize bir isim verin. Bu isim bileşene göre değişmekle birlikte genelde sadece Yönetici bilgilendirmesi içindir. Yönetim Paneli FonPageBuilder sayfa düzenleme ekranınızdaki satır ve sütunlarda bileşen bu isimle gösterilecektir. Böylece yerleşim düzeninizdeki bileşeni doğru ve kolayca teşhis edebilir ve seçebilirsiniz.

Bileşen Seçenekleri

• Sosyal Medya
  : Hangi sosyal medya platformlarının gösterileceğini seçebilirsiniz. Seçebileğiniz sosyal platformlar: Facebook, X (Twitter), Linkedin, Pinterest, Whatsapp, Reddit, Tumblr, GetPocket, Xing, VK, Telegram, Bluesky, Email
• Sosyal Paylaşım Stili
  : Sosyal paylaşım linklerinin hangi stilde gösterilmesini istediğinizi seçin. Seçebileceğiniz stiller: Düğme, Link, Açılır Liste (Dropdown)
• Açılır Liste Başlığı
  : Sosyal Paylaşım Stili olarak Açılır Liste stilini seçtiğinizde gösterilir. Sitenizdeki aktif her bir dil için Dropdown (Açılır Liste) düğmesinde gösterilmesini istediğiniz tanımlayıcı başlığı girin. Örneğin: Paylaş
• Etiketleri Göster
  : Sosyal paylaşım linklerinde sosyal platform adlarının (etiketler) gösterilip gösterilmeyeceğini seçin. Hayır seçerseniz sadece sosyal medya simgesi (ikon) gösterilir.
• Renk Şeması
  : Sosyal paylaşım linklerinin gösterilmesini istediğiniz renk şemasını seçin. Bu seçenek sadece Düğme ve Açılır Liste sosyal paylaşım stillerinde gösterilir. Seçebileceğiniz değerler:

  • Varsayılan: Varsayılan rengi kullanır. Tüm paylaşım linkleri Düğme stilinde rosyal platformun renkleri, Açılır Liste stilinde ise tema varsayılan rengi ile gösterilir.
  • Birincil: Tema birincil rengi kulllanır. Tüm paylaşım linkleri tema birincil renginde gösterilir.
  • İkincil: Tema ikincil rengi kulllanır. Tüm paylaşım linkleri tema ikincil renginde gösterilir.
  • Özel: Seçeceğiniz özel renk kombinasyonlarını kullanır.
• Sosyal Paylaşım Metin Rengi
  : Sosyal paylaşım linklerine ait metin rengini seçin. Bu seçenek sadece Düğme ve Açılır Liste sosyal paylaşım stillerinde ve Özel renk şeması seçildiğinde gösterilir. Seçebileceğiniz değerler:

  • Normal: Normal durumdaki link rengini seçin.
  • Üzerinde: Üzerine gelindiğindeki link rengini seçin.
• Sosyal Paylaşım Arkaplan Rengi
  : Sosyal paylaşım linklerine ait arkaplan rengini seçin. Bu seçenek sadece Düğme ve Açılır Liste sosyal paylaşım stillerinde ve Özel renk şeması seçildiğinde gösterilir. Seçebileceğiniz değerler:

  • Normal: Normal durumdaki link arkaplan rengini seçin.
  • Üzerinde: Üzerine gelindiğindeki link arkaplan rengini seçin.
• Kenar Yuvarlatma
  : Sosyal paylaşım düğmelerinin köşelerinin yuvarlatma değerini dirin. Bu seçenek sadece Düğme sosyal paylaşım stiinde gösterilir.
• İçerik Hizalama
  : Sosyal paylaşım linklerinin sayfa içerisinde yatay (x) düzlemde nasıl hizalanacağını seçin. Seçebileceğiniz değerler: Sol, Orta, Sağ

Bileşen Stil Ayarları

• Sınıf
  : Bileşen için özel CSS sınıfı/sınıfları tanımlamak isterseniz burayı kullanabilrsiniz. Daha sonra CSS stil dosyanızdan ilgili sınıf ile ilgili biçimlendirmeleri buraya başvurarak gerçekleştirebilirsiniz. Örneğin:light-grey-rounded-box
• Dahili Stil
  : Bileşen için css biçimlendirmesini harici tema css dosyalarınız yerine doğrudan bu alana yazacağınız css kodu ile gerçekleştirebilirsiniz. Eklediğiniz css biçimlendirmesini sadece bu bileşen için aktif olmasını ve aynı css sınıfına sahip olan sayfadaki diğer ögeleri etkilememesini istiyorsanız stil kodunuz içerisinde @widgetId ibaresinden sonra stil kodunuzu ekleyebilirsiniz. @widgetId önyüzde, sistem tarafından otomatik oluşturulurulan id ile değiştirilir. Sosyal Paylaşım Bileşeni içerisinde biçimlendirebileceğiniz css sınıflarını, site önyüzünüzde bileşenin bulunduğu sayfadayken Tarayıcınızda F12 - Geliştirici araçlarından Code Inspection ile .fon-text-html-widget css sınıfı altından inceleyebilirsiniz.

  												
  @widgetId .light-grey-rounded-box{
  	background-color: #f8f9fa;
  	border: 1px solid #e9ecef;
  	border-radius: 5px;
  }
  												
  											

Bileşen Penceresi Kayıt Düğmeleri

• Sayfayı Kaydet
  : Bileşende gerçekleştirdiğiniz değişiklikler ve sayfada gerçekleştirdiğiniz tüm değişiklikler veritabanına kaydedilir ve aktif Bileşen Düzenleme Penceresi kapatılır.
• Kaydet & Düzenle
  : Bileşende gerçekleştirdiğiniz değişiklikler bileşen kodu içerisine kaydedilir ve aktif Bileşen Düzenleme Penceresi kapatılır. Sayfanızda yaptığınız değişikler henüz kaydedilmemiştir. Sayfanızı kaydetmek için mutlaka sayfanın sağ kenarında bulunan MENU çubuğu altından Kaydet düğmesine tıklamanız gerekir.