Cara Menampilkan Timeline Facebook Anda di WordPress

Diterbitkan: 2023-01-17


Apakah Anda ingin menampilkan posting timeline Facebook Anda di WordPress?

Dengan menambahkan pembaruan Facebook Anda ke WordPress, Anda dapat membuat situs Anda tetap segar dan menarik sekaligus mendorong pengunjung untuk mengikuti Anda di Facebook.

Pada artikel ini, kami akan menunjukkan cara mudah menampilkan timeline Facebook Anda di WordPress.

How to display your Facebook timeline in WordPress

Menampilkan Timeline Facebook Anda di WordPress

Cara termudah untuk menyematkan timeline Facebook Anda di WordPress adalah dengan menggunakan plugin Smash Balloon Custom Facebook Feed.

Plugin ini memungkinkan Anda menyematkan album Facebook, komentar, ulasan, postingan komunitas, dan lainnya di situs Anda.

An example Facebook timeline, created using Smash Balloon

Untuk panduan ini, kami akan menggunakan Smash Balloon premium karena memungkinkan Anda menampilkan foto dan video dari timeline Facebook Anda.

Pengunjung juga dapat menelusuri konten Anda dalam sembulan lightbox, tanpa harus meninggalkan situs web Anda. Namun, ada juga versi gratis yang memungkinkan Anda menampilkan teks dan tautan dari kronologi Anda, berapa pun anggaran Anda.

Setelah aktivasi, Anda harus pergi ke Umpan Facebook »Pengaturan dan masukkan kunci lisensi Anda ke bidang 'Kunci Lisensi'.

Adding a license key to Smash Balloon

Anda akan menemukan informasi ini di bawah akun Anda di situs web Smash Balloon.

Setelah memasukkan kunci, klik tombol 'Aktifkan'.

Menghubungkan Halaman atau Grup Facebook ke WordPress

Selanjutnya, Anda perlu memutuskan apakah akan menampilkan garis waktu dari halaman Facebook atau garis waktu grup. Kami akan menggunakan halaman Facebook tetapi langkah-langkahnya sebagian besar akan sama untuk grup Facebook.

Untuk melihat grup lebih detail, silakan lihat panduan lengkap kami tentang cara menyematkan umpan grup Facebook di WordPress.

Untuk menghubungkan halaman atau grup Facebook Anda ke WordPress, buka Umpan Facebook »Semua Umpan , lalu klik 'Tambah Baru.'

Displaying your Facebook timeline in WordPress

Smash Balloon memungkinkan Anda membuat umpan berbeda untuk menampilkan album foto, acara, garis waktu Facebook, dan lainnya.

Karena kami ingin menampilkan timeline Facebook kami di WordPress, Anda harus mengklik 'Timeline' dan kemudian mengklik 'Next.'

How to add a Facebook timeline to your WordPress website

Setelah itu, Anda dapat memilih halaman atau grup Facebook yang ingin Anda tambahkan ke situs Anda.

Cukup klik 'Tambah Baru' untuk memulai.

Adding a Facebook group or page timeline to WordPress

Di layar berikutnya, pilih apakah Anda ingin menyematkan garis waktu dari halaman atau grup.

Setelah membuat keputusan ini, lanjutkan dan klik 'Hubungkan ke Facebook.'

Connecting a Facebook page or group to WordPress

Ini membuka sembulan tempat Anda dapat masuk ke akun Facebook Anda dan memilih halaman atau grup yang ingin Anda gunakan.

Setelah itu, klik 'Berikutnya.'

Embedding a Facebook page or group in WordPress

Setelah Anda selesai melakukannya, Facebook akan menampilkan semua informasi yang dapat diakses oleh Smash Balloon, dan tindakan yang dapat dilakukannya di halaman atau grup Facebook Anda.

Untuk membatasi akses Smash Balloon ke akun Facebook Anda, cukup klik salah satu sakelar untuk mengubahnya dari 'Ya' menjadi 'Tidak.' Ketahuilah bahwa ini dapat membatasi konten Facebook yang muncul di blog atau situs web WordPress Anda.

Dengan mengingat hal itu, Anda harus membiarkan semua sakelar diaktifkan jika memungkinkan.

