menu

Krylan | Krzysztof Koperkiewicz

Blog

Ilustracja posta 11

#07 Przyciski udostępniania treści w sieciach społecznościowych – część 1

2017-04-09 / DSP2017 / Komentarze (0) / Wyświetleń:

Tym razem post nie będzie dotyczył mojego projektu konkursowego. Pokażę w nim krótko, jak samodzielnie przygotować treść na stronie do udostępniania jej w serwisach społecznościowych – na przykładzie Facebooka, Twittera oraz Google+.

Pierwsze, co musimy zrobić, to przygotować nasze przyciski do udostępniania. Możemy użyć standardowych przycisków, które oferowane są przez serwisy społecznościowe, jednak wtedy będziemy musieli pogodzić się z tym, że każdy z nich będzie w innym stylu i niekoniecznie będą pasowały do naszej strony. Możemy więc wykonać obrazki, które będą służyły jako te przyciski, lub opisać je za pomocą HTML-a i CSS-a.

Zaczniemy najpierw od ustalenia, na jakim URL-u się obecnie znajdujemy. To ważne, ponieważ ten adres będziemy przekazywać sieci społecznościowej, gdy użytkownik będzie chciał udostępnić naszą stronę. Zapisujemy w zmiennej PHP następującą wartość:

$url = "http://" . $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI'];


Następnie tej zmiennej używamy w tagu "a", który będzie otaczał nasz przycisk do udostępniania. Będzie to wyglądało tak:

<a href="https://www.facebook.com/sharer/sharer.php?u='.urlencode($url).'" target="_blank">
	<img src="img/icons/facebook.png" />
</a>


W moim przypadku przycisk jest obrazkiem, którego kliknięcie przekieruje na stronę Facebooka w nowej karcie (dzięki atrybutowi target="_blank"). Najważniejszą częścią tego kodu jest parametr "u", który znajduje się na końcu adresu. Jako jego wartość zapisujemy naszą zmienną, jednak potraktowaną funkcją urlencode(), która spowoduje, że nasz URL będzie miał nieco inną formę i będzie mógł być przekazany jako parametr.

Dla pozostałych dwóch serwisów społecznościowych kod będzie wyglądał tak:

<a href="https://twitter.com/intent/tweet?url='.urlencode($url).'" target="_blank">
	<img src="img/icons/twitter.png" />
</a>

<a href="https://plus.google.com/share?url='.urlencode($url).'" target="_blank">
	<img src="img/icons/google-plus.png" />
</a>

Poprzedni post
#06 Round Timer – tworzymy w CSS odmierzacz czasu
Następny post
#08 Przyciski udostępniania treści w sieciach społecznościowych – część 2

Komentarze

Wygląda na to, że nic tu nie ma :<

Dodaj komentarz