Facebook like button for item not a link - javascript

I can create a Facebook like button easily enough to like a URL but what I can't do is get it to like an item in a Facebook page.
So for example in this link (https://www.facebook.com/photo.php?fbid=347060885316097&set=t.540015414) is a picture and you can like it. But if I was to place that URL inside a LIKE button and click that I'm liking the page and not the item.
So any ideas on how to create a button to like an item rather than the link?

See the Facebook API:
https://developers.facebook.com/docs/reference/plugins/like/
Using their generated code will show you what is really required. They show you a link to an iFrame with parameters that you can use for the actual item being liked (the web page or the Url to the picture in each of those cases).
GL.

Related

Facebook Feed Dialog URL Picture Param is not overwriting og:image

I want to share an infographic featured in an article, but the &picture= param in a facebook share url is being ignored and instead the image in the og:image meta tag is being shown. Need help ensuring that the facebook dialog box honors the picture parameter in the url.
I've tried using the Facebook Sharing Debugger, or a random image from another source but no difference.
My url structure is like the following:
In code:
const example = `https://www.facebook.com/dialog/feed?app_id=1234567890&display=popup&link=${encodeURIComponent(url)}&description=${encodeURIComponent(text)}&picture=https:${encodeURIComponent(img)}`
So I get something like this:
https://www.facebook.com/dialog/feed?app_id=1234567890&display=popup&link=https%3A%2F%2Fwww.example.com%2Farticle%2Fslug&description=Test%20Infographic%20Text%20Click%20the%20link%20to%20read%20more%20info!&picture=https%3A%2F%2Fimages.example.net%2FexampleImage.jpg
I expect that when a user clicks on the Article share button that the image used in the dialog box is the same as in og:image but when I click on the share button on the infographic the image used in the dialog box is the same as in &picture= url param.
Custom pictures are not possible anymore, you can only share with the og:image specified in the source.

Link the like button of my site to the FB like button

I've been trying to make my own social buttons. Everything worked fine for the sharing buttons. However, I can't have a good result with the FB like button. I created a SVG image with the thumbs up and I open a javascript popup window that shows the FB like button. It's not friendly user at all as the person has to click twice to like the content.
I'm trying to figure out a way to make my button likes directly on FB. Do you know if it is possible? I have seen sites that have their own like button like a "heart" button or something like that and once we click it makes also a like on facebook besides the site's like. Does anyone knows how to do it?
For the moment, the code is this one with the SVG image between the tags:
Thanks.

How to know the Id of the facebook like button

I am creating a website that users are supposed to download a video after they like the video using the Facebook like button.That is if someone likes the post on Facebook, instead of them showing the inactive "you like this" button, it shows a download link with the video URL. I have implemented the like button but for the download button not yet. Anyone with an Idea of how I can accomplish this?
Just wrap like button in div element with given id, then you will be able always get like button.

Javascript Grab URL and insert into Pinterest button for Facebook Page Tab App

I am trying to add a Pinterest button onto a product page for a single image in a Facebook Tab app.
The Pinterest code is grabbed from their goodies section, and must include a URL, the Media URL and the Description.
I am not that proficient with Javascript. I am trying to pull the URL and insert into the Javascript button for a single item. Please see below; Thanks.
Pin It
Since you trying to get Pinterest button working in Facebook Page tab this will not work due to inability to know which Page you're on in JavaScript.
This info is passed to server with signed_request. You have couple of options to do so:
Build the link to page that will be linked to "Pin" server-side
Pass information about Page and Page Tab to client side and build the link here.
Beware that this is just a link and it will not looks like Pin-It button until you including Pinterest JavaScript (//assets.pinterest.com/js/pinit.js) on a page. If you build that link in Client Side you must include that JavaScript after, so link will be replaced by iframe with actual Pin-It button.

How to give user trying to copy URL other URL than the A HREF value?

I use skeleton framework to sketch tabs inside IFRAME widget. Each tab has code like this:
<a class="active" href="#skeletonTab0" target="_top">Name of tab</a>
href pointed to #.... is required for the menu to work.
When user right clicks on this tab and selects "copy URL" he gets the URL of the widget host http://dummyhost.com/index.php#skeletonTab0.
But because the widget is embedded on site http://importantnews.com i would like him to copy URL to:
http://importantnews.com/index.php?showTab=0
Is there any way to make it so that a will have href pointed to #skeletonTab0 but when user tries to copy the URL he will get proper URL on important news?
Basically the question is if i can provide user trying to copy URL from a href other href than actual href?
EDIT: Today, i've found a working example of something similar to what i try to obtain, but still figure out how to make this work for me.
Look at this site:
https://plus.google.com/100784670873737717716/posts/PAEa7sFcKMS
When you click "What i learned" it redirects you to http://www.readwriteweb.com.
When you copy the URL of this link you get http://www.readwriteweb.com.
But when you click the link plus.url.google.com* redirecting to http://www.readwriteweb
Have you any ideas?
Not really, no. What you could do is have the link point to http://importantnews.com/index.php?showTab=0 but register an onclick listener so that when the link is clicked, the default action (i.e. going to that link) is cancelled and replaced by your desired action.

Categories