Giving Smash Balloon permission to access your Facebook page or group

Selanjutnya, klik tombol 'Selesai'.

Setelah beberapa saat, Anda akan melihat pesan yang mengonfirmasi bahwa Anda telah menautkan situs web WordPress Anda ke Facebook. Sekarang Anda telah melakukannya, saatnya untuk mengklik 'OK.'

Linking WordPress and Facebook

Smash Balloon sekarang akan membawa Anda kembali ke dashboard WordPress secara otomatis.

Cara Menyematkan Garis Waktu Facebook Anda di WordPress

Pada titik ini, Anda akan melihat munculan dengan grup atau halaman yang baru saja Anda sambungkan ke WordPress.

Cukup pilih tombol radio di sebelah sumber ini dan kemudian klik tombol 'Tambah'.

Adding a Facebook page timeline to WordPress

Jika Anda tidak sengaja menutup popup, jangan khawatir. Cukup segarkan tab untuk membuka kembali sembulan.

Setelah itu, WordPress akan membawa Anda kembali ke halaman Facebook Feed » All Feeds secara otomatis. Sama seperti sebelumnya, klik tombol 'Add New', pilih 'Timeline' lalu klik tombol 'Next'.

Sekarang, pilih halaman atau grup Facebook Anda, dan klik 'Berikutnya.'

Choosing a Facebook page or group as your timeline source

Anda dapat memilih template untuk digunakan sebagai titik awal untuk garis waktu yang disematkan. Semua templat ini sepenuhnya dapat disesuaikan sehingga Anda dapat menyempurnakan desain tergantung pada bagaimana Anda ingin menampilkan garis waktu di situs web WordPress Anda.

Kami menggunakan template 'Default', tetapi Anda dapat memilih template apa pun yang Anda inginkan. Anda juga dapat mengubah template di kemudian hari jika Anda tidak menyukainya.

Choosing a template for your embedded Facebook timeline

Saat Anda siap, klik tombol 'Berikutnya'.

Smash Balloon sekarang akan melanjutkan dan membuat umpan garis waktu berdasarkan template Anda dan halaman atau grup Facebook Anda. Ini adalah awal yang baik, tetapi Anda mungkin ingin menyempurnakan tampilan garis waktu di situs WordPress Anda.

Cara Menyesuaikan Umpan Facebook Tertanam Anda

Plugin Smash Balloon Custom Facebook Feed memberi Anda banyak cara untuk menyesuaikan tampilan garis waktu di situs Anda. Dengan mengingat hal itu, mari kita lihat berbagai perubahan yang dapat Anda lakukan pada timeline Facebook Anda.

Di halaman Umpan Facebook »Semua Umpan , temukan umpan garis waktu Anda lalu klik tombol 'Edit', yang terlihat seperti pensil kecil.

Editing the Smash Balloon Facebook feed

Ini akan membuka editor umpan Smash Balloon, yang menampilkan pratinjau grup Facebook atau garis waktu halaman di sebelah kanan.

Di sisi kiri, Anda akan melihat semua pengaturan yang dapat digunakan untuk mengubah tampilan garis waktu. Sebagian besar pengaturan ini sudah cukup jelas, tetapi kami akan segera membahas setiap area.

Customizing the Facebook timeline feed

Jika Anda tidak puas dengan tampilan feed, Anda dapat mencoba template lain dengan mengeklik opsi menu 'Template'.

Kemudian, pilih tombol 'Ubah'.

The Smash Balloon social media templates

Setelah itu, Anda dapat mengubah cara postingan Anda ditampilkan dengan mengklik 'Tata Letak Umpan'.

Di layar ini, Anda dapat beralih antara tata letak daftar dan pasangan bata. Saat Anda melakukan perubahan, pratinjau akan diperbarui secara otomatis sehingga Anda dapat mencoba tata letak yang berbeda untuk melihat mana yang paling cocok untuk garis waktu Facebook Anda.

Changing the layout for your Facebook social media feed

Anda juga dapat mengubah tinggi feed, dan jumlah postingan yang ditampilkan Smash Balloon di komputer desktop, smartphone, dan tablet.

