I am trying to share my content on Facebook. Right now I am trying to create url like so.
http://www.facebook.com/sharer.php?s=100&p[url]={{encodeURL data.url}}&p[title]={{data.itemTitle}}
url and title needs to be dynamic and encodeURL is a helper that run encodeURIComponent function on string. Right now, url loads up but title is not being shown.
I think sharer no longer support params as mentioned in following post.
https://developers.facebook.com/x/bugs/357750474364812/
I have gone through og meta tags as mentioned in many threads.
<meta property="og:url" content="myurl"/>
<meta property="og:title" content="my title" />
But in handlebars, I have one default file that have head tag that runs at start of application. And also I need to have dynamic url and title.
Can any body provide me some hints or resources?
Related
We have this web and we added meta tags in different pages using this way .
<Helmet>
<title>THIS IS TITLE</title>
<meta
name="description"
content="THIS IS CONTENT" />
</Helmet>
I see the change in title when i hit the route for this page .I see meta tags in elements but i don't see meta tags of that page in view page source .What's wrong and how can we solve this .As per our seo expert ,it should come in view page source .Note:It is a client side rendered app .
This is because react (and react-helmet) are front-end tools (unless you are doing server side rendering) and the view source browser's feature is showing you the original source downloaded from the server, while the "inspect" action is displaying the actual DOM.
What this means?
Your users will see new meta tags normally, and so Google Bot (as recently started to execute JavaScript) but not other crawling service or search engines.
If you want to target other search engines: do SSR.
I have a Twitter share button on an application I'm building. I am using the Twitter card <meta> tags (documentation) to define the image that shows up on Twitter. The application is dynamic and allows you to share individual 'reports'. When you share an individual report, I have a query parameter ?report=1608 (see example).
The problem: I can only define one Twitter card for the entire site. I would love to dynamically change the card information (title, text, image) for each individual report that is shared.
Can this be done? Any ideas?
I was thinking about just updating the meta tags dynamically with JavaScript, but I don't think this would work as a solution.
No, this is not possible. Twitter's card crawler (Twitterbot) does not support executing Javascript in the page and requires that the meta tags are static. There's no way to do this dynamically.
It is possible, you can dynamically load in the title, text and the image. I tried it and it worked... but it takes a little time to populate on the browser/website, but it works perfectly/instantly on the twitter app... need a workaround for that... Let me know if you find any solution for that. This is how I used it:
<?php
if (isset($_GET['code'])) {
?>
<meta name="twitter:card" content="summary_large_image">
<meta property="og:image" content="https://example.domain/i/<?= $_GET['code'] ?>.png" />
<meta name="twitter:image" content="https://example.domain/i/<?= $_GET['code'] ?>.png">
<meta name="twitter:image:alt" content="image_alt">
<?php
}
?>
I think you can do the SSR. good luck
I have a web page that is dynamically built and am trying to get links that are shared on Google+ to show snippets and look nice, an example snippet for article rendering and documentation can be found here:
https://developers.google.com/+/web/snippet/article-rendering
When I follow the documentation my links do not render with everything I set in google plus, they show up like this:
The head of my page looks like this:
<head>
<div id="replaceGoogle"></div>
</head>
In my javascript I have this to insert the open graph tags once generated:
//replace google
var google = '<meta property="og:type" content="article" /><meta itemprop="og:headline" content="'+ data[0].name+'" /> <meta itemprop="og:description" content="View beer on Beer Portfolio" /> <meta property="og:image" content="'+ data[0].icon +'" />';
$("#replaceGoogle").replaceWith(google);
The data is taken from json read in from an ajax call. Can I not do this dynamically?
I think that question is similar to Generating Open Graph meta tags dynamically. The main reason of your problem is that google+ and facebook will not execute your javascript so none of them will see your dynamic og tags.
Basic solution to this problem is :
create unique url for each dynamic page and save dynamic params for this url into database.
when your user try to share pages with this unique url you will find saved dynamic params
create page with og tags filled with found dynamic params
Use server side scripting (ask for details in the comments)
I am making a "generate your ___ name" generator and am having trouble with the facebook share portion.
Basically the user fills out a form then gets results. My first idea was to have the results in an iframe which would have a unique URL because of the GET parameters, which generated the correct facebook share info. The problem with that was the link shared would go directly to the "results" iframe.
I decided instead to keep it all on one page, and submit the form via POST, reload the page and show the results. If there is no POST data, it shows the default page. My problem now is re-scraping the Facebook data in order to share the correct "generated" image. (Programmatically, not at https://developers.facebook.com/tools/debug/). I found the script below which is supposed to do that, but haven't had any luck.
Does anybody know of an alternative way of doing this that would show the correct "generated" image in facebook but also link back to the original page so that others can then generate their own name?
This is an example here that does it, but I haven't been able to reverse-engineer what they are doing: http://www.zimbio.com/generator/d_rN-Gyttd2/What's+Your+'Game+of+Thrones'+Warrior+Name
<meta property="og:title" content="TITLE"/>
<meta property="og:description" content="DESCRIPTION" />
<meta property="og:url" content="URL" />
<meta property="og:image" content="IMAGE URL"/>
<meta property="fb:app_id" content="FB APP ID" />
<script>
$.post(
'https://graph.facebook.com',
{
id: 'URL HERE',
scrape: true
},
function(response){
console.log(response);
}
);
</script>
In some websites like facebook, when we post some link it show us thumbnails from that website, Like this in Picture below:
How to do that?
you need to fetch that URL and read the meta tags which will give you some information such as title, description etc. If you need to fetch the image weather read the image meta tag (exists if any) or read the first available image from the web page.
It's just a post/comment like any other. Only thing you need is info about that page. You can use curl for example to fetch page's data. Info you are looking for are in head of document in meta tags.
<meta name="og:type" content="website" />
<meta name="og:image" content="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon#2.png?v=fde65a5a78c6"/>
<meta name="og:title" content="Post a link and show thumbails from that link - php" />
<meta name="og:description" content="In some websites like facebook, when we post some link it show us thumbnails from that website, Like this in Picture below: How to do that?" />
Take those info and make your post/comment/whatever.
EDIT:
You don`t even need curl, you can use file_get_contents check out this answer