Jak wyświetlić liczbę obserwujących na Twitterze jako tekst w WordPressie

Chcesz budować zaufanie wśród odwiedzających Twoją stronę internetową? Jednym z najprostszych sposobów jest pokazanie liczby obserwujących na Twitterze (X). Ale jeśli próbowałeś dodać ją do swojej strony WordPress, zauważysz, że większość widżetów mediów społecznościowych jest nieporęczna, spowalnia Twoją stronę i nie wygląda dobrze.

Dobra wiadomość? Nie potrzebujesz tych ciężkich widżetów.

Po pracy z setkami witryn WordPress znaleźliśmy czysty, prosty sposób na dodanie liczby obserwujących X jako tekstu. Taki, który faktycznie dobrze komponuje się z wyglądem Twojej witryny, zamiast ją zaśmiecać. ✨

W tym przewodniku krok po kroku pokażemy Ci, jak wyświetlić liczbę obserwujących na Twitterze jako tekst w WordPressie.

Dlaczego wyświetlać liczbę obserwujących na Twitterze jako tekst w WordPress?

Wyświetlanie liczby obserwujących na Twitterze (X) jako tekstu od razu buduje zaufanie u odwiedzających. Kiedy ludzie widzą, że inni Cię obserwują, chętniej postrzegają Twoją firmę jako wiarygodną i Ciebie jako eksperta w swojej niszy.

Jest to powszechna forma dowodu społecznego. Wiele popularnych blogów, influencerów i dużych marek na WordPressie z dumą pokazuje, ilu ludzi ich obserwuje w mediach społecznościowych.

Obecnie wiele z najlepszych wtyczek mediów społecznościowych pozwala na wyświetlanie całkowitej liczby obserwujących w osadzonych kanałach, przyciskach, banerach i innych.

Czasami jednak możesz chcieć wyświetlić liczbę jako zwykły tekst. Daje to swobodę dodawania liczby obserwujących do postów na blogu, stopki lub w dowolnym innym miejscu na Twojej stronie WordPress.

Mając to na uwadze, pokażemy Ci, jak wyświetlić liczbę obserwujących na Twitterze jako tekst w WordPressie. Oto szybki przegląd wszystkich kroków, które omówimy:

1. Uzyskaj klucz API i sekret X
2. Dodaj niestandardowy kod do swojej witryny WordPress
3. Bonus Tip: More X Tricks!
   1. Dodaj przyciski udostępniania i retweetowania X
   2. Promuj swoją stronę X za pomocą wyskakującego okienka
4. FAQ: Wyświetl liczbę obserwujących X jako tekst
5. Dalsza lektura: Poradniki dotyczące mediów społecznościowych dla użytkowników WordPressa

Zacznijmy.

Krok 1: Uzyskaj klucz API i sekret X

Aby uzyskać liczbę obserwujących, musisz uzyskać dostęp do API X, tworząc klucz API i sekret.

Najpierw przejdź do Portalu deweloperów X, a następnie kliknij „Zarejestruj się, aby uzyskać bezpłatne konto”.

Teraz możesz wpisać informacje o tym, jak planujesz używać API X.

Dobrym pomysłem jest podanie jak największej ilości szczegółów, ponieważ X będzie przeglądać te informacje i może usunąć Twoje konto, jeśli nie zrozumieją, w jaki sposób korzystasz z ich API.

Po tym nie zapomnij przeczytać regulaminu. Jeśli chcesz kontynuować, kliknij przycisk „Prześlij”.

Zobaczysz teraz Portal deweloperski.

W menu po lewej stronie kliknij, aby rozwinąć sekcję „Projekty i aplikacje”. Następnie wybierz „Przegląd”, aby zobaczyć gotową aplikację projektu.

Kliknijmy przycisk klucza, aby uzyskać dostęp do klucza API i sekretu, a następnie przycisk „Pokaż klucz API”.

X będzie teraz wyświetlać klucz API i sekret API. To jedyny raz, kiedy zobaczysz te informacje, więc upewnij się, że przechowasz je w bezpiecznym miejscu – zalecamy użycie menedżera haseł dla dodatkowego bezpieczeństwa. 🔐

