I have a webapp with a bunch of photos. If you go to the base url of the app (say /photos) you see a list of all photos, if you go the url with a specific photo id in the query (/photos?id=34343) the app will show a view of that specific photo.
For each photo it is possible to tweet from within the webapp with the specific url for that photo in the tweet. So whoever reads the tweet can click the link and get to that photo. This works just fine.
But now I would like to add the photo itself to the tweet, and this I do not know how to do. I have read up on Twitter Cards which seems the way to do it (as a Summary Card with Large Image in my case) but afaiu the way cards work is to specify one card for each web page, e.g.
<meta name="twitter:card" content="summary"/> etc...
Since I do not have one web page per photo but only a single index page for the entire web app is it still possible to use Twitter Cards for the use case I describe? Or some other Twitter API achieving what I want?
Or am I stuck with text-only tweets here??
Thanks!
Related
How do you get a div that is populated with a live screen image of an external website without using iFrames? e.g. www.google.com
I want to produce a portfolio website, I have a number of sites that are regularly updated. What I want to do is have javascript open on page load, I want it to find a specific external site (e.g. www.google.com) and then take a screenshot. Then I want it to display the screenshot on my portfolio page. Or show a live view of the website inside a div. I dont want to use iFrames as I feel it just looks out of place. I don't need the JS to save the screenshot, just to display it.
Here is my requirement,
I have a website, which integrates with facebook.
Here I am fetching latest post (description and image) from company facebook page. I have added like, comment and share buttons.
I am using Grapth API calls to fetch the latest posts. Everything(calls) using javascript.
My Question, When a user clicks on Share button, share UI popup comes up with text field and image. But I want to share the description which has been retrieved earlier.
Is there any way to share description and image?
Thanks In Advance.
Khader.
When you post a link on Facebook, it grabs an image from that page as a preview.
I'd like to be able to do the same! We're creating a link sharing website with Meteor, and want the user to be able to paste a link, and the image be rendered in the list.
Any ideas? Doesn't need to be Meteor specific at this stage!
To add an image when someone clicks on share/like etc, you can set the image for that page with
<meta property="og:image" content="http://yourdomain.com/link/to/image" />
When somebody shares it, it will use that image. You can also set titles and more:
https://developers.facebook.com/docs/opengraph/using-objects#selfhosted-creating
As indicated by Sarath in his comment you have to scrape the webpage and look for the information you need (title, META desc, an image) by using a regex for example.
I would suggest to look for META OG tags already used by many websites or, if not available, Schema.org micro data.
I think that some tools like PhantomJS could be helpful as it allows you to get the content of a webpage and even generate screen capture of this page.
Our client has two websites and they share one common section, he wants us to pick data on the fly from one website and display it as it is in the other website, excluding the header and footer. I tried using an iframe but the page contains Flash and it does not show the Flash content in the child website. Using an iframe I was able to show the entire website (Flash didn't load) but I don't want the header and footer.
Any help would be appreciated.
Note : We don't have database or code access to the parent web site from where we are picking the data.
didn't quite understand your Note..
Considering you can add some code to both sites and you want to show only part of the site -
assume you have siteA and siteB here is a simple solution:
siteA can open an iframe that hosts siteB with a url param like ?sendSiteA=true
in the js of siteB, when parsing this param you will have a function that will grab section that you want to show, append it to the body and hide everything else.
this is not the best way to share data, but it will work.
P.S. you can pass the dimensions of the iframe in another url param and adjust the dimentions of rht section in siteB
I create a photo gallery like picasa or facebook have and already have done a server part. Now faced with an issue about displaying it. In other words, there's a page contains some small pictures (in fact, thumbnails). I'd like a "windows" contains a big picture to appear by clicking a picture instead of redirecting to other page.
For example. like here
So please recommend me something or give me an example of how to make it.
There are a lot of image galleries online. Here is example of one. Click on each of the rounded buttons (1-5) to see demos.