SNP - Social Network Profiles

Table of contents:

Description

SNP is a Question2Answer plugin that allows users to add information about social networks they are part of.

Features

• Display a dynamic and modern web component that contains the contact information for the user
• Allow users to update their information in an easy to use popup
• Allow admins to customize what social networks will users be able to update in their profiles
• RTL Support
• Allow admins to configure how the web component will display each social network
• Full internationalization support: Every piece of text the plugin uses can be customized. Spanish translation included
• Almost all HTML is output by means of a simple template system
• Very simple installation: Copy the plugin directory pupi-snp into the qa-plugin directory. Leave the directory name the way it is
• Upgrade system support: The plugin will be able to properly upgrade from previous versions
• New social networks can be added, provided the user has basic PHP and CSS knowledge

Requirements

These are the technical requirements for the plugin to work properly:

• Q2A core version 1.7.*, 1.8.*

Limitations

• There is currently no support for external users, including WordPress
• Changes to CSS might be required depending on the selected theme. Some CSS customizations for popular open source themes are already included in the Theme hacks section. Take a close look at it before buying the plugin
• This plugin does not provide any authentication means to the social networks added

Sample usage and screenshots

The motivation of this plugin is to encourage users to be active by allowing other users to easily suscribe or follow them in other social networks. It is also particularly useful for site owners of a Q2A network as this allows users to publish their contact information of other Q2A sites in the network.

In the following image there is a sample user profile page using the Snow Flat theme for a user who has entered four social networks:

The profile page is first loaded with the main big button only. Once clicked it opens the smaller buttons with each social network.

This is one of the effects that displays the social networks:

There is also another supported effect which displays all social networks in a straight line.

In order to configure their social networks, users just need to edit their profiles from their My account section. There, they will find the following field:

After clicking it, a pop up will be displayed. It will allow users to select which social networks they want to link to and add their handle for each network.

After adding some social networks and their handles, the user just needs to save their profile data in order to update them, as they would with any other custom field.

The admin has the ability to choose which social networks the user will be able to add to their profile. These are the ones that come with the plugin: Blogger, DeviantArt, Dribbble, E-Mail, Facebook, Flickr, GitHub, Instagram, LinkedIn, Pinterest, Skype, Socl, Steam, Twitter, Vimeo, Wordpress, Yahoo, YouTube and Question2Answer. Note the latter is used as an example of how to add a custom network.

This is what the admin interface looks like:

Plugin settings documentation

These are the plugin settings and a description of each of them.

• Plugin enabled: Enables or disabled the plugin.

• Social networks user field: Defines which user field from the user profile will hold the user data. This field must be set in order for the plugin to work. After installation, you should create the user field and assign that newly created field as the "Social networks user field". In order to do so, follow these steps:

  1. Navigate to Admin -> Users section and click on "Add new field"
  2. Type the name of the field, e.g., "Social Networks"
  3. In the "Content type" combobox select "Single line of text"
  4. Leave "Show field on user registration form" unchecked
  5. Navigate to Admin -> Plugins section and click on the SNP plugin options
  6. In the "Social networks user field" combobox select the name of the field you had just created, in this case, "Social Networks"

• Bubble theme: There are 3 different predefined themes for the bubbles. Here is an example of each them:

  • Default theme:

    

  • Slick theme:

    

  • Square theme:

    

• Bubble orientation: There are 2 different possible orientations for the bubbles. Here is an example of each them:

  • Arc:

    

  • Line:

    

• Bubble arc start: Determines the initial position from where social network bubbles will be placed. Valid for Arc and Line Bubble orientation.

  

• Bubble arc length: Determines the length in degrees of the arc. Valid for Arc Bubble orientation.

  

• Bubble arc radius: Sets how far from the main bubble the social network bubles are placed. Valid for Arc Bubble orientation.

  

• Bubble gap: Represents the separation of each social network bubble from each other. Valid for Line Bubble orientation.

  

Developers

Adding custom social networks

