Spis treści

Wyszukiwarka gifów na własną stronę

Giphy.com to platforma internetowa, która umożliwia użytkownikom przeglądanie, udostępnianie i pobieranie GIF-ów. Serwis został założony w 2013 roku przez Alexandra Chunga, Jaceka Cooke’a i Davida McIntosha. W 2020 roku serwis został przejęty przez Facebooka.

Giphy.com oferuje szeroki wybór GIF-ów, które można przeglądać według kategorii, tematu lub popularności. Użytkownicy mogą również tworzyć własne animacje GIF i udostępniać je na platformie. Serwis jest dostępny w wielu językach, w tym w języku polskim.

Szukaj Gif-ów

GIF Search

Śmieszne Reakcje Memy Miłość Szczęście Koty Psy Taniec

Brak wyników

Spróbuj wyszukać coś innego

Jak korzystać z aplikacji?

1Wyszukiwanie

Wpisz słowo kluczowe i naciśnij Enter lub kliknij "Szukaj". Możesz też użyć gotowych tagów.

Wyszukiwanie na żywo (od 3 znaków)
Automatyczna historia wyszukiwania
Skrót klawiszowy: Ctrl + K

2Filtrowanie

Dostosuj wyniki do swoich potrzeb za pomocą panelu filtrów.

Rating: G, PG, PG-13, R
Sortowanie: trafność lub data
Wybór języka treści

3Akcje na GIFach

Kliknij na GIF, aby zobaczyć go w pełnym rozmiarze i wykonać akcje:

Podgląd w pełnym rozmiarze
Pobieranie na urządzenie
Kopiowanie linku lub udostępnianie

4Ulubione i Trending

Zarządzaj swoimi preferencjami w prosty sposób.

Zapisuj GIFy w lokalnych "Ulubionych"
Przeglądaj automatycznie odświeżane Trending
Wszystkie dane są przechowywane lokalnie

Historia Giphy.com

2013 - Powstanie

Giphy zostało założone w Nowym Jorku przez Alexa Chunga i Jace’a Cooka jako prosta wyszukiwarka GIFów, która szybko zyskała popularność.

2014 - Integracja z Facebookiem

Nawiązanie współpracy z Facebookiem umożliwiło użytkownikom łatwe udostępnianie GIFów, co było przełomem dla popularności serwisu.

2016 - Ekspansja na Slack i Twitter

Integracja z komunikatorami i mediami społecznościowymi pozwoliła na wyszukiwanie i udostępnianie GIFów bezpośrednio w aplikacjach.

2020 - Przejęcie przez Facebook (Meta)

Meta przejęło Giphy za około 400 milionów dolarów, integrując je z ekosystemem Facebook, Instagram i WhatsApp.

2022 - Sprzedaż do Tenor (Google)

W wyniku decyzji regulatorów antymonopolowych, Meta sprzedało Giphy firmie Tenor (należącej do Google) za około 53 miliony dolarów.

Obecnie - Lider rynku

Giphy pozostaje największą platformą z GIFami na świecie, z miliardami wyświetleń dziennie i API używanym przez setki tysięcy aplikacji.

Giphy w liczbach

500M+

Użytkowników miesięcznie

1B+

Wyświetleń dziennie

100K+

Nowych GIF-ów dziennie

50+

Obsługiwanych języków

Jak wstawić wyszukiwarkę gifów na własną stronę?

Należy się zarejestrować na stronie giphy.com i wygenerować własny api-key.

I tworzymy odpowiednie pliki:

index.html
style.css
script.js
api-key.js

W stworzonym pliku api-key.js wklejamy wygenerowany klucz ze strony giphy.com:

//Wklej własny api-key
let apiKey = "TU WPISZ API-KEY Z GIPHY.COM";

Bez tego wyszukiwarka nie zadziała. I to wszystko w tym pliku. Następnie tworzymy pozostałe pliki.

index.html

<!DOCTYPE html>
<html lang="pl">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Apka do szukania gifów</title>
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap" rel="stylesheet" />
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="box">
  <div class="search-container">
    <input type="text" id="search-box" value="yes" />
    <button id="submit-btn">Szukaj</button>
  </div>
  <div class="loader"></div>
  <div class="wrapper"></div>
</div>
<div class="home"><a href="https://skrip.pl/" title="Strona domowa" target="_parent">Home</a></div>
    
<!-- API Key --> 
<script src="api-key.js"></script> 
<!-- Script --> 
<script src="script.js"></script>
</body>
</html>

