Social Network links custom html

Hi there,

I am trying to add some social media links on dashboard but i just need to see icons a bit different. So when I check out the Sharing\SocialNetwork\Service class which provides html for icon, it seems we have a ‘customHTML’ attribute for this purpose.

The only problem is that I do not see any set function for this attribute and on dashboard we can’t just put some html for added icons.

Is there a way to do that? I am using v8.5.7 btw.

Thanks in advance.

Murat

Hi @muratyil If click the social icons block and pop out the menu, choose design & block template.
Screen Shot 2022-10-23 at 10.04.52 AM

There are some options that might help in here:

If you’re trying to change the look of social icons in the Concrete dashboard, you might have to do some overriding.

If you’re trying to change them in a theme for use in the social media links block, I believe you can include a directory in a specific place that provides substitute social media icons. I can dig up that exact path if that’s what you’re needing.

I need to use them for theme. i would appreciate for more digging. Thanks, Murat

I add all my themes as packages then add a block folder to my package and overide stuff like that in there.

I have changed the look and feel to the social stuff many times.

Thanks for the answer. Could you please check this repo, I tried to explain what I wanted exactly.
https://github.com/yildirimmurat/concrete-cms-custom-social-links

Maybe I should explain what I meant in detail:

So, view of social_links block looks like this:

<div id="ccm-block-social-links<?php echo $bID; ?>" class="ccm-block-social-links">
    <ul class="list-inline">
    <?php foreach ($links as $link) {
    $service = $link->getServiceObject();
    if ($service) {
        ?>
            <li>
                <a target="_blank" rel="noopener noreferrer" href="<?php echo h($link->getURL()); ?>"
                    aria-label="<?php echo $service->getDisplayName(); ?>"><?php echo $service->getServiceIconHTML(); ?></a>
            </li>
        <?php
    }
}?>
    </ul>
</div>

Lets think that we want to use facebook icon and want to use different icon html than default one <i class="fa fa-facebook"></i>. Then, maybe we can check if $service is of service of type facebook, and only then we put our custom html. Like this:

<!-- undesired option -->
<div id="ccm-block-social-links<?php echo $bID; ?>" class="ccm-block-social-links">
    <ul class="list-inline">
    <?php foreach ($links as $link) {
    $service = $link->getServiceObject();
    if ($service) {
        switch($service->getHandle()) {
            case 'facebook':
                $customHTML = '<i class="my-custom-facebook-icon"></i>';
                break;
            default:
                break;
            ?>
                <li>
                    <a target="_blank" rel="noopener noreferrer" href="<?php echo h($link->getURL()); ?>"
                        aria-label="<?php echo $service->getDisplayName(); ?>"><?php echo $customHTML ? $customHTML : $service->getServiceIconHTML(); ?></a>
                </li>
            <?php
        }
    }
}?>
    </ul>
</div>

But, wouldnt it be also possible if we could set a custom html on dashboard, and then use it everywhere ?

<!-- desired feature using a set function-->
<div id="ccm-block-social-links<?php echo $bID; ?>" class="ccm-block-social-links">
    <ul class="list-inline">
    <?php foreach ($links as $link) {
    $service = $link->getServiceObject();
    if ($service) {
        switch($service->getHandle()) {
            // we can define our custom html here and
            // if we have a set function we can use it 
            // but if we can do this on dashboard, much better..
            // then we dont need even a custom block template
            case 'facebook':
                $customHTML = '<i class="my-custom-facebook-icon"></i>';
                $service->setServiceIconHTML($customHTML);
                break;
            default:
                break;
            ?>
                <li>
                    <a target="_blank" rel="noopener noreferrer" href="<?php echo h($link->getURL()); ?>"
                        aria-label="<?php echo $service->getDisplayName(); ?>"><?php echo $service->getServiceIconHTML(); ?></a>
                </li>
            <?php
        }
    }
}?>
    </ul>
</div>

So, when I check the Concrete\Core\Sharing\SocialNetwork\Service class, I see we have $customHTML property and we do not set it in anywhere. We pass a null value on construct and it remains that way all the time. Even when we delete this property i wont change anything :slight_smile: