Tag: porady

Własny skrypt do skracania linków na przykładzie YOURLS

hostingi

Większość z nas zna i pewnie nawet korzystało z serwisów, które skracają adresy URL linków. Najbardziej znane skracacze linków to tiny.pl czy bit.ly. Zasada działania tego typu serwisów, polega na utworzeniu specjalnego linku w krótkiej domenie z krótkim adresem, z innego nawet bardzo długiego linku strony lub podstrony dowolnego serwisu internetowego.

Przykład. Link do tego artykułu jest dość długi:

https://rankhost.pl/wlasny-skrypt-do-skracania-linkow-na-przykladzie-yourls/

Natomiast po skróceniu, będzie miał taką postać:

https://tiny.pl/d98vn

Gołym okiem widać, że ten drugi adres jest dużo krótszy i ładniej wygląda dla oka. No i składa się w mniejszej ilości znaków, co jest przydatne w publikowaniu linków w serwisach społecznościowych typu X.com (dawniej Twitter), gdzie ilość znaków w postach jest limitowana.

Oczywiście tego typu gotowe rozwiązania, mają wiele wad. Główną jest to, że nie masz pełnej kontroli nad tymi skróconymi linkami. Zewnętrzny serwis może je kiedyś skasować lub po prostu zwinąć interes. Dlatego najlepszym rozwiązaniem jest stworzenie własnego serwisu, który będzie pełnił tę funkcję. Poza pełną kontrolną nad linkami ważne jest to, że możesz go utworzyć we własnej nazwie, czyli domenie internetowej. Może to być bardzo przydatne narzędzie dla osób zajmujących się afiliacją, gdyż linki partnerskie można umieszczać pod własnymi unikalnymi adresami.

Do stworzenia tego typu witryny, jako przykład posłuży nam skrypt do skracania linków o nazwie YOURLS. Skrypt jest udostępniony na licencji open source, więc jest zupełnie darmowy. Niestety hosting i domena internetowa, które są potrzebne do jego wykonania są już płatne, ale to też nie jest aż tak dużo. Koszt ok. 100-150 zł na rok za własny serwis do skracania adresów, to nie jest wygórowana cena. W artykule przedstawię dwie ścieżki do samodzielnego stworzenia tego typu serwisu.

Metoda prostsza – dla osób mniej technicznych

Jeśli nie czujesz się na siłach lub nie masz czasu na ręczną instalację skryptu, to najprościej jest znaleźć hosting, który oferuje gotowy autoinstalator z tym systemem. Oczywiście takich hostingów jest dużo, my np. polecamy Seohost.pl, który ma dogodne ceny serwerów jak i domen internetowych. Jak założyć tam konto, wykupić hosting i domenę internetową, następnie podpiąć ją do serwera i ustawić sobie SSL, opisałem tutaj krok po kroku.

Gdy już masz to wszystko, logujesz się na swój serwer hostingowy. Klikasz z lewego menu Polecane aplikacje -> WordPress w otwartej stronie klikasz w Katalog Aplikacji i na samym dole w kategorii Różne, znajduje się instalator skryptu YOURLS. Po jego kliknięciu dajesz + instaluj tę aplikację i otworzy się okienko instalacyjne skryptu, w którym należy wybrać na jakiej domenie ma być on zainstalowany oraz login i hasło administratora.

autoinstalator yoursl - wybór domeny

Ważne żebyś wybrał przedrostek https://, dzięki czemu serwis będzie działał z szyfrowaniem SSL (standard w tych czasach). Jeśli chodzi o ścieżkę, można zostawić jak jest lub wpisać dowolne, pamiętając żeby nie używać polskich znaków.

autoinstalator yourls - dane administratora

Login i hasło będą potrzebne do zarządzania i konfiguracją skryptu. Jak już masz wszystko wypełnione, na dole klikasz + Zainstaluj. Instalacja potrwa kilka sekund.

Metoda trudniejsza – dla osób technicznych

To jest po prostu metoda ręcznej instalacji skryptu, gdy Twój hosting nie posiada autoinstalatora tego systemu. Będzie ona trochę dłuższa czasowo, ale efekt końcowy będzie taki sam.

Na początek musisz ściągnąć najnowszą wersję skryptu ze strony twórców (na GitHubie) – https://github.com/YOURLS/YOURLS/releases

Po rozpakowaniu paczki instalacyjnej, wszystkie pliki należy wgrać przez FTP do katalogu public_html lub www na serwerze. Choć wcześniej należy pamiętać o utworzeniu bazy danych MySQL na hostingu, i wpisaniu danych dostępowych (nazwa bazy, użytkownik, hasło i host) w pliku:

user/config.php

Domyślnie w katalogu user znajduje się plik config-sample.php. Ale wystarczy go skopiować i usunąć z jego nazwy -sample. Poza danymi dostępowymi do MySQL, warto pamiętać, aby zdefiniować swoją domenę oraz dane logowania admina w linijkach:

