Member Avatar for ibnyadam

HI,

I want to make custom button for facebook like,
I have an image of medal, i want to use this image, when user click on this image, facebook like action is call. and post in his profile.

A normal like button with my medal image.

<iframe src="http://www.facebook.com/plugins/like.php?href=www.carbonated.tv&amp;layout=button_count&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe>

Thanks

  • 5 Contributors
  • 6 Replies
  • 2K Views
  • 3 Years Discussion Span
  • Latest Post Latest Post by asem.yousif

Dani AI

Generated

Short answer: you cannot replace Facebook’s Like UI with your own artwork. Overlaying or covering the plugin (for example, putting your medal image on top as suggested) violates Facebook’s Platform Policies, which explicitly say you must not obscure or cover elements of their social plugins. Apps were also barred from incentivizing or gating content based on Likes as of November 5, 2014. Both rules are enforced and can lead to breakage or enforcement actions. (sec.gov)

What you can do instead is keep the standard Like button for the actual Like, and use your custom medal as a Share call‑to‑action. A simple approach that does not require the SDK is to open Facebook’s share dialog in a popup when the medal is clicked. Make sure your page declares proper Open Graph tags so the title, description, and image render as you expect in the dialog.

<!-- Medal as a Share trigger -->
<img id="fbMedal" src="/images/medal.png" alt="Share on Facebook" style="cursor:pointer">

<script>
document.getElementById('fbMedal').addEventListener('click', function () {
  const url = location.href; // or a canonical URL you choose
  window.open(
    'https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(url),
    'fbshare',
    'width=600,height=500'
  );
});
</script>

<!-- Minimal OG tags -->
<meta property="og:url" content="https://example.com/this-page">
<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="Short summary shown in the share dialog.">
<meta property="og:image" content="https://example.com/images/preview.jpg">

The share dialog now pulls content from your page’s Open Graph tags, not from query parameters, so set those tags on each page you want shared. (okay-plus.com)

For on WordPress: skip pasting raw iframe code into widgets. Use a maintained plugin that adds official Like/Share buttons and injects the SDK for you (e.g., BestWebSoft’s Like & Share), then place it via a block or widget. It is simpler and policy‑compliant. (wordpress.com)

Recommended Answers

All 6 Replies

Member Avatar for macneato

Probably not the best approach but definitely the fastest. Wrap your iframe in a div

<div style="position:relative">
<iframe src="http://www.facebook.com/plugins/like.php?href=www.carbonated.tv&amp;layout=button_count&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe>
</div>

Then just add another div, inside it, but this time, position it absolute (we basically want our new image eg the medal. to be above the normal thumbs up.

<div style="position:relative">
	<!-- new div with image -->
	<div style="position:absolute">
		<img src="medal.jpg" alt="pedal">
	</div>
<iframe src="http://www.facebook.com/plugins/like.php?href=www.carbonated.tv&amp;layout=button_count&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe>
</div>

Make sense? Using this code will not get it done for you, but you can play with it to make it work

Member Avatar for Love Lee

I have had no experience with HTML or Java script. When I try to past any of the codes for the facebook like button into the body of a widget it is kicked our our transcribed. Can anyone out there in the cyber world please tell me how the heck to do this?

If some one would be so kind as to highlight or type in instructions for me I would be so grateful. I have been to over 50 sites and get the same code but I do not know how to get wordpress to accept it.

Plug-ins??? HTML??? Java Script??? IFrame???XFBML???
Please help

Member Avatar for macneato

Hi,

Could you copy the code you have been currently trying, so we working forward and not backwards

Member Avatar for Love Lee

Man, I wish I could but I have no idea where to start. I have tried so many. I did find the share button within the wordpress permissions..but can not find the like button...

Member Avatar for irvingestrada

thanks guys, this works like a charm :)

Member Avatar for asem.yousif

Hi,
am a graphic designer and i have a website that has my work, and i wanted to ad a like, dislike and share buttons to each piece of my work so the peopel can share there opinions. which makes it simmialer to small social media website but just with images and likes and shares. my question is how could i link those buttons, and how it would founction? when a user like or counting how many likes ??

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.