1

I'm wondering how to replace my social media icons with my own custom images. For example instead of using the typical Facebook Like button or Twitter follow button I would replace it with my own image, while keeping the same functionality.

Websites like BuzzFeed and SuperCompressor are good examples that it can be done. Each has replaced the Facebook Like button with a custom image but the functionality remains the same.

I'm having a hard time finding any information one the web. Can anyone guide me in the right direction?

Kevin Reid
  • 37,492
  • 13
  • 80
  • 108
Ben Aaron
  • 39
  • 2
  • 5
  • well if it's going to be custom wouldn't that mean you make it yourself to your own desired specs however you wish? that's like asking I want to draw a custom picture, what should I draw? are u asking what tools you would use to make it? – Sammy Jun 04 '14 at 03:17
  • I should have been more exact. I want to replace them with custom images similar to what the websites have done above. – Ben Aaron Jun 04 '14 at 03:20
  • those are done with a combination of css and images. facebook for example: blue background color and rectangle shape and size is done with css and the 'f' is a transparent image. you need some knowledge of css to accomplish this. – Sammy Jun 04 '14 at 03:25
  • I'm fairly good at CSS and HTML and I've created my own custom images. The questions is how do I get them to act similar to the like button. – Ben Aaron Jun 04 '14 at 03:32
  • What social plugin are you using? in the end all you have to do is to replace the content behind the image link of that button (some css customization might be needed if the initial code used sprites) for us to be able to help you you'll need to tell us what plugin/theme is showing the social images... – jnhghy - Alexandru Jantea Jun 04 '14 at 06:48

2 Answers2

1

As the place you will find this image may depend on the plugins and themes you use, you have to find out where the actual image comes from.

To do so, I would suggest that you install a browser such as Chrome that allows you to inspect an element on your page (will open the portion of code displaying the selected item). Once you see where the image comes from, you can either replace the actual image with a custom one if it's on your website's server, or search your website files for this image's URL and replace it with a link to the image of your choice.

Yann
  • 317
  • 2
  • 8
0

I think something like this http://www.inboundnow.com/apps/facebook-like-button-generator/

might work but the google search for

custom facebook like button for website

has a lot of results

EDIT: Well if you already know how to make a custom image you can follow https://stackoverflow.com/questions/9493988/how-to-trigger-facebook-like-button-from-custom-button

to make your custom image into a facebook like button

`http://jsfiddle.net/masondesu/haxvL/`

This site also has some info

user3407161
  • 23
  • 8
  • The op said he knows how to create the images, he doesn't know how to replace the actual image in the website with the custom one since your answer is not answering the op it has a downvote from me, I'll wait for you to edit your answer. – jnhghy - Alexandru Jantea Jun 04 '14 at 06:50
  • Sorry OP didn't state that he knew how to make an image at the time of answering – user3407161 Jun 04 '14 at 13:17