It is possible to add custom social networks to the plugin. A good example is the Q2A network. It is not part of the original set of networks but it is added as a custom network.

In order to create a network you will need:

• The network image for your preferred theme or the three of them. Default and slick themes use 32-pixel squared images while the square theme uses 64-pixel images
• A network that can link to a user's profile by using their handle in the URL. E.G.: http://twitter.com/<handle>
• The name of the network
• The tooltip to display when hovering over it

Choose an alphanumeric ID for you network (should be a valid CSS class too). E.G.: mynetwork. Place the images for the themes in the resources/classy-social-pupi1985-2.4.0/custom-images/<theme> directory in a similar way as the Q2A ones that are already in the release. The file names should be mynetwork.png.

Edit file helpers/pupi_snp_network_data.php. Locate the $customNetworks array and add data for the mynetwork network in a similar way as the q2a network data that is already present.

'mynetwork' => array(
    'text' => 'bubble_text_mynetwork',
    'url' => 'http://mynetoworkfakedomain.com/users/%s',
    'tip' => 'bubble_tip_mynetwork',
),

• text is used as an ID to locate the translation for the network in the translation file
• url is the URL of the profile. Note that %s is a placeholder for the handle input by the user. E.G.: if the user inputs john123 as the handle for the mynetwork network the URL accessed when clicking it would become http://mynetoworkfakedomain.com/users/john123
• tip is an ID to locate the translation for the tooltip displayed when the pointer hovers the network image

Edit the lang/pupi_snp_default.php file. Add to the returned array the IDs for the text and tip as new keys and the translations as its values:

return array(
    /* Many elements... */

    'bubble_text_mynetwork' => 'My Network',
    'bubble_tip_mynetwork' => 'Checkout my My Network prifile!',
);

Finally add the CSS information to link it to the filenames. Edit file resources/pupi_snp_styles.css and the location of the images for each theme:

.classysocial .default .mynetwork {
    background-image: url(classy-social-pupi1985-2.4.0/custom-images/default/mynetwork.png);
}

.classysocial .slick .mynetwork {
    background-image: url(classy-social-pupi1985-2.4.0/custom-images/slick/mynetwork.png);
}

.classysocial .square .mynetwork {
    background-image: url(classy-social-pupi1985-2.4.0/custom-images/square/mynetwork.png);
}

Now it is possible to enable the network from the admin options. If you require further assistance other than the one in this guide then check the Support section.

Support

Technical support must all go through the issues section on this site and be in English.

• Bugs: if you find a bug or error in the plugin, create a bug issue detailing the steps needed to be performed in order to reproduce the issue. Provide the steps from scratch, i.e., starting just after a clean Q2A setup. Attaching screenshots might be useful too. Also include your PHP, MySQL, Q2A and plugin versions. Make sure you have no other plugin in the qa-plugin directory while reproducing it and that you are using the default Q2A theme.
• New features: feel free to request features using the issues section. Select the enhancement kind in the combobox and explain in detail the feature and why you consider it would be useful to others.
• Questions and other technical support: create a task issue explaining the situation in detail.

Administrative (all non-technical) issues should go through private message to my profile in the Q2A site. Make sure to provide your email address.

FAQ

• Do you give refunds in case I end up not liking the plugin?

  No. The reason for this is that not only this wiki is quite descriptive but also the plugin can be seen and interacted with live in the demo site. You can fully test the plugin before buying so there are no refunds.

• Will this plugin work in my theme?

  This is impossible to tell. If your theme only modifies CSS, moset likely, it will. However, you might need to make this plugin's CSS match your theme. No support will be given on that. This plugin works well with the SnowFlat theme released with Q2A 1.8.0.

• Are bug fixes charged separately?

  No. Bug fixes are already included in the price. New features, however, might not be free.

• Would you mind doing some customizations to this plugin?

  Sure. Feel free to get in touch as explained in the Support section.

Get the plugin

Click here to navigate to the main plugin page. From there, you will be able to buy the plugin.