Laravel – Add Share Social Media Button Example

Laravel – Add Share Social Media Button Example

Laravel 8 – add social media buttons example. In this tutorial you will learn How to add share social media buttons in laravel apps.

Sometimes, you may need to add social media buttons in laravel 8,7,6 app . So, this tutorial will help you step by step to add social share buttons in laravel apps.

How To Add Share Social Media Button In Laravel?

Follow the below given steps and add share social media buttons in laravel apps:

  • 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, Execute the following command on the terminal to install/download laravel 8 application in your system(server):

composer create-project --prefer-dist laravel/laravel blog

Step 2 – Connecting App to Database

After that, open “.env” file and update the database name, username and password in the env file:

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, execute the folllowing command on your terminal to install social media button package in laravel apps:

composer require jorenvanhocht/laravel-share 

After that, visit config directory and open app.php file. And add the following code into it:

config/app.php

'aliases' => [
    'Share' => Jorenvh\Share\ShareFacade::class,
]

Now execute the following command on terminal to publish config file:

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

Step 4 – Add Route

In this step, add routes in the web.php file. Go to app/routes/web.php file and following routes in web.php file:

use App\Http\Controllers\ShareSocialController; 
 
Route::get('/share-social', [ShareSocialController::class,'shareSocial']);

Step 5 – Generate Controller by Command

In this step, execute the following command on terminal to create a controller name ShareSocialController. So you need to use the below command and create Controller :

php artisan make:controller ShareSocialController

After successfully create controller go to app/controllers/ShareSocialController.php and update the following code :

<?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, visit /resources/views/ directory and create a new blade view file, which name share-social.blade.php. And add the following code into it:

<!DOCTYPE html>
<html>
<head>
    <title>How to Add Share Social Media Button in Laravel - Tutsmake.com</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 - tutsmake.com</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

In this step, execute the following command on the terminal to start development server:

 php artisan serve
If you want to run the project diffrent port so use this below command
php artisan serve --port=8080

Step 68- Test This App

Open your browser and hit the following url on it:

http://localhost:8000/share-social 

Conclusion

Laravel 8 – add social media buttons example. In this tutorial, you have to learn How to add share social media buttons in laravel apps.

If you want to know more about this package. So you can visit the https://github.com/jorenvh/laravel-share.

Recommended Laravel Posts

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Vue JS, Angular JS, React Js, WordPress, and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

Your email address will not be published. Required fields are marked *