Jika Anda mengubah jumlah posting, Anda dapat melihat pratinjau tampilan feed Anda di komputer desktop dan perangkat seluler menggunakan deretan tombol di pojok kanan atas.

Testing your social media feed on mobile

Saat menguji versi seluler situs web WordPress Anda, Anda mungkin juga ingin mengubah jumlah kolom yang ditampilkan Balon Smash di desktop, tablet, dan ponsel cerdas.

Misalnya, pada gambar berikut, kami membagi konten menjadi 4 kolom di desktop, 3 kolom di tablet, dan 2 kolom di perangkat seluler. Ini dapat membantu garis waktu Anda pas dengan nyaman di layar, apa pun jenis perangkat yang digunakan pengunjung.

Changing the number of columns on smartphones and tablets

Saat Anda puas dengan tata letaknya, klik tautan 'Sesuaikan'.

Ini akan membawa Anda kembali ke editor Smash Balloon utama, sehingga Anda dapat beralih ke opsi menu berikutnya, yaitu 'Skema Warna'.

Changing the color scheme of your social media feed

Secara default, garis waktu Anda akan menggunakan warna yang sama dengan tema WordPress Anda, tetapi layar ini juga memungkinkan Anda untuk beralih antara tata letak 'Terang' dan 'Gelap'.

Anda bahkan dapat membuat skema warna Anda sendiri dengan memilih 'Kustom' dan kemudian menggunakan pengaturan untuk mengubah warna latar belakang, warna tautan, mengubah warna teks di WordPress, dan banyak lagi.

Changing the colors of your embedded Facebook timeline

Secara default, Smash Balloon menambahkan tajuk ke umpan Anda, yang merupakan foto sampul, gambar profil, dan nama halaman Facebook Anda.

Untuk mengubah tampilan bagian ini, klik 'Header' di menu sebelah kiri.

Adding a cover photo and header to an embedded Facebook timeline

Di layar ini, Anda dapat mengubah ukuran dan warna header, menyembunyikan atau menampilkan gambar profil Facebook Anda, dan lainnya.

Anda juga dapat beralih antara tajuk 'Visual' default dan tajuk 'Teks'.

Adding a header to the Facebook timeline

Ingin menghapus tajuk sepenuhnya? Kemudian cukup klik tombol 'Aktifkan' untuk mematikannya.

Setelah itu, Anda dapat mengubah tampilan masing-masing kiriman di dalam umpan grup Anda dengan memilih 'Gaya Kiriman' dari menu sebelah kiri.

How to add a Facebook timeline to your WordPress website

Di layar berikutnya, Anda akan memiliki dua opsi berbeda.

Untuk memulai, lanjutkan dan klik 'Post Style.'

Styling the individual posts inside an embedded Facebook feed

Di layar ini, Anda dapat memilih antara tata letak biasa dan kotak.

Jika Anda memilih 'Kotak' maka Anda dapat membuat latar belakang berwarna untuk setiap posting. Ini dapat membantu posting Facebook Anda menonjol dari situs web Anda yang lain dan juga dapat membuat teks lebih mudah dibaca.

Using the boxed post style in your Facebook feed

Anda juga bisa membuat radius batas lebih besar untuk membuat sudut melengkung, atau Anda bisa menambahkan bayangan.

Jika Anda memilih 'Biasa', Anda dapat mengubah ketebalan dan warna garis yang memisahkan postingan media sosial Anda yang berbeda.

Smash Balloon's regular post style

Anda juga dapat menyesuaikan bagian individu dalam setiap posting dengan kembali ke layar pengaturan utama.

Sekali lagi, pilih 'Post Style' tapi kali ini pilih 'Edit Individual Elements'.

Di layar ini, Anda akan melihat semua konten berbeda yang disertakan Smash Balloon di setiap kiriman garis waktu, seperti penulis kiriman, judul acara, kotak tautan bersama, dan lainnya.

Untuk menghapus konten dari posting Anda, cukup klik untuk menghapus centang pada kotaknya.

How to edit individual elements inside a Facebook feed

Anda juga dapat mengubah ukuran dan warna masing-masing elemen ini. Cukup klik pada nama elemen seperti 'Post Author' atau 'Post Text.'

