button-link to my facebook page

  • Unknown's avatar
    aontiverosrobles · Member ·

    I need a button to direct people from my website to my Facebook page.

    I would like to have it in the head of my website or in the menu

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    lizthefair · Member ·

    Your current theme, Sela, makes it easy to put a button that links to your Facebook page and other social media profiles in the footer. You can read more about it in the “Social Links” section of your theme’s documentation:

    https://wordpress.com/themes/sela/

    If that doesn’t work for you, it’s also possible to add a Facebook button to your top menu, it’s just a little more complicated. If you decide to go this way, let me know and I’ll help walk you through it.

  • Unknown's avatar
    aontiverosrobles · Member ·

    Thanks you very much for your answer.

    First option can work, but if the second one is not so much complicated I prefer it!

  • Unknown's avatar
    lizthefair · Member ·

    Here’s the basic process required to add the image links to your existing menu: https://en.forums.wordpress.com/topic/hemingway-rewritten-css-add-social-network-icons-to-menu-bar?replies=13

    The CSS will be a little different than what’s explained in the post as CSS selectors are theme specific.

    If you want to go that way, first upload the icon images you want to use to your media library and add your social links to your menu as regular text links.

    Once that’s all done I’ll help you get the CSS you need to make it all work out.

  • Unknown's avatar
    aontiverosrobles · Member ·

    Thank you very much!

    I already add the social link to the menu, and upload the icon image.

    What should I do next?

  • Unknown's avatar
    lizthefair · Member ·

    The last step is to paste the code below into the CSS box in your customizer.

    Let me know if you have any trouble with that!

    #menu-item-330 a {
background-image: url('https://alejandroontiverosrobles.files.wordpress.com/2015/02/facebook_circle_color-512.png');
background-repeat: no-repeat;
background-size: 25px;
background-position: 15px 50%;
padding-left: 50px;
text-indent: -9999px;

}
  • Unknown's avatar
    aontiverosrobles · Member ·

    GREAT!! thakn you very much,

    How can I make the icon a little bit bigger?

  • Unknown's avatar
    lizthefair · Member ·

    If you replace the code I gave you before with this code, the icon will be bigger. To make adjustments first change the background size and then when it’s the size you want, adjust the font-size to make sure the full icon shows. I don’t recommend going much bigger than what you see with the code below as it will cause the icon to get out of sync with the rest of the menu.

    #menu-item-330 a {
	background-image: url('https://alejandroontiverosrobles.files.wordpress.com/2015/02/facebook_circle_color-512.png');
	background-repeat: no-repeat;
	background-size: 35px;
	background-position: 15px 50%;
	padding-left: 50px;
	text-indent: -9999px;
	font-size: 20px;
}
  • Unknown's avatar
    aontiverosrobles · Member ·

    Like this is perfect.

    Thanks, you’ve been great help.

    I have one last question. Is it possible to remove the dark box at the bottom of the website (also the text about the theme and wordpress)?

  • Unknown's avatar
    lizthefair · Member ·

    I have one last question. Is it possible to remove the dark box at the bottom of the website (also the text about the theme and wordpress)?

    The WordPress.com terms of service require you keep the text about the theme and WordPress, but you can remove the dark box around the footer and modify what those links look like to better match your site. Try this code and see what you think.

    .site-footer{
	background:none
}
.site-info a{
	color:#6d6d6d;
}
  • Unknown's avatar
    aontiverosrobles · Member ·

    that is better, thanks

  • The topic ‘button-link to my facebook page’ is closed to new replies.