The Simplest (and Most Performant) Way to Offer Sharing Links for Social Media

Tego lata napisałem The Essential Meta Tags for Social Media o tym, jak programiści mogą przygotować strony internetowe, aby zoptymalizować ich wygląd, gdy są udostępniane w mediach społecznościowych. Ale co z tworzeniem linków, które pozwolą użytkownikom dzielić się tymi stronami? Facebook, Twitter i LinkedIn oferują wiele sposobów, aby to zrobić, niektóre z nich obejmują generatory przycisków, a inne wymagają zewnętrznego JavaScriptu. Aby uniknąć tego wszystkiego, możesz jednak stworzyć własne linki do udostępniania stron internetowych. A najlepsze jest to, że jest to proste do zrobienia samemu. Oto jak.

Podstawowa koncepcja: Just a Link

Podczas udostępniania stron internetowych za pomocą linków, zasadniczo składasz żądanie GET (tj. klikając link) do adresu URL dostarczonego przez każdą usługę mediów społecznościowych. Następnie, poprzez dołączenie serii par nazwa / wartość (parametry zapytania, takie jak ?title=Tytuł) do końca tego adresu URL, można spekulować adres URL strony internetowej, którą chcesz udostępnić i, czasami, dodatkowe informacje.

Teraz, niektóre symbole w żądaniach GET znane jako „zastrzeżone znaki”, muszą być zakodowane prawidłowo, tak aby nie zakłócać normalnych funkcji przeglądarki. Znaki te podlegają „kodowaniu procentowemu” – to znaczy, że są reprezentowane w parametrach zapytania za pomocą znaku „%”, po którym następuje dwucyfrowy kod heksadecymalny. Oto zastrzeżone znaki i ich odpowiedniki kodowane procentowo.

.

Uwaga: Spacja może być reprezentowana przez „%20” lub „+”.

Oczywiście, nie ma potrzeby zapamiętywania tych kodów heksadecymalnych. Istnieje wiele zasobów, które dostarczają konwersji (Bing ma jedną wbudowaną w wyszukiwarkę) i, jak wkrótce zobaczysz, JavaScript może również wykonywać ciężką pracę w tym zakresie. Przyjrzyjmy się kilku bardziej popularnym usługom mediów społecznościowych i dowiedzmy się, jak możemy udostępniać strony internetowe za ich pośrednictwem.

Facebook

Patrząc na ich Przewodnik dla programistów, Facebook określa następujący adres URL do składania żądań GET podczas udostępniania strony internetowej:

https://www.facebook.com/dialog/share

Pomimo, że dostępne są cztery parametry zapytania, wymagane są tylko dwa: adres URL strony internetowej, którą chcesz udostępnić oraz App ID, który programiści mogą uzyskać rejestrując się na Facebooku. Jeśli nie masz App ID, proces rejestracji nie jest uciążliwy, ale nie ma potrzeby zawracać sobie głowy, gdy istnieje jeszcze prostsze rozwiązanie.

Oryginalna metoda Facebooka udostępniania stron internetowych, bez wymaganego App ID, nie jest już wymieniona w żadnej z ich dokumentacji, ale nadal jest obsługiwana. W rzeczywistości, z niezliczoną ilością stron internetowych korzystających z tej metody, nie mogę sobie wyobrazić, że zostanie ona zdeprecjonowana w najbliższym czasie. Ten adres URL to:

https://www.facebook.com/sharer.php

Jedynym dostępnym parametrem jest „u”, który jest używany do określenia adresu URL strony internetowej, którą chcesz udostępnić. Oto przykład, który udostępnia stronę główną CSS-Tricks na Facebooku – proszę bardzo, wytnij i wklej do przeglądarki, aby zobaczyć rezultat.

https://www.facebook.com/sharer.php?u=http%3A%2F%2Fcss-tricks.com%2F

Jak wcześniej wyjaśniono, udostępniony URL jest koniecznie zakodowany procentowo. Należy również zwrócić uwagę na to, że „?” oznacza początek pierwszego parametru zapytania. Kolejne parametry zapytania są oddzielone przez „&”, jak będzie widać wkrótce.

Twitter

Twitter odnosi się do udostępniania strony internetowej poprzez URL jako Tweet Web Intent – adres URL do użycia to:

https://twitter.com/intent/tweet

W przeciwieństwie do Facebooka, gdzie tylko strona internetowa może być określona, Twitter pozwala na dołączenie tekstu i dowolnej liczby hashtagów. Użytkownicy będą mieli możliwość edycji tego wszystkiego przed tweeting, ale to daje im przewagę w przypadku, gdy nie mogą być kłopotliwe. Na przykład, powiedzmy, że chcesz tweetować następujące informacje:

