[TrankuilityParticipant]

Hello,

Right now my Facebook sharing button looks like this:

How do I change the image for Facebook to look like this:

Note: I’m going to stop using the other social share options so I don’t care about those. I just need to know how to change the Facebook Share Image.

[LelyModerator]

Hello There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with the exact page URL. Then please disable other social share options. It can be achieve using custom CSS. Once you have provided us with your URL, we will be happy to assist you with everything.

[TrankuilityParticipant]

Here’s the URL:

http://backpackerverse.com/hidden-hikes-in-california/2/

[RupokMember]

Hi there,

Thanks for writing in! You can add this under Custom > CSS in the Customizer.

.x-entry-share .x-share {
  background-color: #3b5998;
  border-radius: 8px;
  color: #fff;
  display: inline-block;
  font-size: 18px;
  height: 45px;
  line-height: 45px;
  margin: 0.25em 0.25em;
  text-transform: uppercase;
  width: 100%;
}

.x-icon-facebook-square::after {
  content: "Share on Facebook";
  font-family: Arial,Helvetica,sans-serif !important;
  font-weight: bold;
  letter-spacing: 1px;
  line-height: 1;
}

Hope this helps.

Cheers!

[TrankuilityParticipant]

That worked great, thank you.

Couple follow up things:

1) How do I put some space between the icon and the “S” text?

2) The Facebook link at the top of the sidebar now shows the “Share on Facebook” text. How do I remove that text? The Facebook icon in the sidebar should just be an icon and should only link to the Backpackerverse Facebook page.

[RupokMember]

Hi there,

Thanks for writing back! Please update the code with this –

.x-entry-share .x-share {
  background-color: #3b5998;
  border-radius: 8px;
  color: #fff;
  display: inline-block;
  font-size: 18px;
  height: 45px;
  line-height: 45px;
  margin: 0.25em 0.25em;
  text-transform: uppercase;
  width: 100%;
}

.x-entry-share .x-icon-facebook-square::after {
  content: "Share on Facebook";
  font-family: Arial,Helvetica,sans-serif !important;
  font-weight: bold;
  letter-spacing: 1px;
  line-height: 1;
  padding-left: 10px;
}

Hope this helps.

Cheers!

[TrankuilityParticipant]

That worked perfect! Thank you.

[Prasant RaiModerator]

We’re delighted to assist you with this.

[Author]

Posts