[Resolved] How to connect facebook and instagram accounts to icons on website

[Julie]

Hello,
I have facebook and instagram icons on my page. I’d like to link my accounts to the icons, but I’m having trouble working out exactly how to do that. Could you give me the steps to do so? Thank you so much!

[Ying]

Hi Julie,

You just need to update the icon’s link to your Ins and FB links.

If you don’t know how, can you share the admin login so we can take a screenshot for you?

Please use the private info field for admin login.

[Julie]

That would be so helpful if you could send me screenshots of the steps. I’ll send the login info in the private field. Thank you so much!

[Leo]

I only see the username and password without a link to the site 🙂

[Julie]

Oops sorry!!! Will send that info now

[Leo]

The login and password did not work for me.

That being said, I can see that the icons are added as Lightweight Social Icons widgets in the Top Bar widget area:
https://docs.generatepress.com/article/top-bar-widget-area/

Does that help?

[Julie]

I’m so sorry. This is all pretty confusing to me. I gave you Generate Press login info. I’ll send WordPress login as well. I know the icons are on my webpage but I don’t know how to actually connect my accounts so people are directed to my fb/insta pages when they click on the icons. Thank you for your patience with me!

[Leo]

Here you go:
https://www.screencast.com/t/zOH5YF4ckk

[Julie]

Thank you. I put the insta and fb links in the widget spot you showed me but when I click on the icons on my webpage, I am just redirected to my webpage. It’s not going to the fb or insta. Could you please tell me exactly what to add after the hashtag.

[Julie]

I went back and checked the widgets spot again and the info I put in for insta and fb page is not showing up. I did update after I put in the web link, so I’m not sure what is happening.

[Fernando]

Hi Julie,

To clarify, are you referring to the links not saving?: https://share.getcloudapp.com/JruyWRwk

If so, can you try using GenerateBlocks instead to create these social icons? Here’s a video showing how: https://youtu.be/yAleVWQi5EA?t=99

You can also add GenerateBlocks in Appearance > Widgets.

Let us know how it goes.

[Julie]

Yes. I enter the fb/insta link after the hashtag, hit update, and then go to my website and when I click on the icons on my home page it just directs me back to my website.

[Julie]

I have worked out how to put the widgets for facebook and instagram on my top bar. From the Appearance > Widgets > Top Bar, I added a new “social icon” block. The links are working.

However, the icons are huge and I prefer a different color for each icon, but I can’t work out where to go to change the colors. I went to the global colors and don’t see the specific blue and pink used for the icons and where in my global colors, so I don’t know where those specific colors are coming from. I also don’t know how to change the size and move them further up on the top bar. For some reason, they are positioned very low on the top bar, therefore making the top bar thicker than it normally is.

[Fernando]

I see. Since you already have GenerateBlocks, we highly recommend you build the Social Icon links through GenerateBlocks instead as shown here: https://youtu.be/yAleVWQi5EA?t=99

Through this, you can modify the size, colors, spacing, and other stuff with no code needed.

The one you’re currently using to create Social Icons requires custom code to alter.

Let us know what you think.

[Julie]

I’m sorry it’s taking me so long to figure this out. Would I begin with an already existing block? Would I take the header block and add a container to that block like the youtube post lays out? In the Youtube video it seems they are building a new header? Am I understanding that correctly?

[Author]

Posts