How to share a link with image on facebook - javascript

I'm trying to make link button that shares the page on facebook, I'm using that url from facebook https://www.facebook.com/sharer/sharer.php?u=. The problem is the page I want to share has a dynamic image, so depending on the parameters in my url the image should be different, for example events.com?id=2, this should bring an image related to event 2 and so on, so I can't put the meta tag on my head. I was trying to add the meta tag after I receive the data from my database using jquery but it doesn't work. any suggestion?

You need to add meta tags to your page. More info in the following documentation

Related

Facebook share link on page

I'm trying to make a share as page(/page-id/feed) of a link with a picture (the link can be associated with any picture).
But the OG tags take over the control of the image, rather the data sent by the api.
I tried to hide the OG tags and the tags (description etc...) that can help Facebook to take the targeted pages information, with a extra URL parameter, but it doesn't work...
I just need to share a link on a page with a picture not defined by the targeted page.
Thanks for reading I hope you have understand, and then you can help me.

Linking to a specific data target on a separate page

I've been searching and searching and for some reason I cannot figure this out as simple as it probably is.
I am trying to link a logo from a list on a home page and connect it to the full details related to it on a separate page. The full details on the separate page are in a carousel being controlled by data targets, How can I link the logo from the home page to the specific data target on the full details page?
The best method would be to add a hash for the anchor tag to your url, and then use javascript to read the hash and then scroll to it! Here's a duplicate question with an answer that successfully accomplishes the effect jQuery scroll to ID from different page
If I understand the question, assuming the logo is displayed in an <img> tag, try wrapping an anchor tag around it with an href like so
<img src"myImg.jpg>

Multiple Facebook/Twitter/LinkedIn share images for different content on single page

Throughout one page I have important content that needs to be shared. When someone decides to share one of these sections I need to grab the custom image and text for that specific piece of content. This content needs to be shareable via Facebook, Twitter and LinkedIn.
However I'm struggling to define this as I usually only do one image per page using meta property in the head of my page.
If the content didnt have an image attached I would normally use a sharer link such as: Facebook Share. However to my knowledge you cannot define an image this way?
I'm pretty sure that I need to customise the meta property og:image to change depending on what piece of content is clicked but I'm not sure? I've seen a few different answers to this question but nothing definitive.
Just to clarify what I'm after I've mocked up a quick example with cats!
Each section would share their defined cat image and heading.
The site is a PHP Wordpress site, but its not the posts. Its just content on a single page.
You can either use a parameter in the URL and switch the og:image parameter serverside depending on the parameter - or you can use the FB.ui Feed Dialog with a custom picture: https://developers.facebook.com/docs/sharing/reference/feed-dialog

When updating a url/html title dynamically, how can I get a facebook like button to register the change? (NOT the href in fb:like)

I have a webapp that changes the url using window.history.pushState() based on the content that is dynamically loaded. I also have a facebook like button on the page that corresponds to the current element/url (also changed dynamically), and I also change the title of the page (document.title).
When I click the button when it's running, the update on facebook says "User likes this link". The link is the correct link going to the right URL, but beneath it is a little message that says
Original Title
Original URL
How can I get the facebook update to instead read:
Updated Title
Updated URL
Best,
Sami
EDIT:
Alternatively, does anybody know how to change the message that the facebook like button posts? If I could create my own message, I could easily fix this.
It looks like this question has been answered before here Update FB:Like URL Dynamically using JavaScript
there are a number of different solutions given
Edit to answer the clarified question:
The problem is recounted here Facebook Share doesn't pick up title / description meta tags that are changed after page load
To summarize: Facebook scrapes and caches your page title and description, the information is not submitted by the client.
One way around this is to have your server parse the hash or query string, as your javascript would, and serve a page with the title you want.

Does facebook graph api needs image url for displaying image?

I have a webpage and a F-Share button. On clicking this button, an image uploaded by the user is posted on facebook. I tried to initially use javascript to set the 'picture' property with image data from fileupload and it didn't work. So, my guess is that, Facebook does'nt save the images to its server but instead fetches them and displays them from the url we provide. Is that the case? If not, please guide me how can I use the image from fileupload in the 'picture' property?
If you mean the thumbnail that is posted on the FB wall when sharing a page, you can control what image is used by defining some META tags. Here are some examples from the docs:
http://developers.facebook.com/docs/share/
Look under "Sharing Rich Media"

Categories

Resources