Adding social media services under "Social Networks"?

I can’t recall off the top of my head which theme it was, but one of the themes I used before Newsmag had this feature where you could add your own social media icons/links alongside the pre-existing ones. Essentially, it looked like the “Social Networks” section of the theme panel looked, but there were a few at the bottom with two text bars each: one for the link to the social media site and another for a Font Awesome icon code.

What I want to do is include a link to my Calendly alongside my social media icons so that potential clients can easily schedule times to chat. I guess what I’m asking is whether you guys could:

(a) add Calendly to “Social Networks” in the theme panel,
(b) include a few create-your-own social media icons/links, or
(c) tell me how I could add Calendly (or some other service/icon) with the other social media icons/links.

Hopefully I’m explaining this correctly and it makes sense.

Follow up

Hi

You can add a new social icon in theme panel by editing td_social_icons.php file. Here is an example for Calendly: http://screencast.com/t/Alyl2fIgzh

I’ve used Font Awesome 4 Menus plugin to generate the icon for this network and the rezult can be seen here: http://screencast.com/t/2cRqAO27D – http://screencast.com/t/ZbfetQzWfSW You can add other icon by changing the fa-calendar-check-o class with other class from font awesome plugin.

if ($icon_id == 'calendly'){
    return '<span class="td-social-icon-wrap"><a' . $td_a_target . ' href="' . $url . '" title="' . self::$td_social_icons_array[$icon_id] . '"><i class="fa fa-calendar-check-o">></i></a></span>';
        }

Thanks!

• This reply was modified 10 years by Andrei L..

Hi,

the icon that i want to use i cant find it in the Font Awesome 4 Menus. Its the TuneIn icon. How can i add it? beside the code, if there any specification about the image size or colors?

thanks in advance.

Hi

You can try to insert an image using html inside php like here:

if ($icon_id == 'tune'){
            return '<span class="td-social-icon-wrap"><a' . $td_a_target . ' href="' . $url . '" title="' . self::$td_social_icons_array[$icon_id] . '"><i class="tune-icon"><img src="link-to-image-url"></i></a></span>';
        }

Thanks!

• This reply was modified 10 years by Andrei L..

Hi,

i did the changes and they look ok, beside the fact that i dont know how to achieve the on hover effect that the other social icons have in my top bar, i.e Facebook or Twitter. the y change color from white to the original.

thanks in advance.

Hi

Please provide your site url so I can have a closer look and get back to you with a more accurate answer.
Thanks!

You can access my website here:

http://radio.hotel-flower.com

u: andrei
p: @OOlf5(^0qCU0f5HmW!%o8Z3

pls have a look also at the bottom, the last icon that i added is not like the others 🙂

Hi

Try this css in theme panel > custom code > custom css:

.td-footer-info .tunein-icon img{
width: 25px;
height: 25px;
position: relative;
top: 5px;
}
.td-footer-info .tunein-icon{
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 11px 8px 10px 8px;
}
.td-header-top-menu .td-social-icon-wrap .tunein-icon img{
width: 20px;
height: 12px;
}
.td-social-icon-wrap .tunein-icon img:hover{
background-color: red;
}

Thanks!

New (although related) issue:

So I got Calendly in with the other social media icons no problem. However, I’m sure you’re aware that the social icons in the footer get a colored, rounded square behind them when you hover over them. The only one that doesn’t is the icon for Calendly that I added. How do I get the Calendly icon to get a hover-square, too?

Hi

Try this css in theme panel to add the hover color: http://screencast.com/t/kSlmS2Kafl1j

.td-footer-info .fa-calendar-check-o:hover {
background-color: #00aced;
}

Thanks!

@andrei_luca, can you tell me what the dimensions a custom social icon would need to be? Is it 25x25px?

Also, would would you get a custom social icon to behave as the others do? In the top menu, the icons change color on hover and in the footer the icons get a colored square behind them on a hover. How would I get a custom icon to do that?

I just tried using a custom icon for Calendly and has some major issues. I finally got it to look okay in the top menu, but the hover effect never worked. I didn’t initially know the dimensions so I started off making 100x100px icons assuming the theme would resize them, which it did to an extent. But it seems less able to do so in the footer. Even when I started making the icons 25×25, the alignment was way off in the footer. Like I said, it looked right up with the social media icons in the header, but in the footer my custom icon would be like 8 or so px higher than the line on which the other icons sit. Not really sure what I’m doing wrong.

If it’s too difficult I’ll just go back to the FA icon for Calendly, but I’d like to figure out how to make this work for future reference.

Hi

Theme’s social icons which are displayed in top menu or in footer are generated by a custom font and have a font size by 14px: http://screencast.com/t/fejWvOSg3 If you try to use a image the css will behave different and must be adapted at image size. Also the image must either have the same size as other icons, let’s say 15x15px, or be scaled with css to achieve the desired rezult.
The point is that there is a difference of how css works when you’re using an icon generated by a custom font than when you’re using a image to make the icon.
I can’t provide a general solution fort that as there are many aspects which must be considered.

Thanks!

So what you’re saying is that using a FA icon and using an actual picture involves two different sets of rules that would affect how the image gets placed on the page?

Do you know if creating an icon at 14 x 14px (standard web resolution of 72) in a png file would fix this? The other issue that I had was that the color of the icon wouldn’t invert in the footer to be a white icon on a black background.

If this is too complicated, I’ll just leave it as the FA icon. It’s not worth all the trouble, but if it’s doable I’d definitely prefer to have the actual Calendly icon.

Hi

You’ll need a specific css for your image in order to get the same effect as on the FA icon but I can’t say exactly how much code will be necessary. It depends by image aspect and the desired rezult. Could be enough two or three line of css or could be necessary a larger code, but I can’t guess how much.

Thanks!

Hey @Andrei_Luca

I just updated my Newsmag theme to 3.0 and since I’d forgotten to copy the files I’d changed, I’m having to go back through and change everything again.

One of the changes I’m making is adding the Calendly icon to my social media icons in the top bar. But if you’ll notice when you look at my website, there’s a > by the Calendly icon at the end and I can’t figure out why.

Here’s my code: http://i.imgur.com/ApOHhrJ.png

Hi

Make sure you update the theme according with our documentation because by default there shouldn’t be the Calendly icon. To make a clean install we recommend to update the theme via ftp method: https://forum.tagdiv.com/newsmag-install-via-ftp/

Thanks!

Hi, i’ll like to add Dailymotion icon on my site http://www.movielov.com, and i want it to be just like on this site https://trailersyestrenos.es/ can you please tell me how to proceed? the easiest way please

i’m not talking about featured video but social network like fb and youtube icon, i’ll also like to add dailymotion icon

i’m not talking about featured video but social network like fb and youtube icon, i’ll also like to add dailymotion icon

Hi. Add whatsapp, but don’t work. I receve 500 error.


//add whatsapp
if($icon_id == 'whatsapp'){
return '
<span class="td-social-icon-wrap">
<a' . $td_a_target . ' href="' . $url . '" title="' . self::$td_social_icons_array[$icon_id] . '">
<i class="whatsapp-icon">

</i>

</span>';
}