define( 'YOURLS_SITE', 'https://twojadomena.pl' );

$yourls_user_passwords = [
'username' => 'password',

Gdy już wszystko zostało prawidłowo wykonane, uruchamiasz plik instalacyjny wpisując taką ścieżkę:

https://twojadomena.pl/admin/

Wyświetli się strona instalacyjna skryptu, na której klikasz Install YOURLS. Jeśli wszystko przebiegnie prawidłowo, wyświetli się taki komunikat:

prawidłowa instalacja skryptu yourls

Doinstalowanie polskiej wersji językowej

Niestety domyślnie skrypt jest w wersji angielskiej, ale zawsze można doinstalować polską wersję językową, która dostępna jest tutaj. Wystarczy ściągnąć paczkę językową, wypakować, a pliki pl_PL.mo i pl_PL.po skopiować na serwer do folderu user/languages. Następnie w pliku config.php (który już wcześniej edytowałeś) w poniżej linijce dodajesz pl_PL, tak aby system wiedział że domyślnie ma obsługiwać polską wersję językową:

define( 'YOURLS_LANG', 'pl_PL' );

Niestety nie wszystko może być przetłumaczone, gdyż tłumaczenie było robione do wersji 1.6, a teraz na chwilę pisania artykułu najnowsza wersja to 1.9.2. Aczkolwiek będzie ona działać, tylko może być niekompletna. Z czego zauważyłem panel admina jest praktycznie w całości po polsku, jedynie strona główna jest po angielsku. Nie będzie to problemem, bo linki wygodniej tworzyć w panelu.

Tak wygląda panel do skracania linków:

panel administracyjny yourls

Można tutaj stworzyć skrócony adres URL, nawet z własną zdefiniowaną nazwą w skrócie (po ukośniku /). Dostępne są tu również wszystkie wygenerowane linki, którymi można dowolnie zarządzać – edytować, udostępniać, sprawdzać statystyki kliknięć lub je usunąć. Ciekawą pozycją jest sprawdzanie statystyk każdego linka:

statystyki skróconego linka

Sprawdzisz tutaj statystyki ruchu z czytelnym wykresem, lokalizację ruchu (według kraju) oraz możliwość sprawdzenia jego źródła.

Koniec pracy. Gratulacje, masz swój własny prywatny serwis, do skracania linków dla swoich stron internetowych.

Jak wstawić znak wodny w HTML na stronie?

hostingi

Wstawianie znaku wodnego najczęściej praktykuje się w różnego rodzaju grafikach i zdjęciach, gdzie trzeba oznaczyć obraz nazwą autora lub logo firmy, która wykonała dane dzieło. Ale co jeśli chce ktoś umieścić taki znak wodny, pod tekstem na swojej stronie www? Można to w prosty zrobić za pomocą tandemu HTML+CSS.

Na początek potrzebny Ci będzie plik graficzny, który chcesz wrzucić pod tekst. Ważne żeby to był plik z przezroczystością (png lub gif). Jeśli będzie na białym tle, to również może być, ale tylko pod warunkiem że tło na stronie również jest białe. W innym przypadku będzie to źle wyglądało.

W naszym przypadku użyjemy tej grafiki:

przykładowa grafika pod znak wodny

Następnie trzeba zdefiniować w CSS tak, aby powyższy obrazek stworzył tło pod blokiem tekstowym. Do tego wystarczy użyć reguły background-image. Poniżej pełen listing HTML+CSS w którym pomocniczo, dodane jest jeszcze kilka innych reguł:

<html>
<head>
<style type="text/css">
p {
	border: medium solid back;
	font-size: 30px;
	background-color: #F5F5F5;
	background-image: url(znak-wodny.png);
	background-size: contain;
	background-repeat: round;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</body>
</html>

Pogrubioną czcionką zaznaczyłem fragment kodu, odpowiedzialnego za działanie skryptu. W efekcie uzyskasz takie coś:

przykład wstawiania znaku wodnego w html i css

Jak widać trochę obrazek gryzie się z tekstem, bo powinien być trochę bladszy i najlepiej w jasnoszarym kolorze. Ale tutaj bardziej chodzi o pokazanie na przykładzie.

Teraz wyjaśnię poszczególne linijki:

background-color: #F5F5F5; – ustalanie koloru tła akapitu, w przykładzie lekko szary
background-image: url(znak-wodny.png); – tutaj najważniejsza linijka w której wstawiasz lokalizację pliku graficznego na serwerze, który posłuży jako tło czyli znak wodny
background-size: contain; – tutaj ustala się wielkość obrazu, można ustawić ręcznie w jakim rozmiarze ma się wyświetlać, albo wybrać jedne z gotowych przełączników:
– contain – skalowanie do największego rozmiaru, który zmieści się w obrębie pola tekstowego (z zachowaniem proporcji)
– cover – skalowanie do najmniejszego rozmiaru
– auto – wyświetlanie w pełnym rozmiarze
background-repeat: round; – ustawianie powtórzeń obrazka oraz jego orientacja:
– repeat-x – powtarzanie, orientacja w poziomie, może być urwany
– repeat-y – powtarzanie, orientacja w pionie, może być urwany
– repeat – powtarzanie w obu kierunkach, urwany
– space – dostosowanie aż do wypełnienia obszaru, bez urywania, rozłożenie równomierne
– round – skalowanie w taki sposób żeby nie urywać
– no-repeat – bez powtarzania

Oczywiście opcji jest jeszcze więcej, można je znaleźć w oficjalnej dokumentacji CSS. Chociaż użycie powyższych instrukcji w zupełności wystarczy, aby umieścić dowolny plik graficzny na stronę w postaci znaku wodnego.

Jak zrobić kilka linków na jednym obrazku? [HTML]

hostingi

Webmasterzy dość często umieszczają linki w obrazkach na stronie, dzięki czemu grafika zdaje się aktywnym hiperłączem. Gdy ktoś w nią kliknie, przenosi się na wcześniej zdefiniowaną w linku podstronę lub stronę zewnętrzną. Ale czy można dodać kilka takich odnośników na jednym obrazku w HTMLu? Jak najbardziej można, i nazywa się to mapowanie obrazu od nazwy znacznika <map>, który jest za to odpowiedzialny.

Dzięki temu że znacznik <map> definiuje się w języku HTML, to wszystko dzieje się po stronie przeglądarki użytkownika, a nie serwera na którym stoi strona www. Za jego pomocą ustala się ile, jakie i w którym miejscu obrazka, mają być aktywne odnośniki do innych podstron.

Teraz zróbmy taką mapę na przykładzie prostej grafiki, zawierającej trzy kwadratowe ikonki. Tak żeby każda z ikonek była aktywnym linkiem.

Poniżej kod źródłowy:

<img src="grafika.png" usemap="#mapalinkow" alt="mapa hiperłączy" />

<map name="mapalinkow">
<area href="index.html" shape="rect" coords="49,46,178,170" alt="Strona główna" />
<area href="podstrona1.html" shape="rect" coords="265,46,392,170" alt="Podstrona 1" />
<area href="podstrona2.html" shape="rect" coords="471,46,598,170" alt="Podstrona 2" />
</map>

I tak, najpierw zdefiniowałem w znaczniku <img> to, że grafika ma być zmapowana i nadałem jej nazwę usemap="#mapalinkow". Dopiero niżej znajduje się właściwa struktura mapy, która tworzy trzy różne hiperłącza na grafice.

Poniżej przykład działania (najedź kursorem myszki):

mapa hiperłączy Strona główna Podstrona 1 Podstrona 2

Jak widzisz, każdy z żółtych kwadracików tworzy obszar obrazu z aktywnym odsyłaczem do różnych podstron, natomiast szare pole wokoło jest zwykłą częścią grafiki.

Wróćmy jeszcze do listingu. Zauważ że do stworzenia odnośników, nie użyłem elementu <a> tylko <area> ze znacznikami shape i coords.

Atrybut shape="rect" oznacza że obszar ma być prostokątny, natomiast w coords określasz jego dokładny zakres za pomocą czterech liczb całkowitych, oddzielonych przecinkiem. Liczby te, są wymiarami elementu od krawędzi obrazka, wyrażone w pikselach:

mapowanie linków na obrazku wymiary

coords="49,46,178,170"

Pierwsza liczba 49 – odległość pomiędzy lewą krawędzią obrazka a lewą krawędzią kwadratu
Druga liczba 46 – odległość pomiędzy górną krawędzią obrazka a górną krawędzią kwadratu
Trzecia liczba 178 – odległość pomiędzy lewą krawędzią obrazka a prawą krawędzią kwadratu
Czwarta liczba 170 – odległość pomiędzy górną krawędzią obrazka a dolną krawędzią kwadratu

Jeśli chciałbyś ustawić na grafice obszar kołowy, używasz wtedy atrybutu circle, natomiast jeśli kształt miałby być wielokątny trzeba użyć atrybutu poly.

No i na koniec ostatnia ciekawa opcja. Jeśli chciałbyś aby pozostała część zdjęcia (w naszym przypadku wszystko wokoło na szaro), również gdzieś odnosiła, możesz na końcu użyć atrybutu default:

<area href="reszta.html" shape="default" alt="Strona defaultowa" />

Jak widzisz mapowanie obrazu dość łatwo zrobić w HTMLu. Jedyną wadą tego rozwiązania jest to, że na pierwszy rzut oka nie widać na zdjęciu, że posiada ono w sobie 3 niezależne linki. Jest to widoczne dopiero po najechaniu kursorem myszki. Dlatego warto ten fakt odnotować na swojej stronie internetowej lub zaznaczyć graficznie na zdjęciu.