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)
Related
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?
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
When I click the share button for one of my wordpress posts, a popup window successfully opens. It displays the correct thumbnail image, and the title and summary text are correct as well.
However, when I actually go and look at the share on facebook, the thumbnail is not correct. For some reason facebook always shows the thumbnail for the first share I ever made for every single share I make.
What's weird is the title and summary are always correct, but I just can't get the thumbnail to work properly.
Here is the code I use for my Facebook share buttons:
<a class="facebook" onclick="return !window.open(this.href, 'Facebook', 'width=640,height=300')" href="http://www.facebook.com/sharer.php?s=100&p[title]=This Is The Title Of My Post&p[summary]=This is the summary of my post.&p[url]=http://www.mywebsite.com/individual-wordpress-post/&p[images[0]=http://www.mywebsite.com/images/this-is-my-thumbnail-image.jpg" target="_blank"><img class="size-full wp-image-96 alignleft" alt="shareonfacebook" src="http://www.mywebsite.com/images/this-is-my-facebook-share-button-image.jpg" /></a>
I put this code together after reading the following answers here.
Any ideas why the title and summary are always correct, but the thumbnail is never right? Remember, when I click the share button, the thumbnail is correct in the popup window but not the same when I go and look at the share on facebook.
Thanks for the help I really appreciate it.
Facebook uses the Open Graph protocol to determine what information is displayed when sharing a web page. The problem is more than likely not with your link but with missing Open Graph tags.
To debug the problem, copy/paste the URL you're testing into the Facebook Open Graph Debugger and press the 'Debug' button. The debugger will display the information Faceebook will use when sharing that specific URL.
As an example, the Open Graph tags for the home page of Stackoverflow are:
<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="Stack Overflow" />
<meta name="og:description" content="Q&A for professional and enthusiast programmers" />
<meta name="og:url" content="http://stackoverflow.com/"/>
The output for the Open Graph debugger is shown below.
To resolve your problem, you can:
Change your Wordpress theme to output the Open Graph tags on each post/page.
Install a plugin to output the Open Graph tags. Facebook have an official plugin or you can use Wordpress for SEO which will output Open Graph tags and also meta-data tags for Twitter.
To solve this problem you need just to edit your theme header.php and set this code below the tag:
<?php
if ( has_post_thumbnail())
{
$fb_image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'full');
}
?>
<meta property="og:image" content="<?php echo $fb_image[0];?>" />
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
Trying to implement the example from here.
Facebook Share passes along the URL of
your page to our servers, which in
turn looks up certain HTML tags within
it. Those tags are used to display a
preview of the page. In order to
provide this preview, we always look
for the title of the page, a summary
of the main content and an image.
http://developers.facebook.com/docs/share
I added the share button to my site as described on the share page linked above.
<a name="fb_share"></a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"
type="text/javascript">
In the header I added the tags it requires to create the preview in the news feed.
(I used the example tags, just to see if it would work.)
<meta property="og:title" content="Smith hails 'unique' Wable legacy" />
<meta property="og:description" content="John Smith claims beautiful football
is the main legacy of Akhil Wable's decade at the club. " />
<meta property="og:image" content="http://www.onjd.com/design05/images/PH2/WableAFC205.jpg" />
</script>
When the shared button is clicked it takes me to small shared window and I hit share.
However, when I navigate to my news feed, no preview of the page shows and none of the header tag information. It just shows:
Greg McNulty http://localhost:2259/iState/Shared.aspx?id=a051fc1b-4f51-485b-a07d-0f378528974e localhost 7 minutes ago · LikeUnlike · Comment · Share
Why isn't the preview working? (I get this same result without the header tags.)
Thank You.
(FYI - I am using the share because it allows for multiple shares of the same page whenever needed, compared to the like that allows it once and then the button physically changes saying the page is already liked.)
You can test how Facebook servers see your webpage by feeding the URL to this service.
http://developers.facebook.com/tools/lint/
In order for OpenGraph to work a facebook server must be able to visit the URL without a session or cookie. This means "localhost" web pages cannot pass open graph data.