Jeśli kiedykolwiek zgubisz klucz API Secret, będziesz musiał go wygenerować ponownie, co spowoduje unieważnienie poprzedniego.

Po prostu kliknij przycisk „Wygeneruj ponownie”, aby utworzyć nowy klucz API i sekret.

Krok 2: Dodaj niestandardowy kod do swojej witryny WordPress

Najprostszym sposobem na dodanie liczby obserwujących X do Twojej witryny jest użycie kodu PHP.

Ze względów bezpieczeństwa WordPress nie pozwala na bezpośrednie dodawanie kodu PHP do stron i wpisów, ale pozwala na używanie shortcode'ów. Oznacza to, że możesz utworzyć niestandardowy shortcode, a następnie połączyć go z kodem PHP.

Najprostszym sposobem na dodanie niestandardowych shortcode'ów w WordPress jest użycie WPCode. Ta wtyczka pozwala na tworzenie dowolnej liczby shortcode'ów, a następnie łączenie ich z różnymi sekcjami kodu PHP.

Niektóre z naszych partnerskich witryn internetowych używają WPCode do dodawania niestandardowych fragmentów kodu. Uwielbiają, jak upraszcza zarządzanie kodem, zmniejsza liczbę błędów i utrzymuje ich witryny w porządku.

Zapoznaj się z naszą pełną recenzją WPCode, aby uzyskać więcej informacji o wtyczce.

Pierwszą rzeczą, którą musisz zrobić, jest zainstalowanie i aktywowanie darmowej wtyczki WPCode. Więcej szczegółów znajdziesz w naszym przewodniku krok po kroku na temat jak zainstalować wtyczkę WordPress.

Po aktywacji przejdź do Fragmenty kodu » Dodaj fragment.

Tutaj zobaczysz wszystkie gotowe fragmenty, które możesz dodać do swojej strony. Obejmują one fragmenty, które pozwalają na całkowite wyłączenie komentarzy w WordPress, przesyłanie plików, których WordPress domyślnie nie obsługuje, i wiele więcej.

Ponieważ tworzysz nowy fragment kodu, najedź kursorem myszy na „Dodaj własny kod (nowy fragment)” i kliknij „Użyj fragmentu”.

W pojawiającym się oknie dialogowym musisz wybrać typ kodu.

W tym samouczku możesz wybrać „Fragment PHP”.

Zobaczysz teraz edytor fragmentów kodu.

Tutaj pierwszą rzeczą do zrobienia jest wpisanie tytułu dla niestandardowego fragmentu kodu. Może to być cokolwiek, co pomoże Ci odwołać się do fragmentu w panelu administracyjnym WordPress.

W edytorze kodu wklej następujący kod PHP:

/**
 * Fetches the X (Twitter) follower count and caches it.
 *
 * @param string $screenName The X handle to fetch followers for.
 * @return int|string The number of followers or the last known count on error.
 */
function wpb_get_twitter_followers($screenName = 'wpbeginner') {
    // Your X API credentials from your developer account.
    // Replace with your actual keys.
    $apiKey    = 'YOUR_API_KEY';
    $apiKeySecret = 'YOUR_API_KEY_SECRET';

    // Get the follower count from a temporary cache to speed up your site.
    $numberOfFollowers = get_transient('wpb_twitter_followers');

    // If the cache is empty or expired, fetch new data from the API.
    if (false === $numberOfFollowers) {
        
        // Prepare credentials for authentication.
        $credentials = base64_encode( $apiKey . ':' . $apiKeySecret );

        // Make a request to the X API for an authentication token.
        $auth_response = wp_remote_post('https://api.twitter.com/oauth2/token', array(
            'method'      => 'POST',
            'httpversion' => '1.1',
            'blocking'    => true,
            'headers'     => array(
                'Authorization' => 'Basic ' . $credentials,
                'Content-Type'  => 'application/x-www-form-urlencoded;charset=UTF-8',
            ),
            'body'        => array( 'grant_type' => 'client_credentials' ),
        ));

        $keys = json_decode(wp_remote_retrieve_body($auth_response));

        // If we have a valid token, proceed to get follower count.
        if (isset($keys->access_token)) {
            $token = $keys->access_token;

            // Now, make the request for user data using the token.
            $api_url = "https://api.twitter.com/1.1/users/show.json?screen_name=$screenName";
            $data_response = wp_remote_get($api_url, array(
                'httpversion' => '1.1',
                'blocking'    => true,
                'headers'     => array(
                    'Authorization' => "Bearer $token",
                ),
            ));

            if (!is_wp_error($data_response)) {
                $followers = json_decode(wp_remote_retrieve_body($data_response));
                if (isset($followers->followers_count)) {
                    $numberOfFollowers = $followers->followers_count;
                    // Cache the result for 1 hour and save a fallback option.
                    set_transient('wpb_twitter_followers', $numberOfFollowers, 1 * HOUR_IN_SECONDS);
                    update_option('wpb_twitter_followers_fallback', $numberOfFollowers);
                }
            }
        }
    }

    // If the API call fails for any reason, use the last successfully saved count.
    if (false === $numberOfFollowers) {
        return get_option('wpb_twitter_followers_fallback', 0);
    }

    return $numberOfFollowers;
}

