Laravel 9 Tutorial Integrasi Tombol Share Media Sosial

SHARE :

Dalam panduan singkat ini, kami akan menjelaskan cara mengimplementasikan tombol berbagi media sosial di setiap halaman aplikasi Laravel menggunakan paket  jorenvanhocht/laravel-share  yang sangat berguna.

Tombol berbagi media sosial sangat membantu dalam membuat konten Anda menjangkau audiens yang lebih besar; ikon berbagi sosial memperbanyak kualitas konten situs Anda.

Tombol berbagi sosial meningkatkan peluang promosi gratis konten Anda. Tombol-tombol ini ditambahkan ke setiap halaman situs Anda dan memberikan cara yang mengesankan untuk berbagi konten paling berguna dari situs Anda dengan pengunjung situs Anda.

Jika Anda adalah pengembang laravel, Anda sebaiknya mengetahui cara mengintegrasikan tombol berbagi media sosial di aplikasi laravel.

Untuk membuat tutorial proses ini mudah, kami akan menggunakan paket  jorenvanhocht/laravel-share , dan Anda dapat mengunduh paket ini menggunakan alat  Composer , karena Anda tidak perlu menemukan kembali rodanya.

Contoh tombol berbagi media sosial Laravel8 ini sangat bergantung pada paket  jorenvanhocht/laravel-share .

Ini adalah perpustakaan berbasis PHP yang memungkinkan Anda menghasilkan berbagai tautan berbagi sosial. Setelah menginstal paket ini ke proyek Anda, Anda akan dapat membuat tautan berbagi sosial untuk Facebook, Twitter, Linkedin, WhatsApp, Reddit, dan Telegram.

Cara Mengintegrasikan Social Share Button di Laravel 9

Download Aplikasi Laravel

Mari kita mulai dengan membuat aplikasi laravel baru; gunakan perintah yang disediakan, Anda dapat mengubah nama proyek sesuai pilihan Anda.

composer create-project --prefer-dist laravel/laravel laravel-demo
cd laravel-demo

Tambahkan Paket Berbagi Laravel

Dalam pandangan Anda, buka layar konsol, selanjutnya ketik perintah yang disarankan, setelah itu tekan enter untuk mulai menginstal pustaka berbagi laravel.

composer require jorenvanhocht/laravel-share

Daftarkan Laravel Share

Untuk memanfaatkan paket sepenuhnya, pastikan untuk mendaftarkan  ServiceProvider  dan  fasad , masing-masing, di file  config/app.php.

<?php
  return [
    'providers' => [
        ...
        ...        
        Jorenvh\Share\Providers\ShareServiceProvider::class,
    ];
    'aliases' => [
        ...
        ...                
        'Share' => Jorenvh\Share\ShareFacade::class,
    ];
  ];

Buka jendela konsol lagi dan repot-repot menerbitkan paket konfigurasi & file sumber daya.

php artisan vendor:publish --provider="Jorenvh\Share\Providers\ShareServiceProvider"

Ingat, jika Anda memperbarui ke versi laravel terbaru, pastikan untuk menerbitkan kembali file konfigurasi.

Siapkan Controller Baru

Hasilkan file pengontrol; di sini, Anda akan menentukan fungsi untuk menambahkan tombol berbagi media sosial dan memuat template tampilan untuk menampilkan tombol berbagi di browser.

php artisan make:controller SocialShareButtonsController

Perbarui kode di dalam file  app/Http/Controllers/SocialShareButtonsController.php.

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class SocialShareButtonsController extends Controller
{
    public function ShareWidget()
    {
        $shareComponent = \Share::page(
            'https://www.ookinfo.com/create-autocomplete-search-in-laravel-with-typeahead-js/',
            'Your share text comes here',
        )
        ->facebook()
        ->twitter()
        ->linkedin()
        ->telegram()
        ->whatsapp()        
        ->reddit();
        
        return view('posts', compact('shareComponent'));
    }
    
}

Buat Rute

Pada akhirnya, Anda memerlukan sebuah rute untuk ditambahkan di  route/web.php ; itu membantu untuk mengintegrasikan tombol berbagi sosial di setiap halaman.

<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\SocialShareButtonsController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
*/
Route::get('/social-media-share', [SocialShareButtonsController::class,'ShareWidget']);

Tambahkan Tombol Berbagi Media Sosial dalam Tampilan

Sekarang, buka sumber daya/tampilan di dalam sini buat file  post.blade.php , di file ini  Anda harus mengimpor bootstrap css , tautan font-awesome juga tambahkan  {!! variabel $shareComponent !!}  untuk menampilkan tombol berbagi sosial di laravel.

Perbarui kode di file  resources/views/posts.blade.php.

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Implement Social Share Button in Laravel</title>
        
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
        <style>
            div#social-links {
                margin: 0 auto;
                max-width: 500px;
            }
            div#social-links ul li {
                display: inline-block;
            }          
            div#social-links ul li a {
                padding: 20px;
                border: 1px solid #ccc;
                margin: 1px;
                font-size: 30px;
                color: #222;
                background-color: #ccc;
            }
        </style>
    </head>
    <body>
        <div class="container mt-4">
            <h2 class="mb-5 text-center">Laravel Social Share Buttons Example</h2>
            {!! $shareComponent !!}
        </div>
    </body>
</html>

Mulai Aplikasi

Setiap bagian telah ditempatkan pada tempatnya, terakhir aktifkan server pengembangan laravel dan lihat aplikasi di browser menggunakan url di bawah ini.

php artisan serve
http://127.0.0.1:8000/social-media-share

OOKINFO

Jasa pembuatan Aplikasi Mobile dan Web. Siap memberikan solusi digital untuk bisnis anda. Tugas Kuliah, Organisasi, Perusahaan, E-Commerce.