Add Share Social Media Button to Laravel

Learn how to add social media button such as Facebook, Twitter, Whatsapp, Telegram and Reddit in your Laravel Application

1 year ago

•

8 mins read

•

2505 views

• Laravel Tutorial

In this tutorial, you'll be learning how to add social media button to your existing Laravel application. We'll be using Laravel Share Package to achieve this and the setup is very straightforward and simple.

Install the Package

Let's start by installing the package by using composer.

composer require jorenvanhocht/laravel-share

Then do register the alias in your "config/app.php" file. This will allow you to easily access the helper.

// config/app.php
'aliases' => [
    'Share' => Jorenvh\Share\ShareFacade::class,
];

Then publish out the configuration files. This will publish 3 files and each is important.

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

Start Implementing

The next part is to implement the code logic. Do note that aside from those installations, you will also need to use Fontawesome version 5 or 6. But if you have your own icon pack just update the existing config files.

Let's imagine you have PostController and you want to share the content of the post. By making the alias you can define it like this. The Share class provides a page static method for you to add the "URL" and "title" of the page. Once that's defined, chain the method to get the Facebook, Twitter, and other social media.

public function show($post)
{
    $socialShare = \Share::page(
        $post->url,
        $post->title,
    )
        ->facebook()
        ->twitter()
        ->reddit()
        ->linkedin()
        ->whatsapp()
        ->telegram();
    
    return view('posts.show', compact('socialShare'));
}

Render in Views

Now in the posts/show.blalde.php, you can render the social media share by calling the variable.

{!! $socialShare !!}}

Do note that it's escaped and you get the whole social links from rendering it. If you want to customize the icon other than the font awesome, you can override it using the config file that you have exported previously. Just change the HTML tag to include custom SVG as you like

Thanks for reading and good luck giving it a try. If you have any issue just comment it below, otherwise do share it with your friends if you like this tutorial.