Create Custom Facebook Module in Magento 2

by Cloudways  August 8, 2016

In the Magento system, there is no built in function so that you can use the social media on your site. Why use social media? It is pretty obvious that nowadays 8 out of 10 people are using the social media, especially Facebook. So to add the functionality on your Magento store, one must create their own module that can be integrated with the Magento system. It can do this job like a piece of cake.

Consider a scenario, that  one of your customers liked your store on Facebook. His or her friends saw that. There will be a greater chance that the customer’s friend will check out your store. That is why creating this module will help you to market your store pretty well.

Create Custom Facebook Module in Magento 2

This tutorial is going to show you how to create a module so that you will be able to integrate it with your store. It will also give you an idea about the basic structure and creation of modules in Magento 2.

Structure of the Module

Magento follows a structure to organize the files and folders of the module. After you have created all of the above mentioned folders and files, it results in a structure of your custom module that will look like this at the end of the tutorial.

folder structure

Check Before Going Further!

Before going further on this tutorial, I want you to make sure that you have Magento 2 installed already. It should either be on localhost or any development server so that you can add delete or even create files or folders easily. If you have installed it already, then we can go ahead with the tutorial.

Step 1: Create a Folder and Basic Structure

You want your files to be in the correct structure, so create a new folder where your module that you are going to create will be placed. To do so, go to your ROOT >> app and create a new folder named code.

Step 2: Declare a New  Module

First off, you have to create a new folder and name it etc. To create it, go to  ROOT>> app >> code>> cloudways >> FacebookModule .

After performing the above step you have to create a module.xml file under the etc folder. Go to the etc folder, right click and create a new file named module.xml and copy paste the following code.

Here you have created a new module named “Cloudways_SocialModule”.

After pasting it, press ctrl+s or just select save option and then close the file. And jump on to the next step.

Step 3: Config the Module

You have to config your new module by doing the steps below:

Create a New File registration.php

Create a new file in the same folder i.e  ROOT>> app >> code>> cloudways >> FacebookModule . The file name is registration.php and copy paste the following code.

After pasting it press ctrl+s or just select save option and then close the file.

Create a New File routes.xml

Now under the etc folder create one more folder named frontend .

Create an new file named routes.xml in this folder and copy and paste the following code.

Here in the code the router id tells which router to use, in our case it is “FBmodule” . The frontName should be unique as it is the first part of the URL .

Creating MVC Structure of the Module

The MVC structure is basically the “view” of the module.

Create index.php for Controller

Create another directory go to ROOT >> app >> code>> Cloudways >> FacebookModule >> Controller and name it Index.

After creating the above file, create another new file named index.php in this folder and simply as done above, just copy and paste the following code in the file.

Don’t forget to save the file after making changes.

Create SocialModule.php for Block

Create Block folder in the ROOT >> app >> code >> cloudways >> FacebookModule .

After that you have done above of the steps create a new file named SocialModule.php and paste the following code.

Create socialmodule.Phtml for Template

As mentioned in the layout file you now have to make a template file. To create this file go to ROOT >> app >> code >> cloudways >> FacebookModule >> View >> frontend and create another folder  template. Now here you can create a file  and name it socialmodule.phtml

Step 4: Create the Front End

Go to ROOT >> app >> code >> cloudways >> FacebookModule >> View >> frontend and create another folder layout here all the layout files of the modules will be stored.

It is very important to create layout files as Magento is follows the MVC structure. This filename will follow the structure RouterName_ControllerName_ActionName.xml Here we are creating actions that are executed and the message is displayed on the frontend of the store. That is why this layout file is important. Create a new file in layout and name it as FBmodule_index_index.xml and paste the following code.

Step 5: Activate Your Module

After all the above steps are done, this is the final and the most important step of this tutorial. You have to activate your module.

Open up the config.php by going to app/etc add the element ‘Cloudways_SocialModule’ => 1, in the array ‘modules’

PS: Make sure to put coma (,) at the end.

After doing it, you to clear your Magento Cache and update the Magento modules. To do so, run the following commands:

And yes! You have now successfully and very smoothly created your Facebook module. After you refresh your link, the output will be show your module.

Final Thoughts

This tutorial is written to help you build your own extension for your Magento 2 store so that you can enhance the features of your Magento store and get max advantage out of it .

So what are you waiting for? Start making new extensions for your stores and  feel free to add a comment below if you want to give any feedback or want to ask a question.

Start Creating Web Apps on Managed Cloud Servers Now!

Easy Web App Deployment for Agencies, Developers and E-Commerce Industry

About Cloudways

Cloudways is a European MSP that provides custom cloud design, deployment and management solutions on leading cloud providers.

Stay Connected:

You Might Also Like...

  • Pratik Shah

    how its workflow?

    please help, Thanks