Sosyal Medya Paylaşım Html Linklerini Elle Oluşturma

Paylaşan Admin

11 Temmuz 2019 Perşembe

Sosyal medyada paylaş butonları yazı ve sayfalarımızı sosyal hesaplar ile entegre etmemiz için önemlidir. AdsThis, ShareThis vb. gibi benzeri uygulamalar kullanmak istemiyorsanız manüel olarak sosyal medya paylaşım linklerini bu yazıda bulabilirsiniz. Web tasarımında kullanılabilecek sosyal medyada paylaş butonları yaparken bazı durumlarda özel butonlar oluşturmamız gerekebilir. Profesyonel bir görüntü vermek açısından bir kaç saat içinde yapılabilecek bu butonları bir kere tasarlayıp sürekli kullanmak daha doğru olur.



Öncelikle linkleri ve kısa açıklamaları yazıp daha sonra html ile düzenleyerek kullanımını açıklayalım.

Facebook Paylaş Linki

 http://www.facebook.com/sharer.php?u=[sayfa linki]

Twitter Paylaş Linki

 https://twitter.com/share?url=[sayfa linki]&text=[tweet metni]&via=[kullanici]&hashtags=[hashtag1,hashtag2]

Köşeli paraztez yerine içinde yer alan açıklama metnine uygun kendi bilgilerinizi girmeniz gerekiyor.
[sayfa linki]: www.ozkriemitci.com.tr
[tweet metni]: Php ve Web Programlama Bloğu
[kullanici]: ozkiremito
[hashtag1,hashtag2]: blogger,test

Google Plus Paylaş Linki

 https://plus.google.com/share?url=[sayfa linki] 

Pinterest Paylaş Linki

https://www.pinterest.com/pin/create/button/?url=[sayfa linki]&media=[medya url]&description=[içerik açıklamaları]

LinkedIn Paylaş Linki

 http://www.linkedin.com/shareArticle?url=[sayfa linki]&title=[başlık] 

Blogger Paylaş Linki

 https://www.blogger.com/blog-this.g?u=[sayfa linki]&n=[başlık]&t=[içerik açıklamaları] 

WordPress Paylaş Linki

 http://wordpress.com/press-this.php?u=[sayfa linki]&t=[başlık]&s=[içerik açıklamaları]&i=[blog resmi] 

Tumblr Paylaş Linki

 http://www.tumblr.com/share/link?url=[sayfa linki]&name=[başlık]&description=[içerik açıklamaları] 

Reddit Paylaş Linki

 http://reddit.com/submit?url=[sayfa linki]&title=[başlık]

Digg Paylaş Linki

 http://digg.com/submit?url=[sayfa linki]&title=[başlık]

Delicious Paylaş Linki

 https://delicious.com/save?v=5&provider=[kullanici adi]&noui&jump=close&url=[sayfa linki]&title=[başlık]

Pocket Paylaş Linki

 https://getpocket.com/save?url=[sayfa linki]&title=[başlık]

Whatshap(Android İçin) Paylaş Linki

whatsapp://send?text=[sayfa linki] data-action="share/whatsapp/share

Yalnızca android de test ettiğim whatshap paylaşım linki [sayfa linki] alanına eklediğiniz metin veya bağlantıyı whatshap uygulamasını açarak paylaşılacak kişiyi seçmenizi istiyor ardından gönder dediğinizde ne yazmışsanız onu gönderiyor.

Argümanlara baktığımızda, özetle;

[sayfa linki]: Paylaşılacak sayfanın url değeridir.
[medya url]: Pinterest için resim veya video url değeri.
[içerik açıklamaları]: Ekstra açıklamalar.
[başlık]: Bloğun veya sayfanın başlığı
[blog resmi]: Wordpress için yazı resmi
[kullanici adi]: Delicious için paylaşım yapan kullanıcı adı.

Örnek Kullanım;

Bu Yazıyı Paylaş;
Yukarıda örneğini verdiğim gibi butonları test ettiğimde çalıştıklarını söyleyebilirim. Bildiğim kadarıyla özellikle ülkemizde en çok kullanılan sosyal medya mecralarını inceleyerek yazımda yer verdim. Ekstra olarak bu yazıda font-awesome kullanılarak tasarlanmış paylaş butonları yapılabilirdi. Bu yazıyı düzenlediğim ileri bir tarihte bunu da yaparak ekleyeceğimi buraya not almış olayım :)



Yazımı bitirirken; Siz yukarıdaki örneği derleyerek kullanabilirsiniz. JsFiddle.net' e deploy ettim. Dilerseniz kodlara oradan erişebilirsiniz. https://jsfiddle.net/o2a7286p/

Başka başka uygulamalarda görüşünceye dek hoşça kalın :)

KAYNAKLAR
http://crunchify.com/list-of-all-social-sharing-urls-for-handy-reference-social-media-sharing-buttons-without-javascript/
http://www.pontikis.net/blog/easily-share-to-social-media-using-links
https://developers.pinterest.com/docs/widgets/pin-it/
http://stackoverflow.com/questions/22573164/blog-share-on-blogger-link
https://www.whatsapp.com/faq/tr/android/28000012

Bunu Paylaş :