In this tutorial we will learn how to integrate Facebook like and share button in laravel so, that you can posts sharing to social networks gets easier. We will also learn how can we add share button in laravel.
If you have’t done it in the past. Don’t worry we will go step by step in order to obtain the feature.
lets break down on step by step on what are we going to do.
Let’s get started,
What are we going to do ?
- Make the fresh Project of Laravel Ready
- Create new migration called
tbl_poststo store information about the posts. - Fetch and Display Result in the fronted by using Twitter Bootstrap.
- Integrate Facebook like and share using from its official website.
Integrate Social Like and Share button in Laravel
Step 1 : Making the fresh project of laravel ready
Just go to command line terminal navigate to your directory and hit,
composer create-project laravel/laravel laratutorials (I am using laratutorials as my project name, you can give your name as you like).
Go to .env file and setup your database under mysql and make everything ready.
Step 2 : Create new model and migration file for post table
We need something to share so, we are going to create a blog where we will store post. We will create tbl_posts migration and add necessary fields to the database.
Open command line terminal and hit php artisan make:model tbl_post -m.
It will create both model and migration that we need and to add fields.
Head over to project root database/migrations and open your newly created file which would be xxxx_xx_xxxxx_create_tbl_posts. For the majority of this tutorial we are only going to add title and description field.
This is only what we need to cover this tutorial. Look at the code below and make the necessary changes.
|
1 2 3 4 5 6 7 8 9 |
public function up() { Schema::create('tbl_posts', function (Blueprint $table) { $table->increments('id'); $table->string('title'); $table->text('description'); $table->timestamps(); }); } |
As we have finished adding new fields to the migration file. Hit php artisan migrate and all the tables in the database will be populated.
Step 3 : Fetch the Data and Display it in the Frontend
Our posts table was empty therefore, i created a bunch of dummy data using laravel faker package and model factory. Model factory is the class which helps us to generate the dummy data on the fly. As you can see in table below i have created around 50 dummy data inside tbl_posts table.
It is super useful where you are testing your application, when you want the dummy data.
For the time being i will fetch the data from database by using the query builder inside the routes file web.php only. If you want to extend it to the controller go ahead and do it.
|
1 2 3 4 |
Route::get('/', function() { $data = DB::table('tbl_posts')->get(); return view('index',['blog_post'=>$data]); }); |
Now, currently my index blade looks like this below. I have used bootstrap to make the elegant design quickly.
Step 4 : Integrating Facebook Like and Share Button
Now, we need to head over to the Facebook official website and generate like button that we need in our website. Go to this link here and get the JavaScript SDK code which looks like this.
|
1 2 3 4 5 6 7 8 |
<div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.1'; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> |
Use this code only once per page.
After that use this code to place “Like button” inside you blog posts and you can use multiple times in your multiple blog posts per page.
|
1 |
<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="standard" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div> |
Full code of the page looks like the image below, if you have successfully integrate Facebook like and share in your blog or website.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.1'; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <div class="container"> <h1 class="h1">Articles</h1> <div class="row"> <div class="col-md-12" style="background-color:#efefef"> @foreach($blog_post as $post) <h3 class="h2">{{ $post->title }}</h3> <p>{{ $post->description }}</p> <div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="standard" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div> <hr> @endforeach </div> </div> </div> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html> |
Finally your blog page would look like the image below with integrated Facebook like and share button.
If you have any other problem. Mention them in comments or contact us via contact page.
Leave a Reply