In this tutorial you will learn about the Laravel 8 Add Share Social Media Button Example and its application with practical example.
In this Laravel 8 Add Share Social Media Button Example tutorial I will show you how to add social media share button in your laravel application. In this tutorial you will learn to add social media share buttons in your laravel project. In this article I will share example to add social media share button in your laravel application.
Laravel 8 Add Share Social Media Button Example
In this step by step tutorial I will demonstrate you with example how to add social media share buttons in laravel application. Please follow instruction given below:
- Step 1 – Install Laravel 8 App
- Step 2 – Connecting App to Database
- Step 3 – Install Social Media Button Package
- Step 4 – Add Route
- Step 5 – Generate Controller by Command
- Step 6 – Create Blade View
- Step 7 – Run Development Server
- Step 8 – Test This App
Step 1 – Install Laravel 8 App
First of all we need to create a fresh laravel project, download and install Laravel 8 using the below command
1 |
composer create-project --prefer-dist laravel/laravel blog |
Step 2 – Connecting App to Database
Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.
1 2 3 4 5 6 |
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=Enter_Your_Database_Name DB_USERNAME=Enter_Your_Database_Username DB_PASSWORD=Enter_Your_Database_Password |
Step 3 – Install Social Media Button Package
In this step, we will install Social Media Button Package via the composer dependency manager. Use the following command to install Social Media Button Package.
1 |
composer require jorenvanhocht/laravel-share |
After Installing Image intervention package, we need to add service provider and alias in config/app.php file as following.
config/app.php
1 2 3 |
'aliases' => [ 'Share' => Jorenvh\Share\ShareFacade::class, ] |
Now run the following command to publish config file:
1 |
php artisan vendor:publish --provider="Jorenvh\Share\Providers\ShareServiceProvider" |
Step 4 – Add Route
After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.
routes/web.php
1 2 3 |
use App\Http\Controllers\ShareSocialController; Route::get('/share-social', [ShareSocialController::class,'shareSocial']); |
Step 5 – Generate Controller by Command
Now, lets create a controller named ShareSocialController using command given below –
1 |
php artisan make:controller ShareSocialController |
Once the above command executed, it will create a controller file ShareSocialController.php in app/Http/Controllers/ directory. Open the ShareSocialController.php file and put the following code in it.
app/Http/Controllers/ShareSocialController.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<?php namespace App\Http\Controllers; use Illuminate\Http\Request; use Illuminate\Support\Facades\Route; class ShareSocialController extends Controller { public function shareSocial() { $socialShare = \Share::page( 'https://www.abc.com/laravel-custom-foreign-key-name-example', 'Laravel Custom Foreign Key Name Example', ) ->facebook() ->twitter() ->reddit() ->linkedin() ->whatsapp() ->telegram(); return view('share-social', compact('socialShare')); } } |
Step 6 – Create Blade View
In this step we will create blade view files. Go to /resources/views/ directory and create a new blade view file, which name share-social.blade.php. And put the following code into it:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<!DOCTYPE html> <html> <head> <title>How to Add Share Social Media Button in Laravel</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js" integrity="sha512-XKa9Hemdy1Ui3KSGgJdgMyYlUg1gM+QhL6cnlyTe2qzMCYm4nAZ1PsVerQzTTXzonUR+dmswHqgJPuwCq1MaAg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" integrity="sha512-P5MgMn1jBN01asBgU0z60Qk4QxiXo86+wlFahKrsQf37c9cro517WzVSPPV1tDKzhku2iJ2FVgL67wG03SGnNA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <style type="text/css"> li{ list-style: none; background: #e2e2e2; margin-left: 5px; text-align: center; border-radius:5px; } li span{ font-size: 20px; } ul li{ display: inline-block; padding: 10px 10px 5px; } #social-links{ float: left; } </style> </head> <body> <div class="row mt-5"> <div class="col-md-6 offset-3"> <div class="card"> <div class="card-header bg-info text-white"> <h5>How to Add Share Social Media Button in Laravel</h5> </div> <div class="card-body"> <strong class="float-left pt-2">Social Media : </strong> {!! $socialShare !!} </div> </div> </div> </div> </body> </html> |
Step 7 – Run Development Server
Now we are ready to run our example so lets start the development server using following artisan command –
1 |
php artisan serve |
Now, open the following URL in browser to see the output –
1 |
http://localhost:8000/share-social |