Plugin ke bina wordpress me social media buttom show kaise kare / How to add social media links to your WordPress site without using a plugin
1. Add Social Media Links Using a Widget in Wordpress
This is one of the easiest ways to add social media links to your WordPress site without modifying the theme files.
Steps:
1. Go to Appearance > Widgets in your WordPress dashboard.
2. Drag a “Text” or “Custom HTML” widget to a widget area such as your footer or sidebar.
3. In the Text or Custom HTML widget, you can add HTML to display the social media links.
Example Using Font Awesome Icons:
You can use the Font Awesome icon set to display the icons.
Html Copy code
<div class="social-icons">
<a href="https://facebook.com/yourprofile" target="_blank"><i class="fab fa-facebook"></i></a>
<a href="https://twitter.com/yourprofile" target="_blank"><i class="fab fa-twitter"></i></a>
<a href="https://instagram.com/yourprofile" target="_blank"><i class="fab fa-instagram"></i></a>
</div>
To ensure Font Awesome is available on your site, add the following link in your theme's header (you can use Appearance > Theme Editor for this):
Html Copy code
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
Example Using Custom Image Icons:
Alternatively, you can upload custom social media icons to your WordPress media library and use them in the widget:
Html Copy code
<div class="social-icons">
<a href="https://facebook.com/yourprofile" target="_blank">
<img src="https://yourwebsite.com/wp-content/uploads/facebook-icon.png" alt="Facebook" width="30" height="30">
</a>
<a href="https://twitter.com/yourprofile" target="_blank">
<img src="https://yourwebsite.com/wp-content/uploads/twitter-icon.png" alt="Twitter" width="30" height="30">
</a>
<a href="https://instagram.com/yourprofile" target="_blank">
<img src="https://yourwebsite.com/wp-content/uploads/instagram-icon.png" alt="Instagram" width="30" height="30">
</a>
</div>
2. Add Social Media Links in the Menu
Another method is to add social media links directly to the WordPress navigation menu.
Steps:
1. Go to Appearance > Menus.
2. Create a new menu or edit an existing one.
3. Add Custom Links for each social media platform:
o In the left sidebar, click on Custom Links.
o Enter your social media URL (e.g., https://facebook.com/yourprofile) in the URL field.
o Enter the name (e.g., "Facebook") in the Link Text field.
4. Save the menu.
5. Assign the menu to a location (such as a header or footer) depending on your theme's available menu locations.
Styling (optional):
You can style the menu icons by using CSS. For example, if you added Font Awesome icons to the menu, you can customize their appearance by adding the following CSS:
css
Copy code
.social-icons {
display: flex;
gap: 15px;
}
.social-icons a {
font-size: 24px;
color: #333;
}
.social-icons a:hover {
color: #007bff; /* Color change on hover */
}
You can add this CSS code in Appearance > Customize > Additional CSS.
3. Add Social Media Links Directly to the Footer (Custom Code)
If you want more control, you can directly modify your theme’s footer to include social media links.
Steps:
1. Go to Appearance > Theme File Editor.
2. Select the “footer.php” file from the right-hand sidebar.
3. Add your social media links in the footer HTML section.
Example Code for Footer:
Html Copy code
<div class="social-icons">
<a href="https://facebook.com/yourprofile" target="_blank"><i class="fab fa-facebook"></i> Facebook</a>
<a href="https://twitter.com/yourprofile" target="_blank"><i class="fab fa-twitter"></i> Twitter</a>
<a href="https://instagram.com/yourprofile" target="_blank"><i class="fab fa-instagram"></i> Instagram</a>
</div>
4. Add Social Media Links Using the Customizer
Some themes have a built-in feature for adding social media links through the WordPress Customizer.
Steps:
1. Go to Appearance > Customize.
2. Look for a Social Links or Footer section (this depends on your theme).
3. Enter the URLs for your social media profiles in the provided fields.
This option may vary depending on the theme you are using.
0 Comments
Post a Comment