How to Add a Facebook Like Button on Mobile view with Responsive CSS Design

Step 1: Create a Facebook App

1. Go to the Facebook for Developers site and create a new app to obtain your App ID.

Step 2: Get the Facebook Like Button Code

1. Visit the Facebook Like Button documentation.
2. Customize the button and generate the code snippet.

Step 3: Add the Code to Your WordPress Theme

1. Go to your WordPress admin dashboard.
2. Navigate to Appearance > Theme Editor.
3. Locate the single.php file (or content.php based on your theme).
4. Insert the generated Facebook Like button code where you want it to appear, like this:
   html ¨K7K

Step 4: Include the Facebook SDK

1. Before the closing </body> tag in your footer.php file, add:
   html ¨K8K ¨K9K

Step 5: Write Responsive Design CSS

To make the Facebook Like button responsive, you can add some custom CSS. Here’s an example:

Go to Appearance > Customize.

Select Additional CSS.

Add the following CSS code:

.fb-like { width: 100% !important; /* Make the button take the full width */ max-width: 450px; /* Set a max-width to maintain layout */ margin: 0 auto; /* Center the button */ } /* Adjust the button's size on smaller screens */ @media (max-width: 600px) { .fb-like { max-width: 100%; /* Allow full width on mobile */ } }

Step 6: Test the Implementation

1. Open a post on your mobile device or in a mobile view emulator to check if the Facebook Like button appears correctly and is responsive.

By following these steps, you should successfully add a responsive Facebook Like button to your mobile WordPress posts.