/**
 * Creates the WordPress shortcode [x_followers].
 */
function wpb_x_followers_shortcode_function() {
    // Change 'wpbeginner' to your X username.
    $count = wpb_get_twitter_followers('wpbeginner');
    
    // Make sure we have a number before formatting it for display.
    if (is_numeric($count)) {
        return number_format_i18n($count);
    }
    
    return ''; // Return nothing if there's an error.
}
add_shortcode('x_followers', 'wpb_x_followers_shortcode_function');
?>

Teraz musisz zastąpić dane uwierzytelniające API w kodzie tymi, które właśnie zapisałeś z portalu X Developer Portal.

Znajdź te linie:

    $apiKey    = 'YOUR_API_KEY';
    $apiKeySecret = 'YOUR_API_KEY_SECRET';

Zamień 'YOUR_API_KEY' i 'YOUR_API_KEY_SECRET' na swoje rzeczywiste klucze.

Następnie znajdź tę linię wewnątrz wpb_x_followers_shortcode_function:

$count = wpb_get_twitter_followers('wpbeginner');

Będziesz musiał zastąpić 'wpbeginner' nazwą użytkownika X, dla którego chcesz wyświetlić obserwujących. Może to być dowolne publiczne konto X.

Aby uzyskać nazwę użytkownika X, po prostu otwórz profil X w nowej karcie.

Nazwę użytkownika znajdziesz w adresie URL i w nagłówku profilu:

Po wykonaniu tej czynności możesz wrócić do strony edytora WPCode.

Tutaj po prostu kliknij przełącznik „Nieaktywny”, aby zmienił się w „Aktywny”.

Następnie możesz kliknąć przycisk „Zapisz fragment”.

Ten kod automatycznie tworzy dla Ciebie niestandardowy skrócony kod: [x_followers].

Możesz teraz dodać ten skrócony kod w dowolnym miejscu swojej witryny, aby wyświetlić liczbę obserwujących jako dowód społeczny.

Aby go użyć, po prostu edytuj dowolną stronę, wpis lub obszar widżetu, w którym chcesz wyświetlić liczbę.

W edytorze bloków kliknij przycisk „+” i wpisz „Shortcode”. Gdy się pojawi, możesz wybrać blok „Shortcode”, aby dodać go do strony lub wpisu.

Po prostu wklej [x_followers] skrócony kod do bloku skróconego kodu.

Należy pamiętać, że krótki kod wyświetla tylko liczbę. Dlatego warto dodać wokół niego jakiś kontekst. Na przykład, możesz napisać „Mamy [x_followers] obserwujących na Twitterze!”

Aby uzyskać więcej informacji na temat umieszczania shortcode, zapoznaj się z naszym przewodnikiem jak dodać shortcode w WordPress.

Gdy będziesz zadowolony z konfiguracji strony, możesz udostępnić liczbę obserwujących, klikając przycisk „Aktualizuj” lub „Opublikuj”.

Teraz, jeśli odwiedzisz swoją witrynę WordPress, zobaczysz liczbę obserwujących na żywo:

Dodatkowa wskazówka: Więcej sztuczek z X!

