Laravel 10 : Integrating Social Media Share Buttons

Spread the love

Laravel 10: The impact of social media on our daily lives cannot be underestimated in today’s digital age. Platforms like Facebook, Twitter, LinkedIn, Reddit, WhatsApp, and Telegram have become essential components of our online experience, whether for personal interactions, information exchange, or company promotion. Harnessing the power of social media can be a game changer for businesses and website owners, allowing them to reach a larger audience, enhance brand visibility, and communicate with potential customers.

Integrating social sharing capabilities into your online applications is one of the most effective methods to maximize the potential of social media. Social media sharing allows users to your website to effortlessly distribute your information or items to their own social networks. This, in turn, can have a viral impact, increasing the reach and engagement of your content. Manually creating social share links for numerous sites, on the other hand, can be a time-consuming and difficult procedure.

1. Laravel 10: Laravel Share Installation

This section will walk you through the installation of the "Laravel Share" (jorenvanhocht/laravel-share) package. This package makes it easier to create social media share links in your Laravel project.

composer require jorenvanhocht/laravel-share

If you are not using auto-discovery, make sure to add the ServiceProvider to the providers array in your "config/app.php":

'providers' => [
    Jorenvh\Share\Providers\ShareServiceProvider::class,
];

You can also add the facade in your "config/app.php":

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

Lastly, publish the package config and resource files:

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

This command will publish the laravel-share.php config file to your config folder, share.js in public/js/, and laravel-share.php in your resources/lang/vendor/en/ folder.

2. Fontawesome Integration

Since Laravel Share relies on Font Awesome, your project must include its CSS, JavaScript, and fonts. You have the option of adding the Font Awesome from a CDN or installing it locally.

Laravel Share supports Font Awesome v5. For Font Awesome 4 support, you can use version 3 of this package. In this case we will use the Font Awesome v5. Add the following in the "<head>" section of your layout file.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" integrity="sha512-q3eWabyZPc1XTCmF+8/LuE1ozpg5xxn7iO89yfSOd5/oKvyqLngoNGsx8jq92Y8eXJ/IRxQbEC+FGSYxtk2oiw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

3. JQuery Integration

To open the sharing dialog window, Laravel sharing relies on the JQuery library. As a result, add the following lines to the end of the "<body>" tag.

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script>
<script src="{{ asset('js/share.js') }}"></script>

4. Create the Controller

To insert the content sharing code, create a controller file in php artisan. This is the primary function that we shall implement.

php artisan make:controller SocialShareButtonsController

Update the newly created controller as follows:

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;

class SocialShareButtonsController extends Controller
{
    public function __invoke()
    {
        $shareComponent = \Share::page(
            'https://pranabkalita.com/posts/mastering-laravel-macros-a-comprehensive-guide',
            'Your share text comes here',
        )
        ->facebook()
        ->twitter()
        ->linkedin()
        ->telegram()
        ->whatsapp()        
        ->reddit();
        
        return view('post', compact('shareComponent'));
    }
    
}

5. Add Route

You must include a route in "route/web.php". This will link the view to the controller we made.

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\SocialShareButtonsController;

Route::get('/social-media-share', SocialShareButtonsController::class);

6. Make a View

Now we’ll make a view that will show the share button in resources/views. It should be called "post.blade.php". Import bootstrap and write a few CSS lines.

@extends('layouts.app')
 
@section('title', 'Page Title')
 
@section('styles')
    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;
    }
@endsection
 
@section('content')
    <div class="container mt-4">
        <h2 class="mb-5 text-center">Laravel Social Share Buttons Example</h2>

        {!! $shareComponent !!}
    </div>
@endsection

Start Application

After we’ve created some files, we’ll use the terminal to execute the application.

php artisan serve

Once the application is started, visit http://127.0.0.1:8000/social-media-share and you will see the social media share options.

7. Usage – Creating Single Share Links

We’ll show you how to make individual share links for numerous social networking platforms in this step.

Facebook

Share::page('https://pranabkalita.com')->facebook();

Twitter

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

Reddit

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

Linkedin

Share::page('https://pranabkalita.com', 'Share title')->linkedin('Extra LinkedIn summary can be passed here');

WhatsApp

Share::page('https://pranabkalita.com')->whatsapp();

Telegram

Share::page('https://pranabkalita.com', 'Your share text can be placed here')->telegram();

Instead of passing the url manually you can use the currentPage method to share the current page opened in the browser.

Share::currentPage()->facebook();

Conclusion

With the "Laravel Share" package, mastering social media sharing in Laravel has never been easier. You can easily generate share links for numerous social platforms, personalize them, and increase user engagement on your website.

Remember that good communication is more than just posting links as you use social media sharing in your Laravel applications. If you want to learn more about communication in Laravel, check out “Laravel Email Mastery: Unleashing the Power of Mailables for Robust Communication“. It’s a wonderful resource that can help you better understand Laravel’s communication features.

Happy Coding !