I have SPA that uses hash-tag URLs for identifying content (#/resource/id), I've added like button and it works, but how do I specify thumbnail, description etc?
From what I've read I should use
<meta property="og:image" content="http://www.example.com/site/preview.png"/>
but I have a static page without any back end + I need to change it depending on which content is loaded. What should I do?
UPDATE: I've found answer: Facebook Like Button refresh after AJAX-Load
In order to make your meta tags dynamic you will need to use backend code, such as PHP or ASP.
There really is no other way to make the header of the document dynamic.
PHP example:
<?php
if(isset($_GET['myparam']) && $_GET['myparam']==='big'){
echo '<meta property="og:image" content="http://www.example.com/site/preview_big.png"/>';
}else{
echo '<meta property="og:image" content="http://www.example.com/site/preview_little.png"/>';
}
?>
You're going to have to find a way to pass in a good URL to your image. Facebook takes this tag, goes to your site, and gets your image.
Related
I have a specific page in my application where I want a user to be able to share certain selections they have made on a previous page, selection which I am receiving from my database.
So, for example - I have a user - Barry. I can access his name using ${user}.
He have been asked a question:
What is the first thing that comes to your mind when I ask about ${animals}
The answers they have chosen have been submitted to the DB, and I now want the answers to appear as the sharing description for Facebook. Obviously, the answer for each user will be unique - so I cannot hard code any information in here.
The code I have is the following:
<meta property="og:description" content="${user} thinks:%0A%0A<c:forEach var='animal' items='${animals}' >${animal} - ${animal.thoughts}%0A</c:forEach> />
When I view the source code for the page, I see this:
<meta property="og:description" content="Barry thinks:%0A%0AElephant - Gray%0ABird - Chirpy%0AMonkey - Funny%0ADog - Loyal />
However, when attempting to share the content on Facebook, the description is just empty, as though no description exists.
Unfortunately, this page is only available when the user is logged in, so using the Facebook scraper https://developers.facebook.com/tools/debug/ simply shows me the og data of the logged out landing page.
Am I missing something here?
EDIT
Based on #Cbroe's comments below, I have now adapted the code to be shared on a public page (IE one that you do not need to be logged in to see).
I have also set the description and image location as parameters in the URL - so that anybody who shares this page will see a description and an image relevant to them.
When running the full URL through Facebook scraper, I see the exact results I am after:
However, when actually sharing the link from the application, the dynamic info from the URL is being ignored.
<meta property="og:description" content="${param.description}" />
<meta property="og:image" content="${param.image}" />
My og:url contains the full URL, including the dynamic parameters. If anyone else has any ideas, I would love to hear them.
EDIT 2
Link that helped CBroe debug has been removed due to company policy. Example link provided in my answer.
With massive thanks for #CBroe for baring with me through this process and helping me out in the comments, I have now got a solution to this problem.
Firstly, I created a client facing page that did not require the user to be logged in in order to view. This would act as the page that the dynamic content would be shared from.
The code that I have now looks something like this:
Meta tags
<meta property="og:title" content="My Title" />
<meta property="og:url" content="${pageUrl}" /> // generates FULL URL including all parameters
<meta property="og:description" content="${param.description}" />
<meta property="og:image" content="${param.image}" />
Sharing generator (using jQuery)
var currentLink = encodeURIComponent(window.location.href); // NB to use encodeURIComponent instead of just encodeURI
var tWindow;
$('.facebookShare').on('touchstart click', function(){
tWindow = window.open('about:blank', 'sharer', 'toolbar=0,status=0,width=548,height=325');
tWindow.location.href = 'https://www.facebook.com/dialog/share?app_id=${facebookAppId}&display=popup&href=' + currentLink;
});
The link that was then used to share the page looked something like this:
https://[myURL]?description=My%20favourite%20animals:%20Elephant%20-%20gray%20%7C%20Dog%20-%20Cute%20%7C%20Cat%20-%20Cant%20be%20trusted%20%7C%20Leopard%20-%20Never%20changes%20its%20spots&image=[url_to_my_image]
Using this code, when sharing the page, the correct (and dynamic) image and description were generated each time.
Once again, big ups to #CBroe for helping me get to the bottom of this - and I hope that this can help somebody else in the future.
I am using Wordpress and a strenge thing is happening. I have shared a link earlier which has a different image now after the image changed The facebook is taking the same previous image when it shared. Let me tell you what procedure I have tried
Head Section
<meta property="og:title" content="<?php echo $blogArray['post_heading'];?>" />
<meta property="og:type" content="article" />
<meta property="og:image" content="<?php echo $blogArray['image_url'];?>" />
<meta property="og:url" content="<?php echo site_url().'?page_id=3205&id='.base64_encode($blogArray['ID']);?>" />
<meta property="og:description" content="<?php echo $blogArray['post_sort_details'];?>" />
And HTML
http://www.facebook.com/sharer.php?s=100;&p[title]=<?php echo $blogArray['post_heading'];?>&p[summary]=<?php echo $blogArray['post_sort_details'];?>&p[url]=<?php echo 'http://'.str_replace('http://','',str_replace('www.','',site_url()));?>/?p=<?php echo $blogArray['share_post_id'];?>&p[images][0]=<?php echo $blogArray['image_url'];?>" target="_blank"><img src="<?php bloginfo('template_url');?>/images/fb_static.png" border="0" class="fb" title="Share via Facebook" width="24" height="24" /></a>
But when I am trying from the same site on a beta folder it is coming absolutely fine.
I am attaching screenshots with this.
What I want to share
What is getting shared from the Main Site
What is getting shared from the Beta site and the right one
I have seen once a post is shared on the facebook. Facebook keep the images and text to their cache and even on changing images and the texts, facebook share keeps the previous identity. That is the main thing I am facing and want to solve by reloading Facebook cache with current text and image after share.
林果皞 is right. You may refresh the cache by Debugger tool of Facebook. Just Put the URL on the Debugger tool which you are sharing.
You may also use this script on site as you don't need to go to Debugger tools and refresh the page manually. The following code with automatically refresh Facebook Page.
$.post(
'https://graph.facebook.com',
{
id: '[PAGE_URL]',
scrape: true
},
function(response){
console.log(response);
}
);
I was pulling my hair out trying to fix this issue. Hours and hours of troubleshooting to no avail. After speaking with one of our programmers about a topic unrelated I thought of something to try as a long shot.
Much to my surprise, it worked!!!
This is the reason behind the problem and my solution for it:
When you draft a post in WordPress it generates a link based on your article's title (unless you manually change it). The title of my article included special characters, however the auto-generated link didn't display these special characters, only hyphens to replace the spaces. Should be fine right? Wrong! Somewhere embedded in metadata and code in the WordPress platform are those special characters and they mess up the way Facebook pulls info from the article being linked to. This is a problem because certain special characters invalidate hyperlinks.
For example:
Article Title: R[eloaded]
Auto-generated hyperlink DISPLAYED in WordPress "Permalink" field: http://www.example.com/reloaded
Actual WordPress Auto-generated hyperlink: http://www.example.com/r[eloaded]
Those brackets will invalidate the link and Facebook will be unable to pull any information (ie pictures) from it.
Solution:
(1) Simply, manually change the WordPress hyperlink address to something that doesn't include any special characters (this will not change the title of your article).
(2) Click "Update" to change the post to include the new hyperlink.
(3) Click "Purge from Cache" in the WordPress window
(4) Refresh your Facebook browser window
(5) Paste the new hyperlink for your article
(6) Enjoy your Facebook post with a preview image and information
Sidenote: Don't pull your hair out over Facebook, it's not worth it. =)
I tried a lot to clear the cache programatically. We can clear the cache manually using facebook debugger. But, It worked when we keep any parameter after the url like http://myurl.com/?fbrefresh=xyz. But, clearing the cache manually is not simple thing and we cant do every time.
Finally, It has worked with javascript. This has worked when I put paramter after the url like I mentioned above.
if(window.location.search.indexOf("facebook_refresh") >= 0) {
//Feature check browsers for support
if(document.addEventListener && window.XMLHttpRequest && document.querySelector) {
//DOM is ready
document.addEventListener("DOMContentLoaded", function() {
var httpRequest = new XMLHttpRequest();
httpRequest.open("POST", "https://graph.facebook.com", true);
httpRequest.onreadystatechange = function () {
if (httpRequest.readyState == 4) {
console.log("httpRequest.responseText", httpRequest.responseText);
}
};
//Default URL to send to Facebook
var url = window.location;
//og:url element
var og_url = document.querySelector("meta[property='og:url']");
//Check if og:url element is present on page
if(og_url != null) {
//Get the content attribute value of og:url
var og_url_value = og_url.getAttribute("content");
//If og:url content attribute isn't empty
if(og_url_value != "") {
url = og_url_value;
} else {
console.warn('<meta property="og:url" content=""> is empty. Falling back to window.location');
}
} else {
console.warn('<meta property="og:url" content=""> is missing. Falling back to window.location');
}
//Send AJAX
httpRequest.send("scrape=true&id=" + encodeURIComponent(url));
});
} else {
console.warn("Your browser doesn't support one of the following: document.addEventListener && window.XMLHttpRequest && document.querySelector");
}
}
I am using the code from this page
https://developers.facebook.com/docs/share/
Update
I'm a php programmer but the solution is easy make different unique url addresses for a single page by using Get method look at this
example.com/index.jsp?name=akon&description=new%20song%20from%20Akon
you can set this as share button's url for first song
& second one
example.com/index.jsp?name=usher&description=new%20amazing%20song%20from%20Usher
Then make codes like this (I'm php programer but its easy to know what the code is doing)
<meta property="og:description" content="<?php echo $_GET['description']; //// This code gets information from url and shows them ?>" />
can you explain more ? you want to use some share buttons on a single page for different mp3's with unique urls?
I have two different products "Prod_A" and "Prod_B" on the same page, say
www.xyz.com/index1.html
On this page are two images for these products and small descriptions.
I need two like buttons for both products, both like buttons should refer to the page where they are located ( www.xyz.com/index1.html ), but both buttons should have different og:images and descriptions.
I have found some solutions for multiple buttons, but they refer to different pages and don't have pictures included.
thanks!
PS:
A small working example would be greate
Edit:
#DMCS said (see comment) that this is not possible. would it work, when I create a dummy page for the second product www.xyz.com/index2.html which would redirect to the page www.xyz.com/index1.html?
I this case I would have two pages is it then possible?
Yes this is possible, you need to create as many dummy pages as you have like buttons on your main page. Each of these pages includes all the OG tags you need including descriptions and images. You then use a redirect to take the user back to the page with the buttons.
Use the facebook like button tool to create the buttons using the url of each dummy page. Here's an example dummy page:-
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>This is a dummy page to hold the OG tags</title>
<meta property="og:title" content="This is the text the like button will show in FB when liked"/>
<meta property="og:site_name" content="the site name shown, the from name in FB"/>
<meta property="og:url" content="http://www,yoursite.com/dummp_01.html" />
<meta property="og:image" content="http://www,yoursite.com/dummyimage01.jpg" />
<meta http-equiv="refresh" content="0;url=http://www.redirect_to_url_that_has_all_the_like_buttons.com">
</head><body></body></html>
Could you add some variable to the address, and then do some switching using php?
For example
Like 1 links to: http://xyz.com/index.php?like1=true
Like 2 links to: http://xyz.com/index.php?like2=true
then in php on the index.php page just use an if statement...
<?php if (isset($_GET['like1']) { ?>
[your like 1 og tags here]
<?php } else if (isset($_GET['like2']) { ?>
[your like 2 og tags here]
<?php } ?>
NOTE Of course this solution would work also for other languages besides php
when I create a dummy page for the second product
www.xyz.com/index2.html which would redirect to the page
www.xyz.com/index1.html? I this case I would have two pages is it then
possible?
Yes, this is a good idea. The facebook linter does not run any javascript, so it would pick up the og tags properly. And when a user comes to that page, they will get redirected by javascript and see the page with the two products.
I am trying to post an open graph activity. Actually it's working with a static .html file. But if i point to a url with url params i get an error. The sourcecode on both pages is 100% the same, trust me.
# Dynamic call
/me/somesandbox:drive?car=http://www.domain.com/object/?og:type=somesandbox:car&og:title=Some%20car
# Static call
/me/somesandbox:drive?car=http://www.domain.com/static_car.html
Error:
"Object at URL 'http://www.domain.com/object/?og:type' of type 'website' is invalid because a required property 'og:type' of type 'string' was not provided."
If you look at the error, you ll see, that Facebook didnt get the whole url. The params are missing, right. Please help!
The Open Graph object url you are trying to use is this?
http://www.domain.com/object/?og:type=somesandbox:car&og:title=Some%20car
My guess is, since Facebook is already parsing : colon characters for the action names (i.e. graph.facebook.com/me/recipebox:cook?recipe=), they might not be safe to use as your own parameters.
Also, there might be some confusion: so far as I know, Open Graph properties of objects are not passed in URLs like this og:title=Some%20car. They are actually uncoded in the page the URL points to, via the open graph meta tags: <meta property="og:title" content="Some car" />. So if you trying to set the Object properties with the URL, it won't work.
Don't forget to use the Lint Debug Tool to test out your Open Graph Object URLs!
You probably do know this, though, and are just using the URL's GET parameters to set the meta tags. Something like this?
<meta property="og:title" content="<? echo $_GET['og:title'] ?>" />
If this is the case, just try it without the : colons. There is some debate about whether they are safe in URLs anyway, but if Facebook is also parsing them it'll be safest to just leave them out, like this:
// http://www.domain.com/object/?ogtype=somesandbox:car&ogtitle=Some%20car
<meta property="og:type" content="<? echo $_GET['ogtype'] ?>" />
<meta property="og:title" content="<? echo $_GET['ogtitle'] ?>" />
I have not tested this, just giving some suggestions to try. Good luck!
Facebook has this nice tool to find out what the facebook see: https://developers.facebook.com/tools/debug just put the url, and watch the debug.
Don't forget, these meta tags have to be placed in section.
Got it.
#thaddeusmt: Was already on the right track.
Which it super important - of course it is - you have to encodeURIComponent(yoururl?with=vars)
Solved
If you pass your url like this:
/me/somesandbox:drive?car=http://www.domain.com/object/?og:type=somesandbox:car&og:title=Some%20car
Make sure to encode the object-url. E.g. with Javascript
encodeURIComponent(http://www.domain.com/object/?og:type=somesandbox:car&og:title=Some%20car)