The social media networks supported out-of-the-box by the component are Facebook, Google+, LinkedIn, Twitter, YouTube, Pinterest, Instagram and Skype but you can still add your own.

There are multiple ways to show social information in the component for the supported networks:

Through links A to E

In link A (for instance), you would typically enter a URL such as https://www.facebook.com/john.doe.

The output will look like:

Regular field Link field
v3.0
v3.0 The label and the tooltip are the link A label by default. The value (the url) can be represented with or without the protocol (= with or without the http part)
The label is the link A label. If missing, it will default to the name of the social network (in this example: Facebook)  The tooltip is the link A label. If missing, it will default to the name of the social network (in this example: Facebook)

The extension will 'recognize' the supported social media networks and select the appropriate icon, when needed. The following networks are also recognized (on top of the officially supported ones):
Tumblr, Vimeo, Wordpress and Blogger.

Pro

Through the content plugin Add key contact fields

After enabling the plugin, select the social media links you wish to make available for all contacts.

The plugin only requires the actual specific user name used for the social media account. For instance, john.doe from the full link https://www.facebook.com/john.doe. The URL will be created automatically by the extension, when needed.

The output will look like:

Regular field Link field
  The link is created automatically
Pro Joomla 3.7+

Through custom fields of type text

The content will be typically something like john.doe from the full link https://www.facebook.com/john.doe. The URL will be created automatically by the extension, when needed.

The output will look like, when associated to a global functionality (in the global configuration, shared options tab):

Regular field Link field
  The link is created automatically

The output will look like, when NOT associated to a global functionality:

Regular field Link field
[not a possibility]
The label is the custom field label.
The default icon can be replaced with an icon selected through the icon picker
 
Pro Joomla 3.7+

Through custom fields of type url

The content will be the full link to a social account such as https://www.facebook.com/john.doe.

The output will look like, when associated to a global functionality (in the global configuration, shared options tab):

Regular field Link field
v3.0
   

The output will look like, when NOT associated to a global functionality:

Regular field Link field
v3.0
v3.0
v3.0 The label and the tooltip are the custom field's label. The value (the url) can be represented with or without the protocol (= with or without the http part)
The label is the custom field label.
The default icon can be replaced with an icon selected through the icon picker
The tooltip is the custom field label.
The default icon can be replaced with an icon selected through the icon picker

A special case: Skype

Skype' URL is created automatically by the extension (when using the plugin or a custom field of type text), following Microsoft's syntax:
skype:<username|phonenumber>[?[add|call|chat|sendfile|userinfo]]. At this time, the only supported URL is skype:<username>?chat.

It is not possible to create a custom field of url type because the skype: protocol is not supported by that type. But you can definitely use links A to E to create your own Skype URL.

Adding an unsupported social Network

Until Joomla! 3.7, it was only possible to add an unsupported social network through links A to E. Now that Joomla! 3.7 is upon us, such fields can be added through custom fields as well.

There is one issue with adding unsupported social networks: you most likely will not find an associated icon in the icon picker.
Here is a CSS workaround that allows your own images to show as icons:

.fieldlinka .icon:before {
 content: '';  /* removes the font icon */
 background-image: url(../../images/my_new_social_network.png);
 width: 16px; /* width of the image */
 height: 16px; /* height of the image */
 display: inline-block; 
}

fieldlinka has to be modified according to your configuration. For links A to E, concatenate field with linka or... or linke. For custom fields, concatenate customfield- with the custom field alias.

Featured Blogs