Home / Tutorials / Add Share Social Media Button to Laravel
Add Share Social Media Button to Laravel cover

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

8 mins

2.8K

3 years ago

0 comments

Skilled

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
Social Media Button Preview

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.
notion avatar

Alaz

Week-end developer currently experimenting with web, mobile, and all things programming.

Support Us

If you like our tutorial, support us by being our Patreon or buy us some coffee ☕️

Welcome to PostSrc V3

PostSrc Dark Logo

You have to login to favorite this