Adres URL do tego, z parametrami zapytania zakodowanymi procentowo i z dodanymi dla przejrzystości podziałami wierszy, to:

https://twitter.com/intent/tweet?url=http%3A%2F%2Fcss-tricks.com%2F&text=Tips%2C+Tricks%2C+and+Techniques+on+using+Cascading+Style+Sheets.&hashtags=css,html

A to daje:

Zauważymy, że Twitter wstępnie zaznacza tekst, co pozwala na łatwą edycję przez użytkownika. I, pamiętaj, tweet musi być poniżej 140 znaków, więc najlepiej nie dostarczać żadnych kopii, które są zbyt długie. W celu uproszczenia, pominąłem omawianie trzech mniej używanych parametrów, które można znaleźć opisane szczegółowo na Twitter’s Dokumentacja deweloperów. Te dodatkowe parametry pozwalają określić nazwę użytkownika związanego z tweetem, sugerowane powiązane nazwy użytkowników i ID powiązanego tweeta.

LinkedIn

Adres URL do użycia podczas udostępniania na LinkedIn to:

https://www.linkedin.com/shareArticle

W sumie dostępnych jest pięć parametrów wyszczególnionych na tym wykresie zaczerpniętym z dokumentacji programistów LinkedIn:

Oprócz adresu URL strony internetowej, którą chcesz udostępnić, wymagany jest jeszcze jeden parametr zapytania o nazwie „mini”. Ale, jak widać, jego wartość nigdy się nie zmienia, więc możemy go zakodować w adresie URL. Aby zademonstrować, podzielmy się następującym tekstem na LinkedIn:

To daje następujący adres URL – ponownie, podziały linii dodane dla jasności:

https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.css-tricks.com%2F&title=CSS-Tricks&summary=Tips%2C+Tricks%2C+and+Techniques+on+using+Cascading+Style+Sheets.&source=CSS-Tricks

Chociaż nie jest to wyraźnie wspomniane w ich dokumentacji, jeśli parametr „title” zostanie pominięty, LinkedIn pobierze tę zawartość z tagu Open Graph <meta property="og:title"> z udostępnionej strony. Podobnie, jeśli parametr „summary” zostanie pominięty, użyty zostanie tag Open Graph <meta property="og:description">. Jeśli chodzi o parametr „source”, nic w dokumentacji nie określa, w jaki sposób ta wartość jest używana lub wyświetlana podczas udostępniania strony internetowej – wygląda na to, że można ją bezpiecznie zignorować.

Wiedząc o tym wszystkim, jeśli udostępniana strona posiada odpowiednie znaczniki Open Graph, wystarczy podać adres URL, ponieważ parametry „title” i „summary” będą odpowiednio wypełnione.

Układanie wszystkiego razem

Gdy znamy już składnię, której należy używać podczas udostępniania stron internetowych w mediach społecznościowych, jak dokładnie możemy zaimplementować ten kod? Być może najczęstszym sposobem jest po prostu wypisanie grupy linków do udostępniania odpowiednio wystylizowanych za pomocą CSS:

<ul> <li><a href="https://www.facebook.com/sharer.php?..." target="blank" rel="noopener noreferrer"><img src="facebook-icon.png" alt="Share Page on Facebook" /></a></li> <li><a href="https://twitter.com/intent/tweet?..." target="blank" rel="noopener noreferrer"><img src="twitter-icon.png" alt="Share Page on Twitter" /></a></li> <li><a href="https://www.linkedin.com/shareArticle?..." target="blank" rel="noopener noreferrer"><img src="linkedin-icon.png" alt="Share Page on LinkedIn" /></a></li></ul>

Dodanie target="_blank" w znaczniku zakotwiczenia pozwala na wyświetlenie okna dialogowego udostępniania w nowym oknie lub karcie, co działa dobrze na wszystkich urządzeniach, od komputerów stacjonarnych po urządzenia mobilne.

Ale twarde kodowanie tych linków, z procentowym kodowaniem parametrów zapytania, może być żmudne i podatne na błędy. Dla każdej strony internetowej dynamicznie obsługiwanej przez CMS, byłaby to doskonała okazja, aby mieć te dane wykonywane po stronie serwera i wstawiane tam, gdzie jest to potrzebne w HTML.

