9 niestandardowych przycisków udostępniania społecznościowego CSS i JavaScript

Każda witryna powinna zawierać przyciski społecznościowe, aby zwiększyć udostępnianie w sieci. Ale domyślne przyciski udostępniania nie są tak wspaniałe i każdy z nich ma inny styl w zależności od marki sieci.

Dlatego przygotowaliśmy tę małą kolekcję niestandardowych przycisków udostępniania, które możesz sformatować i ponownie wykorzystać we własnej witrynie. Jeśli szukasz pięknych przycisków udostępniania, te szablony stanowią świetny punkt wyjścia.

1. Udostępnianie po stronie

Pierwsza to jedna z moich ulubionych technik stworzona przez programistę Michaela Schofielda. Ten naprawiony interfejs społecznościowy do udostępniania z boku jest naprawdę powszechny na dużych blogach i witrynach z czasopismami.

Te odznaki społecznościowe mogą pozostać umieszczone na samej górze w pobliżu nagłówka lub mogą przewijać się wraz z użytkownikiem. Nie znalazłem żadnych studiów przypadku porównujących różnice, ale wyobrażam sobie, że stałe przyciski powodują zwiększenie liczby udostępnień. I tak czy inaczej są tak dobrze zaprojektowane, że nie wyglądają na spamerskie ani wciśnięte w układ.

Jest to prawdopodobnie najlepszy szablon na początek, jeśli prowadzisz bloga i potrzebujesz niestandardowych odznak udostępniania.

2. Przyciski obrazu

Innym popularnym stylem udostępniania jest ponowne publikowanie zdjęć znalezionych na stronie internetowej. Jest to popularne na Pintereście, ale może działać dobrze na Facebooku i Twitterze, a nawet Google+.

Te przyciski graficzne są niestandardowymi projektami przy użyciu czystego CSS3 i niektórych logo w tle dla każdego z nich. Nie łączą się jeszcze z żadnymi sieciami społecznościowymi, ale linki kotwiczne można łatwo zaprogramować do udostępniania społecznościowego.

Projekt jest tutaj naprawdę moim celem, ponieważ wyglądają fenomenalnie przy każdym obrazie. Dodatkowo lokalizacja naprawdę zdradza pomysł, że próbujesz zachęcić do udostępniania samego obrazu, a nie tylko wpisu.

3. Przełącz udziały

Wszyscy widzieliśmy te widżety udostępniania WordPress za pomocą małej ikony udostępniania i menu wysuwanego. Po pewnym czasie mogą się zestarzeć, więc warto je trochę pomieszać.

Za pomocą tego fragmentu możesz zmienić styl udostępniania społecznościowego za pomocą niestandardowej animacji i ukrytego menu. To idealne rozwiązanie dla każdego, kto ma witrynę, która chce zachęcić do częstego udostępniania w wielu sieciach.

Każda ikona została zaprojektowana w czystym CSS, a animacja jest kontrolowana przez jQuery. Powinieneś być w stanie po prostu skopiować/wkleić to do dowolnego układu i sprawić, by działał. Będzie pasować tuż obok nagłówka artykułu, a nawet na dole, gdy ludzie skończą czytać. Tak czy inaczej, z pewnością zwiększy się udziały społecznościowe na całym świecie.

4. Animacje koła

Aby uzyskać trochę zabawnej animacji, sprawdź te okrągłe przyciski stworzone przez Stephane Lyver.

Każdy przycisk ma swój własny efekt najechania kursorem na animację i wszystkie mogą idealnie wkomponować się w dowolny układ. Możesz nawet zmienić kolor tła i ikon, aby wyróżniały się na zwykłym białym tle.

Całość działa na czystym CSS, a ikony są pobierane z Font Awesome przez Bootstrap.

Pamiętaj, że te przyciski również nie łączą się bezpośrednio z linkami do udostępniania społecznościowego, ale można to łatwo naprawić za pomocą odpowiedniego kodu.

5. Proste przyciski udostępniania

