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
Related
Hi All I integrated the Reddit sharing in my project.
While going to the Reddit share page image share option shown below is not coming.
I need that option along with other existing option as shown below.
Can anyone give an idea how can I fix this one.
You need to fill out meta tags, compatible with Open Graph Protocol. Read more on their website: http://ogp.me/
Sample code:
<meta property="og:image" content="URL" />
<meta property="og:image:type" content="image/jpeg" />
I'm attempting to set a custom thumbnail for when people share my website on Facebook. I followed this post here: How does Facebook Sharer select Images and other metadata when sharing my URL?
It seems this info may be outdated because I am unable to get it to work. Can anyone advise if there has been a change and how to handle this now?
I currently have this in my head but It is not working:
<head>
<meta property="og:image" content="http://placehold.it/350x150"/>
<meta property="og:image:secure_url" content="https://placehold.it/350x150" />
</head>
Figured it out. Facebook simply had not refreshed my images yet. I found this tool to help with this process:
https://developers.facebook.com/tools/debug/
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)
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
I am trying to create thumbnail images for several HTML pages, so the user can have an idea of what the HTML looks like before they open the link. I have searched online but haven't found anything useful.
Could anyone here provide some tips? Thanks so much!
I specifically want this to happen on the server side so the client is not required to load the page
You might want to check out this url: http://html2canvas.hertzen.com/.
Using this script, you can convert the page into a canvas on the client side.
Then you can use that as your thumbnail.
You have to use Open Graph tags in you header tag:
<html>
<head>
<meta property="og:site_name" content="Your Website Name Here" />
<meta
property="og:title"
content="Yourtitle goes here, about 90 characters in length."
/>
<meta
property="og:description"
content="description of URL that is about 300 characters in length."
/>
<meta property="og:image" content="YOURIMAGEURL.JPG" />
<meta property="og:type" content="blog" />
<meta property="og:url" content="http://yourURL.com/" />
</head>
<body></body>
</html>
http://api.s-shot.ru/?=(your url)
and
https://s.wordpress.com/mshots/v1/(your url)
I hope those Help!
http://phantomJs.org offers a free tool to capture HTML locally from a file (if you enable that via a command line parameter and use the file:// URI scheme) or from a website and render it to an image. That is a very well-established very popular tool It's also used by people who write automated tests. There's a wiki page that covers that tool, and similar ones.
It has a cropping option. You could run the output of that through other image manipulation tools to scale it.
As far as getting intelligent previews/thumbnails like Twitter and Facebook do, that I'm not sure of. I know there is an oEmbed protocol that is popular that Twitter and other sites provide, and ways to extract the metadata whereby you could possibly construct your own small HTML file and then render it to an image.
(Note about phantomJs: If you don't get the image quality you want in the rendered image, try raising the quality setting for the image parameter to 100, as well as increasing the page's zoom factor option. I've found zoom factor of 2 produces profoundly better quality than zoom factor 1 - see the API docs regarding zoom).
I couldn't get phantomjs to work for my site for some reason, and in further searching I stumbled on this technique for using an iframe to simulate a thumbnail. Posting this here in case others find it useful.