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
Setting addon/theme version compatibility in the marketplace
Jan 9, 2024

For developers worn out with setting the latest addon or theme version manually across too many core versions, here is a JavaScript bookmarklet to do it for you.

How to get the locale of a page
Jan 8, 2024
By mandako.

Now, why don't we just have a getLocale() method on Page objects beats me, but here's how you work around it

Using a Redis Server
Jun 16, 2023
By mlocati.

How to configure Concrete to use one or more Redis servers to persist the cache.

Using the Concrete Migration Tool Addon
Apr 27, 2023

How to use the Concrete CMS Migration Tool

How To Add Page Last Updated To Your Concrete CMS Pages
Mar 7, 2023

Concrete CMS has a page attribute you can add to a global area called "Page Date Modified." Here's how to add it

How To Exclude Subpages from Navigation
Dec 24, 2022

How to exclude subpages from navigation - useful for a news or blog link in your main navigation where you don't want all the subpages to appear in a drop down menu.

Improvements?

Let us know by posting here.