Krótkie, słodkie i do rzeczy najlepiej opisuje te przyciski udostępniania.

Używają prostych ikon SVG z zestawu ikon Ionicons. Ale nie potrzebujesz Ionic ani żadnego JavaScriptu, aby to działało.

Zamiast tego używają wartości href wraz z opcjami nowej karty, aby otwierać łącza udostępniania bezpośrednio w przeglądarce. Nie wymaga JavaScriptu, żadnych niezgrabnych SVG.

Jeśli zagłębisz się w zestaw ikon Ionic, możesz nawet znaleźć inne ikony społecznościowe, które możesz chcieć dodać. Dodatkowo masz pełną kontrolę nad stylami w CSS, dzięki czemu możesz zmieniać rozmiar, dopełnienie, kolor czcionki i prawie wszystko inne.

6. Ukryte kontakty towarzyskie

Deweloper Chris Sevilleja stworzył te ukryte przyciski społecznościowe za pomocą czystego CSS.

Niektóre witryny wykorzystują tę technikę do osadzania domyślnych plakietek udostępniania w mniejszych ikonach. Ale trzeba przyznać, że jest to wyjątkowa animacja, więc nie jest to bardzo powszechny trend.

Kod jest naprawdę łatwy w konfiguracji, a wszystko przebiega przez CSS, dzięki czemu masz pełną kontrolę. Chris opracował nawet podobne pióro do odznak społecznościowych Google+.

Oba fragmenty kodu są fantastyczne dla prawie każdej witryny, a animacje działają we wszystkich przeglądarkach zgodnych z CSS3.

7. Unieś kolory tła

Oto naprawdę wyjątkowa konfiguracja udostępniania społecznościowego, w której kolor tła zmienia się w zależności od tego, na którym przycisku najedziesz.

Każdy przycisk ma własną niestandardową ikonę pobraną z Font Awesome, więc możesz nawet rozszerzyć ten zestaw, aby zawierał inne powiązane ikony. Bardzo podoba mi się to podejście, ponieważ ma awaryjne rozwiązanie JavaScript dla zmian najechania kursorem.

Ale twórca stron internetowych Christopher Grabiński stworzył czystą alternatywę CSS, która działa dokładnie tak samo (w obsługiwanych przeglądarkach).

Nie sądzę, aby ta technika wyglądała dobrze na większym blogu, chociaż może działać na mniejszych witrynach lub krótkich postach na blogu.

8. Udostępnianie wysuwanych

Deweloper Kyle Lavery stworzył niesamowity przycisk udostępniania wyskakującego okienka, który przypomina podejście Google do wysuwanych materiałów.

To używa trochę JavaScriptu, ale ma tylko 5 linii i nie jest zbyt skomplikowane. Magia animacji tkwi w CSS, który możesz dostosować do swoich potrzeb.

Co ciekawe, surowy HTML jest niesamowicie prosty. Ma jeden główny kontener udostępniania, a następnie używa elementów div dla przycisków. Zasadniczo 5 linijek HTML i 5 linijek JavaScript zmieszanych z całą masą CSS daje ten cudowny efekt.

Absolutnie jedna z najfajniejszych funkcji udostępniania społecznościowego, jakie widziałem, a styl projektowania materiałów sprawia, że ​​jest jeszcze fajniejszy.

9. Przyciski udostępniania 3D

Ostatnim w mojej kolekcji jest ten projekt 3D wykorzystujący transformacje CSS 3D wraz z przyciskami społecznościowymi.

Deweloper Fabrizio Bianchi stworzył te przyciski przy użyciu czystego CSS, od ikon po animacje transformacji. Główne ikony pochodzą z Font Awesome, a jedyny kod JS służy do osadzania przycisków w środku.

Ale ogólnie jest to czyste rozwiązanie CSS, które powinno działać dobrze na każdej stronie. Nie każdemu podoba się efekt 3D, ale jeśli pasuje do Twojego projektu, wybierz go.