Anda kemudian dapat menggunakan pengaturan untuk menyesuaikan konten ini. Misalnya, Anda dapat memperbesar teks agar menonjol, atau menambahkan warna baru.

The Smash Balloon post editor settings

Secara default, Smash Balloon tidak menyertakan tombol 'suka' Facebook di linimasa Anda. Untuk menumbuhkan pengikut Facebook Anda, Anda mungkin ingin menambahkan tombol ini dengan memilih 'Like Box' dari menu sebelah kiri editor.

Setelah itu, cukup klik tombol 'Aktifkan' sehingga berubah menjadi biru.

Adding a Facebook Like button to your WordPress website

Secara default, Smash Balloon menambahkan tombol ini di bawah timeline, tetapi Anda dapat mengubahnya dengan membuka dropdown 'Position' dan memilih 'Top' sebagai gantinya.

Di layar ini, Anda juga dapat mengubah tampilan bagian 'suka' termasuk menambahkan ajakan bertindak khusus, menampilkan jumlah orang yang mengikuti Anda di Facebook, menambahkan foto sampul halaman Anda, dan banyak lagi.

Customizing the Facebook like button

Saat Anda puas dengan tampilan tombol 'suka', Anda dapat beralih ke pengaturan 'Muat Tombol Lainnya'.

Tombol 'Muat Lainnya' memberi pengunjung cara mudah untuk menggulir lebih banyak timeline Facebook Anda, jadi Smash Balloon menambahkannya ke feed secara default.

Ini adalah awal yang baik, tetapi karena ini adalah tombol yang sangat penting, Anda mungkin ingin menonjolkannya dengan mengubah warna latar belakang, status arahkan kursor, dan labelnya.

Anda juga dapat mengubah teks yang muncul di tombol, dengan mengetik di kolom 'Teks'.

Customizing the Load More button in WordPress

Jika Anda lebih suka menghapus tombol Muat Lebih Banyak, lanjutkan dan klik sakelar 'Aktifkan'.

Secara default, Smash Balloon memungkinkan pengunjung untuk melihat-lihat foto dan video di timeline Anda tanpa meninggalkan situs web Anda.

Pengunjung cukup mengklik foto atau video apa saja untuk membuka sembulan lightbox, seperti yang Anda lihat pada gambar berikut.

Smash Balloon's lightbox feature

Pengunjung kemudian dapat menggunakan panah untuk menelusuri semua foto dan video di timeline Facebook Anda.

Jika mereka ingin menyukai foto, meninggalkan komentar, atau berbagi gambar dengan teman Facebook mereka, mereka dapat mengklik tautan 'Komentar di Facebook'.

Visiting a post in your embedded Facebook timeline

Ini membuka tab baru dan membawa pengunjung langsung ke kiriman di halaman Facebook Anda.

Ada beberapa cara berbeda untuk menyesuaikan fitur lightbox Smash Balloon. Untuk melihat opsi Anda, klik 'Lightbox' di menu sebelah kiri.

Customizing Smash Balloon's lightbox feature

Di sini, Anda dapat mengubah warna teks lightbox, tautan, dan latar belakang.

Secara default, lightbox menampilkan komentar apa pun yang ditinggalkan orang di foto dan video Anda. Jika Anda lebih suka menyembunyikan komentar ini, Anda dapat mengeklik tombol 'Tampilkan Komentar' untuk mengubahnya dari biru (diaktifkan) menjadi abu-abu (dinonaktifkan).

Disabling social media comments on your WordPress website

Fitur lightbox memungkinkan orang untuk menelusuri foto dan video Anda langsung di situs web WordPress Anda.

Namun, Anda mungkin lebih suka mendorong orang untuk mengunjungi halaman Facebook Anda. Dalam hal ini, Anda dapat menonaktifkan fitur lightbox dengan mengeklik sakelar 'Aktifkan'.

How to disable the Smash Balloon lightbox feature

Sekarang, pengunjung perlu mengeklik tautan 'Lihat di Facebook' untuk melihat lebih dekat foto atau video apa pun.

