Add new entries to the "Social Links" Dashboard page

This is a community-contributed tutorial. This tutorial is over a year old and may not apply to your version of Concrete CMS.
Sep 16, 2015
By Daenu for Developers

First of all search for the desired Awesome icon here. In this example search for "stackexchange".

  1. Click on the icon in the result list.

  2. The HTML-code for the icon appears: ... class="fa fa-stack-exchange"....

  3. Copy just the stack-exchangepart without the fa fa-. Concrete CMS is taking care of it.

  4. In your project, create the file /application/config/concrete.php.

  5. Add to this file the following code:

<?php
return [
    'social' => [
        'additional_services' => [
            [
                'stackexchange', // the handle
                'StackExchange', // the title which will be shown in the dropdown
                'stack-exchange', // the icon name copied before
            ]
        ],
    ],
];

If you have previously added manual configuration items to this file you will need to add this new section as an additional array item.

That's it. Upload the file, empty site cache and you'll have a new entry in the Social Link Service Dropdown. Note that the Awesome icon needs to exist.

Updated Date: 02/16/2023 by community member way2sharp4u

--- ALTERNATIVE OPTION (If there is no FontAwesome icon and you need to use your own) ---

If you need to add a Social Link that does not have a Font-Awesome icon you can do the following:

This has been confirmed to work on Concrete CMS 9.1.3 with PHP 8.1.15.

For this I needed x3 PNG Transparent Images (sized the same). A BLANK IMAGE, MAIN-IMAGE and a HOVER-IMAGE. I used the Direct URL links for the PHP and the Custom CSS (Override). Note: For the PHP I was able to remove the 'https://yoursite/' from the URL path, but had to use the full URL path for the Custom CSS.

  1. In your project, create the file /application/config/concrete.php if it doesn't already exist.

  2. Add the following code to this file (Note:I modifed the above instructions and used the following code (Replace with your URL):

<?php
return [
    'social' => [
        'additional_services' => [
            [
                'rumble',        // the handle
                'Rumble',        // the title
                'temp-rumble',   // the icon (rumble doesn't exist yet)
                '<span class="temp-rumble"><img src="<DirectURL-RumblePNG-BLANK>" style="position:relative; top:-7px; left:0px; height:27px; border:none;" /></span>',
            ]
        ],
    ],
];

Note: If you have previously added manual configuration items to this file you will need to add the above new section as an additional array item.

  1. Go to Dashboard > Pages & Themes > Themes. Then, from the dropdown on your theme select 'Customize'.

  2. Click the Pencil Icon (aka Edit). Select your Current Template.

  3. Scroll to the bottom then toggle 'Custom CSS', then click 'Edit CSS'

  4. Add the following code into the pop-up.

.temp-rumble {
  visibility: hidden;
}
.temp-rumble img {
  background-image: url("<DirectURL-RumblePNG-MAIN>");
  visibility: visible;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 27px;
  width: 25px;
  padding: 0px;
  margin: 0px;
}
.temp-rumble:hover img {
  background-image: url("<DirectURL-RumblePNG-HOVER>");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 27px;
  width: 25px;
  padding: 0px;
  margin: 0px;
}
  1. Close the pop-up, then click 'Save Changes'

  2. That's it. Empty site cache (Clear Cache) and you'll have a new entry in the Social Link Service Dropdown along with a custom icon.

I hope this edit helps others. Thank you to the original posters of this solution, it was extremely helpful.

Recent Tutorials
Redirect all requests to HTTPS
Oct 9, 2024
By myq.

How to follow best practices for a secure web

Upgrade Concrete versions 9.3.1 and 9.3.2
Sep 10, 2024
By myq.

How to get past a bug in versions 9.3.1 and 9.3.2 that prevents upgrading the Concrete core through the Dashboard

How to use Composer with Marketplace extensions
Aug 22, 2024

Composer can be used to manage third-party extensions from the marketplace

Controlling Google Tag Manager Tags Based on Concrete CMS Edit Toolbar Visibility
Aug 13, 2024

This document provides a step-by-step guide on how to control the firing of Google Tag Manager (GTM) tags based on the visibility of the Concrete CMS edit toolbar. It explains how to create a custom JavaScript variable in GTM to detect whether the edit toolbar is present on a page and how to set up a trigger that ensures GTM tags only fire when the toolbar is not visible. This setup is particularly useful for developers and marketers who want to ensure that tracking and analytics tags are not activated during content editing sessions, thereby preserving the accuracy of data collected.

Upgrading Concrete from 8.5 to 9.x
Jun 21, 2024
By myq.

How to avoid problems upgrading from 8.5 to 9.x

How to change the default date format
May 30, 2024
By myq.

Change the format of the default date

Improvements?

Let us know by posting here.