Teraz, gdy już wiesz, jak wyświetlić liczbę obserwujących na Twitterze (lub X) na swojej stronie WordPress, warto dalej optymalizować swoje działania marketingowe na X.

Dodaj przyciski udostępniania i retweetowania X

Dodanie przycisków udostępniania i retweetowania na Twojej stronie może naprawdę pomóc zwiększyć ruch i zasięg. Z ponad 217 milionami użytkowników X miesięcznie, jest to świetne miejsce do promowania Twoich treści.

Te przyciski ułatwiają użytkownikom udostępnianie Twoich postów, dzięki czemu możesz dotrzeć do nowych osób poza swoimi obserwatorami. To nie tylko przyciąga więcej odwiedzających na Twojego bloga, ale także pokazuje innym, że Twoje treści są godne zaufania i lubiane, co może sprawić, że Twoja marka będzie wyglądać bardziej wiarygodnie.

Aby to zrobić, zapoznaj się z naszym przewodnikiem jak dodać przyciski udostępniania i retweetowania na Twitterze.

Promuj swoją stronę X za pomocą wyskakującego okienka

Następnie możesz zwiększyć widoczność swojego profilu X i zdobyć więcej obserwujących, promując swoją stronę za pomocą wyskakującego okienka.

OptinMonster ułatwia tworzenie wyskakujących okienek, które przyciągają uwagę bez bycia nachalnym. Jest to jedno z najpotężniejszych narzędzi do generowania leadów, które pozwala projektować piękne wyskakujące okienka z prośbą o obserwowanie Cię na X.

W WPBeginner polegamy na OptinMonster do wszystkich naszych wyskakujących okienek, formularzy wsuwanych i pasków pływających. Jego inteligentne reguły targetowania pozwalają nam wyświetlać właściwą wiadomość właściwej osobie, co było kluczem do zwiększenia liczby naszych obserwujących w mediach społecznościowych i listy e-mail.

Więcej szczegółów znajdziesz w naszej pełnej recenzji OptinMonster.

A po przewodnik krok po kroku, proszę, zobacz jak promować swoją stronę na Twitterze w WordPress za pomocą wyskakującego okienka.

Oprócz wyskakujących okienek mediów społecznościowych, OptinMonster może również pomóc Ci zbudować listę e-mailową, oferować ulepszenia treści, wyświetlać formularze kontaktowe i nie tylko.

FAQ: Wyświetl liczbę obserwujących X jako tekst

Jak często będzie aktualizowana liczba obserwujących przy użyciu tej metody?

Metoda opisana w tym przewodniku wykorzystuje system buforowania, który aktualizuje liczbę obserwujących mniej więcej raz na godzinę. Dzięki temu liczba jest w miarę aktualna, a strona nie spowalnia z powodu ciągłych zapytań do API X.

Czy dodanie tego niestandardowego kodu spowolni moją witrynę?

Nie. To podejście jest lekkie. Wyświetlając liczbę jako zwykły tekst i używając buforowania, unika się problemów z wydajnością, które często towarzyszą ciężkim wtyczkom lub widżetom mediów społecznościowych.

Jaki jest najlepszy sposób na dodanie pełnego kanału Twittera do mojej witryny?

Jeśli chcesz czegoś więcej niż tylko licznika, najłatwiejszą opcją jest wtyczka. Polecamy Smash Balloon, ponieważ pozwala ona osadzać interaktywne, konfigurowalne kanały Twittera (X) bez dotykania żadnego kodu.

Dalsza lektura: Poradniki dotyczące mediów społecznościowych dla użytkowników WordPressa

Mamy nadzieję, że ten samouczek pomógł Ci dowiedzieć się, jak wyświetlać liczbę obserwujących na Twitterze jako tekst w WordPressie. Następnie możesz również przeczytać te przewodniki:

• Najlepsze wtyczki Twittera dla WordPress
• Jak stworzyć niestandardową galerię zdjęć na Instagramie w WordPress
• Jak dodać przycisk „Przypnij” Pinteresta w WordPressie
• Jak wyświetlić liczbę obserwujących w mediach społecznościowych w WordPress
• Jak przeprowadzić konkurs w mediach społecznościowych, aby rozwinąć swoją witrynę
• Kompletny arkusz ściągawki mediów społecznościowych dla WordPress

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.