Coders Packet

WordPress Plugin to Add Social Media Links as Widgets

By Smitha S Maganti

The WordPress plugin is used to add social media links to the website as a widget. They are coded in PHP. The source code can be altered to add all the social media links required by the user.

Steps to activate and use the plugin: 

This plugin is called "your site social media widget". Here are the steps to use this plugin effectively. The steps are explained using a sample website developed using WordPress. 

1) Upload and activate the plugin: 

The first step is to download the plugin which is uploaded as a packet here. The plugin has to be uploaded as a zip file with the same name. To upload the plugin on WordPress, go to, Plugins -> Add New -> Upload Plugins. Install the plugin and activate the same. Activation option is available at Plugins -> Installed Plugins -> Activate the required plugin. Here is an image of how it looks: 

Uploading and activating the plugin

2) Add the respective social media links: 

After uploading and activating the plugin, the next step is to customize it by adding the respective social media account links. The activation of the plugin will create a sub-section called "Social Media" in the customize section. Click on it. To navigate to this sub-section, go to, Dashboard -> Appearance -> Customize -> Social Media. This is shown below: 

Social Media section in Customize

After clicking on "Social Media", you will get the option to add your social media URLs in the respective text boxes provided. Once you do this, click on publish.
Note: If any text box is empty and no link is provided to that particular social media, then that social media will not be displayed on the website.
The below image shows an example of how to carry this out. Be sure to add your own social media account links. 

Customizing social media accounts

3) Add the social media widget to the webpage: 

After customizing the social media account links, the next step is to add this widget to the webpage. The activation of the plugin also creates a widget called "Social Media" in the widget section. To navigate to this widget, go to, Dashboard -> Appearance -> Widgets -> Search for Social Media. The image below shows what this widget looks like. 

Social Media Widget

Click on this widget, place it on any part of the page you want it in, give any title for it, and update the changes. As an example, I've added the widget in the footer of the page and given the title "Follow us on social media!". This is shown below: 

Giving a title to this widget

Website after customizing and adding the widget: 

After customizing the widget and adding it to the page, it appears on the website as specified. In the theme chosen for this example, the widget looks like as shown below with the title I have given. 

How the widget is seen on the webpage

Testing the widget: 

When the social media links are clicked, the page should lead to the accounts provided by the user in the Customise section. In the below images, when the Facebook link is clicked, it navigates to the URL provided in this example, which is the Facebook login page.

     Clicking on Facebook       Facebook URL

 

Additional Note: 

Primarily, this plugin allows the users to add their Facebook, Gmail, and LinkedIn account URLs. However, these can be altered in the source code. New social media accounts can be added or existing ones can be replaced as required by the users. This is how it is done. 

Below is the code snippet from the source code which is used to register the social media, in this case, Facebook. This can be altered according to your needs. 

$accounts['facebook'] = array(
    'id'                => 'your_somed_facebook_link',
    'label'             => __( 'Facebook', 'your-site-social-media-widget' ),
    'class'             => 'facebook',
    'description'       => __( 'Enter Your Facebook Account Link', 'your-site-social-media-widget' ),
    'priority'          => 10,
    'type'              => 'text',
    'default'           => '',
    'sanitize_callback' => 'sanitize_text_field',
  );

To add a Twitter account for example,

1) Replace $accounts['facebook'] with $accounts['twitter'],

2) 'id' will be 'your_somed_twitter_link',

3) In 'label', change Facebook to Twitter,

4) In 'class', change facebook to twitter,

5) Change the 'description' to __( 'Enter Your Twitter Account Link', 'your-site-social-media-widget' ),

6) Change the priority according to where you want this social media to be placed in the list of social media. The higher the number, the lower the priority. Give different priorities to each social media.

7) Leave the rest as it is. 

 

This is how you upload and use this plugin to effectively add your social media links for your WordPress sites!

Download Complete Code

Comments

No comments yet