Inną opcją jest użycie Social Media Sharing: HTML Links Generator, który stworzyłem na CodePen. Pozwala on na wprowadzenie dowolnych lub wszystkich niezbędnych parametrów, które właśnie przejrzeliśmy, a on wyświetli odpowiedni kod HTML, który możesz wstawić do swojego własnego kodu.

Zobacz Pen Social Media Sharing: HTML Links Generator autorstwa Adama Coti (@adamcoti) na CodePen.

Jako freelancer pracujący prawie wyłącznie nad front-endem, zdecydowałem się na użycie funkcjonalności JavaScript/jQuery, która bez dostosowywania, działa jako gotowe rozwiązanie dla moich projektów. W ten sposób mogę być pewny, że wszystkie linki udostępniania będą prawidłowo obsługiwane, niezależnie od tego, czy pracuję nad statyczną stroną internetową, dostosowuję motywy WordPress, czy przekazuję szablony do zintegrowania z CMS.

To jest HTML, którego używam, z klasami oznaczającymi konkretną usługę udostępniania. W JavaScript funkcja setShareLinks(), która dołącza zdarzenia click do przycisków udostępniania, jest wywoływana, gdy obiektowy model dokumentu (DOM) jest gotowy:

<ul> <li class="social-share facebook"><img src="facebook-icon.png" alt="Share Page on Facebook" /></li> <li class="social-share twitter"><img src="twitter-icon.png" alt="Share Page on Twitter" /></li> <li class="social-share linkedin"><img src="linkedin-icon.png" alt="Share Page on LinkedIn" /></li></ul>

function socialWindow(url) { var left = (screen.width - 570) / 2; var top = (screen.height - 570) / 2; var params = "menubar=no,toolbar=no,status=no,width=570,height=570,top=" + top + ",left=" + left; window.open(url,"NewWindow",params);}function setShareLinks() { var pageUrl = encodeURIComponent(document.URL); var tweet = encodeURIComponent(jQuery("meta").attr("content")); jQuery(".social-share.facebook").on("click", function() { url = "https://www.facebook.com/sharer.php?u=" + pageUrl; socialWindow(url); }); jQuery(".social-share.twitter").on("click", function() { url = "https://twitter.com/intent/tweet?url=" + pageUrl + "&text=" + tweet; socialWindow(url); }); jQuery(".social-share.linkedin").on("click", function() { url = "https://www.linkedin.com/shareArticle?mini=true&url=" + pageUrl; socialWindow(url); })}

Adres URL bieżącej strony internetowej można łatwo uzyskać, odczytując właściwość obiektu document. A w przypadku Twittera znacznik Open Graph <meta property="og:description"> wygodnie zapewnia odpowiednią treść domyślnego tweeta.

Teraz, na prośbę niektórych moich klientów, uruchamiam nowo utworzony adres URL w dodatkowym (wyskakującym) oknie o specjalnej wielkości, wykorzystując window.open(). W większości przeglądarek na pulpicie, to okno jest umieszczone poziomo i pionowo wyśrodkowane na ekranie. Co ciekawe, jeśli użytkownik jest zalogowany do swojego konta w mediach społecznościowych, Facebook i LinkedIn zmienią rozmiar tego dodatkowego okna do odpowiednich wymiarów. Twitter tego nie robi, więc używam domyślnej szerokości i wysokości, która zapewnia mu wystarczająco dużo miejsca. Jeśli chodzi o responsywność, tablety i urządzenia mobilne interpretują dodatkowe okno jako nową kartę. Demonstracja tej funkcjonalności znajduje się na CodePen.

See the Pen Social Media Sharing: Automated Link Creator by Adam Coti (@adamcoti) on CodePen.

Ale używanie wyskakującego okienka, choć kiedyś powszechne, jest obecnie odradzane ze względu na dostępność. Prostym rozwiązaniem jest ustawienie zmiennej params na pusty ciąg w powyższym JavaScript. W ten sposób URL zostanie uruchomiony w nowym oknie lub karcie, w zależności od ustawień przeglądarki użytkownika.

Wnioski

Jak mówi makabryczne powiedzenie, jest wiele sposobów na oskórowanie kota. Powyższa technika jest po prostu moją preferowaną metodą. Możesz mieć lepszy, bardziej zoptymalizowany sposób. Być może używając atrybutów danych w HTML (aby określić hashtagi, na przykład), które mogą być odczytane przez JavaScript i dołączone jako parametr zapytania w razie potrzeby. Mam nadzieję, że to może przynajmniej służyć jako inspiracja dla twojej własnej implementacji.