Saat Anda puas dengan tampilan timeline Facebook, jangan lupa klik 'Simpan' untuk menyimpan perubahan Anda.

Saving your custom social media timeline

Cara Menambahkan Timeline Facebook Anda ke WordPress

Anda sekarang siap menambahkan garis waktu ke situs web Anda menggunakan blok, widget, atau kode pendek.

Jika Anda telah membuat lebih dari satu feed menggunakan Smash Balloon, Anda harus mengetahui kode feed untuk menambahkannya ke blok atau widget.

Buka saja Facebook Feed » All Feeds lalu lihat bagian feed="" dari shortcode. Anda harus menambahkan kode ini ke blok atau widget, jadi catatlah.

Pada gambar berikut, kita perlu menggunakan feed="2" .

Adding a Facebook page to WordPress using shortcode

Jika Anda ingin menyematkan garis waktu Facebook Anda di halaman atau kiriman, kami sarankan untuk menggunakan blok 'Umpan Facebook Khusus'.

Buka saja halaman atau posting di mana Anda ingin menampilkan garis waktu Facebook Anda. Kemudian, klik ikon '+' dan mulailah mengetik 'Umpan Facebook Kustom.'

Ketika blok kanan muncul, klik untuk menambahkannya ke halaman atau posting.

The Custom Facebook Feed block

Blok tersebut akan menampilkan salah satu feed Smash Balloon Anda secara default. Jika ini bukan umpan yang ingin Anda tampilkan, cukup temukan 'Pengaturan Kode Pendek' di menu sebelah kanan.

Anda sekarang dapat menambahkan kode feed="" ke kotak ini. Setelah itu, klik 'Terapkan Perubahan'.

Adding your Facebook status updates to WordPress

Blok sekarang akan menampilkan garis waktu dari halaman atau grup Facebook Anda. Cukup terbitkan atau perbarui halaman untuk membuat garis waktu langsung di situs web Anda.

Sebagai alternatif, Anda dapat menambahkan feed ke area yang siap widget, seperti sidebar atau bagian serupa. Ini adalah cara mudah untuk mempromosikan halaman Facebook Anda di seluruh situs web Anda.

Buka saja Penampilan »Widget lalu klik tombol '+'.

The WordPress widgets screen

Setelah itu cari widget Custom Facebook Feed.

Lalu, seret ke area tempat Anda ingin menampilkan garis waktu Facebook.

The Facebook Custom Feed widget

Sama seperti blok, widget Custom Facebook Feed akan menampilkan salah satu feed yang Anda buat menggunakan Smash Balloon.

Untuk menampilkan feed yang berbeda, cukup ketik kode feed tersebut ke dalam kotak 'Setelan Kode Pendek', lalu klik 'Terapkan Perubahan'.

Adding the Facebook timeline to your WordPress blog using a widget

Anda sekarang dapat menghidupkan widget dengan mengeklik tombol 'Perbarui'. Untuk informasi lebih lanjut, silakan lihat panduan langkah demi langkah kami tentang cara menambahkan dan menggunakan widget di WordPress.

Terakhir, Anda dapat menyematkan garis waktu di halaman, pos, atau area siap widget apa pun menggunakan kode pendek.

Cukup buka Facebook Feed » All Feeds dan salin kode di kolom 'Shortcode'. Anda sekarang dapat menambahkan kode ini ke blog atau situs web WordPress Anda.

Untuk panduan mendetail, silakan lihat panduan kami tentang cara menambahkan kode pendek di WordPress.

Selain itu, jika Anda menggunakan tema blok, Anda dapat menggunakan editor situs lengkap untuk menambahkan 'Umpan Facebook Kustom' di manapun di situs Anda.

Kami harap artikel ini membantu Anda mempelajari cara menampilkan garis waktu Facebook Anda di WordPress. Anda mungkin juga ingin melihat panduan kami tentang cara membuat formulir kontak di WordPress, atau lihat ahli kami memilih plugin Instagram WordPress terbaik.

Jika Anda menyukai artikel ini, silakan berlangganan tutorial video Saluran YouTube kami untuk WordPress. Anda juga dapat menemukan kami di Twitter dan Facebook.