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.
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 finally have some time to work on some SEO on my Tumblr blog. On my main page, I have this meta tag
<meta name="description" content="{MetaDescription}" />
Now, when I created my new pages, "About", "Portoflio", etc., I obviously want to create different descriptions for these pages. But the tag above automatically gets added on my new pages. Is there a workaround on this? Or am I not doing it right?
edited: I forgot to mention... What I want in my other pages is NOT to take a snippet of the page content. I have specific shorter descriptions that I want to use. But with the tag above, it always automatically takes the snippet.
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.
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?
Yet another silly facebook "like" button question. We have a main like button for our website, which is basically the like button with text to its right resembling "x,x,x and xx others like this."
What I want is to change the text to "x,x,x and xx others like Example", where Example is the name of the site.
I have included the six Open Graph meta tags, and the like button is generated by the following FBML:
<fb:like href="http://example.com/" layout="standard" show_faces="yes"></fb:like>
What am I missing or doing wrong?
Try adding...
<meta property="og:site_name" content="Your Site" />
...in your head element. :)