style.css

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  background-color: #fff;
}
button {
  border: none;
  outline: none;
  cursor: pointer;
  background-color: #2196f3;
  color: #fcfcfc;
  border-radius: 0.5em;
  font-weight: 500;
}
.search-container {
  display: grid;
  grid-template-columns: 9fr 3fr;
  gap: 1em;
  width: 100%;
  max-width: 50em;
  margin: 1em auto;
  padding: 0.5em;
}
.search-container input {
  padding: 1em;
  border-radius: 0.5em;
  font-weight: 400;
}
.wrapper {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.container {
  background-color: #fafafa;
  display: flex;
  padding: 1em;
  flex-direction: column;
  justify-content: space-between;
  margin: 1.5em;
  border-radius: 0.5em;
  border: solid 1px #CCC;
}
.container img {
  width: 100%;
}
.container button {
  margin-top: 1em;
  padding: 1em 0;
}
.home a{
  padding: 10px;
  color: #2196f3;  
  font-size: 0.6rem;
  text-decoration: none;
}
.loader {
  display: none;
  height: 15em;
  width: 15em;
  border: 3em solid #2b304d;
  border-radius: 50%;
  border-top-color: #2196f3;
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  animation: spin 3s infinite;
}
@keyframes spin {
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@media screen and (max-width: 768px) {
  .wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
  .container {
    margin: 0.7em;
  }
}
@media screen and (max-width: 576px) {
  .wrapper {
    grid-template-columns: 1fr;
  }
}

script.js

// JavaScript Document
// www.skrip.pl
let submitBtn = document.getElementById("submit-btn");

let generateGif = () => {
  //display loader until gif load
  let loader = document.querySelector(".loader");
  loader.style.display = "block";
  document.querySelector(".wrapper").style.display = "none";

  //Get search value (default => laugh)
  let q = document.getElementById("search-box").value;
  //We need 10 gifs to be displayed in result
  let gifCount = 10;
  //API URL =
  let finalURL = `https://api.giphy.com/v1/gifs/search?api_key=${apiKey}&q=${q}&limit=${gifCount}&offset=0&rating=g&lang=en`;
  document.querySelector(".wrapper").innerHTML = "";

  //Make a call to API
  fetch(finalURL)
    .then((resp) => resp.json())
    .then((info) => {
      console.log(info.data);
      //All gifs
      let gifsData = info.data;
      gifsData.forEach((gif) => {
        //Generate cards for every gif
        let container = document.createElement("div");
        container.classList.add("container");
        let iframe = document.createElement("img");
        console.log(gif);
        iframe.setAttribute("src", gif.images.downsized_medium.url);
        iframe.onload = () => {
          //if iframes has loaded correctly reduce the count when each gif loads
          gifCount--;
          if (gifCount == 0) {
            //If all gifs have loaded then hide loader and display gifs UI
            loader.style.display = "none";
            document.querySelector(".wrapper").style.display = "grid";
          }
        };
        container.append(iframe);

        //Copy link button
        let copyBtn = document.createElement("button");
        copyBtn.innerText = "Kopiuj Link";
        copyBtn.onclick = () => {
          //Append the obtained ID to default URL
          let copyLink = `https://media4.giphy.com/media/${gif.id}/giphy.mp4`;
          //Copy text inside the text field
          navigator.clipboard
            .writeText(copyLink)
            .then(() => {
              alert("GIF copied to clipboard");
            })
            .catch(() => {
              //if navigator is not supported
              alert("GIF copied to clipboard");
              //create temporary input
              let hiddenInput = document.createElement("input");
              hiddenInput.setAttribute("type", "text");
              document.body.appendChild(hiddenInput);
              hiddenInput.value = copyLink;
              //Select input
              hiddenInput.select();
              //Copy the value
              document.execCommand("copy");
              //remove the input
              document.body.removeChild(hiddenInput);
            });
        };
        container.append(copyBtn);
        document.querySelector(".wrapper").append(container);
      });
    });
};

//Generate Gifs on screen load or when user clicks on submit
submitBtn.addEventListener("click", generateGif);
window.addEventListener("load", generateGif);

Lub pobierz gotowe pliki oprócz klucza api-key. Który musisz wygenerować na stronie giphy.com.

I am raw html block.
Click edit button to change this html

Top Stories

Kalkulator Wagi i Wieku na Planetach – Układ Słoneczny 3D

Video Propt Generator dla AI do tworzenia wideo

Generator Promptów Web AI do tworzenia stron dla laików

Wyszukiwarka gifów na własną stronę

Szukaj Gif-ów

Brak wyników

Jak korzystać z aplikacji?

1Wyszukiwanie

2Filtrowanie

3Akcje na GIFach

4Ulubione i Trending

Historia Giphy.com

2013 - Powstanie

2014 - Integracja z Facebookiem

2016 - Ekspansja na Slack i Twitter

2020 - Przejęcie przez Facebook (Meta)

2022 - Sprzedaż do Tenor (Google)

Obecnie - Lider rynku

Giphy w liczbach

500M+

1B+

100K+

50+

Jak wstawić wyszukiwarkę gifów na własną stronę?

index.html

style.css

script.js

Chmurka tagów

Zaprzyjaźniona strona

Top Stories

Kalkulator Wagi i Wieku na Planetach – Układ Słoneczny 3D

Video Propt Generator dla AI do tworzenia wideo

Generator Promptów Web AI do tworzenia stron dla laików

Wyszukiwarka gifów na własną stronę

Szukaj Gif-ów

Brak wyników

Jak korzystać z aplikacji?

1Wyszukiwanie

2Filtrowanie

3Akcje na GIFach

4Ulubione i Trending

Historia Giphy.com

2013 - Powstanie

2014 - Integracja z Facebookiem

2016 - Ekspansja na Slack i Twitter

2020 - Przejęcie przez Facebook (Meta)

2022 - Sprzedaż do Tenor (Google)

Obecnie - Lider rynku

Giphy w liczbach

500M+

1B+

100K+

50+

Jak wstawić wyszukiwarkę gifów na własną stronę?

index.html

style.css

script.js

Może Ci się spodobać:

Windows 93. Parodia systemu.

Unreal Tournament – 1999. Zagraj online.

Prosty Kalkulator BMI

Super Mario online