Laravel Adding Social Media Share buttons Advanced Tutorial Example

  • 13-08-2022
  • 2255
  • Laravel 9
  • Haresh Chauhan

In This Laravel Adding Social Media Share buttons Advanced Tutorial Example; I will explain to you how to integrate social media share buttons in your application on each page using jorenvanhocht/laravel-share package.

The social media sharing button in your application will help you to share your page content on social media through the links. So this package will help you to share your content on the social media platform.

The package provides a social sharing button for each popular social media, This button enhances the promotion of your page content and site page promoting will help you, These pages will be added to every page on your site or you can say each URL will be provided social button. The button takes it self current URL link and shares it with the given URL to social media.

This social share button is based on jorenvanhocht/laravel-share package, You can download this composer or you can also install it in your application using the below-given composer command.

The Social media share button package is based on a PHP-based library that will help you and allow you to generate verious social media sharing links and engage your link with it. After successfully installing this package you will be able to share links on Facebook, Twitter, Linkedin, WhatsApp, Reddit, and Telegram Different platforms.

So let's start with how to integrate social media share buttons in laravel application.

Step 1: Create Project

Let's start by cloning a new laravel application. Use the below-provided command, Also you may change the project name as per your requirement. Goto terminal and run the command.

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

Goto project directory after cloned project.

cd laravel-share

Step 2: Add Share Package

In your new fresh terminal, the next type below given command, You will be starting installing package in your laravel application.

composer require jorenvanhocht/laravel-share

Step 3: Register In Config

To complete registration of this package in our application go to "config/app.php", there you will see a providers array property put there this service provider class. and facade "Share" in aliases, as per below given.

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

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

Note one thing, If you updated the new latest version of laravel please regenerate or republish this config file again.

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

Step 4: Class Usage

Here, goto in your web.php file inside the routes folder, you will be at the root of the application. Just use as below defined. You may require any specific social platform, you can remove remain.

routes/web.php 
<?php

use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/',function(){

    $share = \Share::page(
        'https://www.webappfix.com/post/laravel-9-qr-code-generator-basic-to-advanced-tutorial-example.html',
        'Your page text comes here',
    )
    ->facebook()
    ->twitter()
    ->linkedin()
    ->telegram()
    ->whatsapp()        
    ->reddit();
    

    return view('share',compact('share'));
});

Step 5: Blade File

Create a blade file, import bootstrap 5 CSS, font-awesome for icons links button, and then add the "$share" variable in the blade file with HTML print breaker.

resources/views/share.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>Social Share Button in Laravel - Webappfix.com</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">Social Share Button in Laravel - Webappfix.com</h2>
            {!! $share !!}
        </div>
    </body>
</html>

Further Examples

Laravel 9 QR Code Generator Basic To Advanced Tutorial Example

Facebook:

Share on Facebook only, do as below suggested.

use Share;

Share::page('https://www.webappfix.com')->facebook();
Twitter:

Share on Twitter only, do as below suggested. with the text message.

use Share;

Share::page('https://www.webappfix.com', 'Your share text can be placed here')->twitter();
Reddit:

Share on Reddit only, do as below suggested. with the extra text message.

use Share;

Share::page('https://www.webappfix.com', 'Your share text can be placed here')->reddit();
Linkedin:

Share in linked only, do as below suggested. with the page title and extra summary text note.

use Share;

Share::page('https://www.webappfix.com', 'Share title')->linkedin('Extra linkedin summary can be passed here')
Whatsapp:

Share in WhatsApp only, do as below suggested.

use Share;

Share::page('https://www.webappfix.com')->whatsapp()
Telegram:

Share in telegram only, do as below suggested. the second argument pass as a text message for summary.

use Share;

Share::page('https://www.webappfix.com', 'Your share text can be placed here')->telegram();
Share With Current URL :

If you want to share the current URL you can use the currentPage() method. I will take details from the meta tag.

use Share;

Share::currentPage()->facebook();
To Get Share Link:

For API purpose use, get the social share button URL like below given, for the single social button.

use Share;

Share::page('https://www.webappfix.com', 'Share title')
	->facebook()
	->getRawLinks();

Output :

https://www.facebook.com/sharer/sharer.php?u=https://www.webappfix.com
To Get Multiple Share Link

To get multiple URL raws as an array return you can use as below provided.

use Share;

Share::page('https://www.webappfix.com', 'Share title')
	->facebook()
	->twitter()
	->linkedin('Extra linkedin summary can be passed here')
	->whatsapp()
    ->getRawLinks();

Output :

[
    "facebook" => "https://www.facebook.com/sharer/sharer.php?u=https://www.webappfix.com",
    "twitter" => "https://twitter.com/intent/tweet?text=Share+title&url=https://www.webappfix.com",
    "linkedin" => "http://www.linkedin.com/shareArticle?mini=true&url=https://www.webappfix.com&title=Share+title&summary=Extra+linkedin+summary+can+be+passed+here",
    "whatsapp" => "https://wa.me/?text=https://www.webappfix.com",
]

Advanced Sharing

You can also pass extra class, id, title, and relationship by passing an array as the third parameter on this page method. You need to pass the second parameter as a null pass.

Share::page('https://www.webappfix.com', null, ['class' => 'your class', 'id' => 'your id', 'title' => 'your page title', 'rel' => 'your relationship'])
->facebook();

Output :

<div id="social-links">
    <ul>
        <li><a href="https://www.facebook.com/sharer/sharer.php?u=https://www.webappfix.com" class="social-button your class" id="your id" rel="yur relationship"><span class="fa fa-facebook-official"></span></a></li>
    </ul>
</div>
Conclusion

In this social media share laravel application page for while application page tries to do our best to explain to you. Also, some examples are given for a better understanding. also, the advanced example is given for social sharing with extra notes and title messages. We have this thing using a third-party package. Given all the guidelines on how to use an application from scratch. hope you did this sharing social button in your application very well without any issues. learn lots from this social sharing tutorial.

We always thanks to you for reading our blogs.

dharmesh-image

Dharmesh Chauhan

(Swapinfoway Founder)

Hello Sir, We are brothers origin from Gujarat India, Fullstack developers working together since 2016. We have lots of skills in web development in different technologies here I mention PHP, Laravel, Javascript, Vuejs, Ajax, API, Payment Gateway Integration, Database, HTML5, CSS3, and Server Administration. So you need our service Please Contact Us

haresh-image

Haresh Chauhan

(Co-Founder)
We Are Also Recommending You :