Page Builder 
Widgets Bundle 
SiteOrigin CSS 
Installer Place Like (FV), +1 (Google+), Pin It (Pinterest, etc. Buttons in Header
Hello,
Could you please tell me how to insert all of the social media buttons mentioned in the thread title in this specific area?:
http://img.techpowerup.org/150618/6-18-201510-40-27AM.jpg
I would appreciate any help. Thanks!
URL: http://img.techpowerup.org/150618/6-18-201510-40-27AM.jpg
This is our free support forum. Replies can take several days.
Need fast email support? Get SiteOrigin Premium
Replies
44Oops, just noticed a misspelling. I meant to put “Place ‘Like’ button (FB = Facebook)…”
Hi BFPS
Thanks for reaching out.
There are lots of different plugins that add a widget to your installation that could be used at Appearance > Widgets > Header. You could use our Social Icons widget, part of our Widgets Bundle:
https://wordpress.org/plugins/so-widgets-bundle/
Let us know how you come along :)
Hey Andrew,
Thanks for the advice, but when I refresh the page after placing the widget in the header section, nothing shows up. Is there something else I need to activate for it to appear? Just so you know, I have a static home page.
Are you perhaps using the Logo in Menu masthead layout? There is unfortunately no widget area in the menu. In that case you might consider adding icons to your menu using:
https://wordpress.org/plugins/menu-icons/
That’s a nice plugin and I’ll probably use it, but it’s not exactly what I am seeking.
I went to the Facebook Developer’s page and this is the code they gave me to place anywhere on the page:
“”
Where would I need to place this so that it goes directly *above* (right-aligned) the entire logo in menu masthead layout?
It’s unfortunately hard to see what’s going on in your screenshot, sorry. Could you perhaps send through a link to your site so we can see what’s going on with the header widget area. Please also see my comments re: the masthead layout. If you’re using Logo in Menu there is no header widget area available. Thanks :)
This is a private message.
Thanks.
There is no header widget area when using the Logo in Menu layout. You’d need to make use of the Default masthead. The masthead layout can be set from Appearance > Theme Settings > Layout > Masthead Layout. Once you’ve reverted to default the widget area at Appearance > Widgets > Header will render in the header.
Your page looks like it’s missing the Page Wrapper div. Do you know if theme files have been edited at a code level? That would explain what’s happening.
This is a private message.
Most likely header.php. All WordPress themes completely overwrite their own folder during theme updates. Please remember, don’t make any changes via Appearance > Editor unless you’re using a child theme.
You can insert Facebook scripts with a plugin called “Header and Footer Scripts”.
:)
Andrew,
I tried that plugin and followed the instructions on the FB plugin page here and nothing shows up, I don't get it.
I forgot to attach the image on the exact area I want these buttons to appear in the last message, so I'm attaching it now. If only there was a way to know where exactly to place this code. Frustrating!
Let’s take a quick step back for a moment.
Placing anything in the header is waaaay easier if you switch to the default Masthead. Just set the masthead background color to be the same as your menu color and reduce the padding in the header, all in Appearance > Customize > Theme Design and you’ll have the setup. Are you with me when I say that Appearance > Widgets > Header will not render when you use the Logo in Menu masthead layout? Just want to make sure we’re on the same page on that point.
When you say nothing shows up, where are you placing the front end portion of the Facebook code? The code is made up of two parts. One part, the script, goes into the header field provided by the Header and Footer Scripts plugin. The second part, the front end display portion goes at Appearance > Widgets > Header. Appearance > Widgets > Header only renders if you use the default masthead layout.
Hope this all helps :) If not we can always login and take a quick look for you.
Hmm, I always figured that reverting back to the default masthead wouldn't be as attractive, that's why I was trying to do this another way.
As far as the code, maybe that's why it wasn't showing up. I was using the same masthead layout I have currently.
I changed the password so you can log in and work your magic:
RollDanTide/password32
Please revert to the default masthead and let me see if I like it first,
thank you, Andrew.
This is a private message.
Sweet, I’ll dive in now.
Mmm ok so I’m unable to change the masthead layout. You’ll need to jump in for us here. I’m assuming it’s linked to edits that have been made.
Please remember: It’s not safe to edit the theme. Child theme to be update safe.
I can dive in again once we’re back to normal.
This is a private message.
Ok cool so couple of things to try:
1. Turn off all plugins for a moment. Do theme settings work then?
2. Or to be sure, switch to another theme, delete Vantage and re-install using the ZIP file.
This is a private message.
Okay, I did both steps. Deactivated all plugins, no effect. And deleted the theme and reinstalled it, and I don't see anything different. This is perplexing lol
Cool, thanks. Checking now.
Can you send me the FB code quick?
The script and the front end markup.
Here you go:
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
..and…
<div class="fb-like" data-href="http://www.facebook.com/directinteractions"
data-layout="standard" data-action="like" data-show-faces="false"
data-share="false"></div>
This is unrelated, Andrew, but before I forget…there is a warning sign about the "initial" value in this custom CSS code. Here it is:
/* Menu Search */
#search-icon {
bottom: 0;
height: 20%;
top: initial;
}
All sorted. Can I leave you dig around and refine from here?
Settings > Header and Footer: Script
Appearance > Widgets > Header: HTML
Nice, it's not exactly what I was looking for, but it'll make do. How could
I right align this code?
Also, please see the message I sent you right before you sent your last one. Thanks man
initial is fine, not sure why CodeMirror is warning about that. If the value is working for you as required then I’d ignore the warning.
It looks like the width is specified when you build that button in on FB’s site. It’s at 450 right now which is what’s pushing everything to the left.
Actually, it's not (that's why I checked the CSS code to begin with). For some reason, it started displaying like this (please see attached). It was working just fine before.
Unfortunately no email attachments running on the forum yet.
Sorry, this is a bit beyond the scope we can assist with. Hope you understand. We struggle to help everyone out if we dip too far into the customisations area or too far into other plugin support.
This thread might help: http://stackoverflow.com/questions/4348235/how-can-i-make-the-facebook-like-buttons-width-automatically-resize.
What I’d focus my search on is how to set the width manually. Once the width is set smaller the setup will right align. The header sidebar is right aligned by default. Try swapping out the Facebook code for a regular line of text and you’ll see the right align in action.
Sorry for the misunderstanding, the search button was like that before you added the plug-in or FB code, that's why I asked.
My bad, reading too fast, didn’t realise we’re looking at search. Yeah, that’s in scope for sure. Let me check it out.
Try removing the entire Custom CSS rule for this. Works on my side:
Remove:
#search-icon { bottom: 0; height: 20%; top: initial; }Yep, that's the same code I have under my custom CSS. :/
Anyways, I removed it and still the same thing. Hmm
Are you trying to sort out the search icon alignment? If so, remove the search rule in your Custom CSS and the alignment will be sorted.
Your page is being cached. Please clear WP Super Cache.
As a rough rule if you make a change and don’t see a result, think caching. Is this page being cached? Am I looking at a cached result?
I have the WP Super Cache plugin installed, but it is deactivated at this moment. I don't know of any other way that it is being cached.
Try activating it then go to Settings > WP Super Cache and Delete Cache then Delete Cache button again on the next page.
Never mind, what I did was delete the plugin and it seemed to have fixed it from my end.
Again, thanks for all your help and most importantly patience, Andrew. It is very much appreciated.
Not sure why it was doing that. I know WP Super Cache was de-activated because I de-activated while we were making changes. When I inspected the page source I saw a cache result comment still there.
Cool, no problem, glad we could help out.
Cheers for now :)
Replies on this thread are closed.
Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.