I have the following problem I can't find a proper solution for and would be very graceful for any advice.
On my website, I provide a sharing option for facebook:
Jetzt teilen
I use open graph to add meta information for the FB crawler
<meta property="og:url" content="http://www.mypage.de" />
<meta property="og:type" content="website" />
<meta property='og:title' content='MyPage'>
<meta property='og:description' content='Viele tolle Sachen'>
<meta property='og:image' content='http://www.mypage.de/image.jpg'>
This works fine so far. The user will see Image, description and Titel.
But as I want to add individual information on each shared link, I need to add a query string that is shared ( ?queryString=qwe123 ). So I change the URL:
Jetzt teilen
But when the user now clicks the link, he wont see the description and image of the page any more (the linking works fine anyway). I cant let FB crawl every possible query-string because each user has an individual one.
Anyone has a good idea?
P.S. I know that share.php is deprecated, but don't know whats the actual way to share without using an App_ID from FB.
P.P.S. I use angular 1.4 if that is of any importance
Related
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/
Facebook development newbie.
I have added the meta tags to the html file which I want to share to Facebook.
like:
<meta property="og:type" content="article"/>
<meta property="og:title" content="title"/>
<meta property="og:description" content="description"/>
<meta property="fb:app_id" content="23232323323232"/>
<meta property="og:image" content="https://fajfladjfaljafl.jpg/>
I want to make the image thumbnail in Facebook profile different for different people. For example, people can do a small test here then share the result to Facebook, the image thumbnail should be the test result of that person. So how can I do this.
Now I am thinking to generate a new webpage within specific meta property for that person every time. But this's so dump!
Can I change <meta property="og:image" content="https://fajfladjfaljafl.jpg/> automatically when people share it to Facebook? or any other ideas?
Thank you very much!!
Hi everyone:
I am doing this via feed dialog. As what #Mosh Feu and #CBroe said, it doesn't make sense to change meta data.
I am using feed share link
https://www.facebook.com/dialog/feed?app_id=APP_ID&link=URL&picture=THUMBNAIL_URL&name=NAME&description=DESCRIPTION&caption=CAPTION&redirect_uri=REDIRECT_URI
to define the parameters every time.
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>
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.
I'm working on a not for profit website, and trying to integrate with facebook. The app seems to work fine, single sign on works fine, even a custom "post to wall" function works fine using the javascript sdk. What does not work, however, is adding a photo to represent the entity, and anything other than default text, when a person clicks on the like button.
What's worse is there is some ghost text that I personally have never actually seen (other than in the text box itself) that finds its way into the dialog box when posting and leaving the text box empty.
The documentation here falls short:
https://developers.facebook.com/docs/reference/plugins/like/
Open Graph API tags also did nothing.
If you "like" the "like button" you'll see that their example does exactly what I'm trying to accomplish. There's a photo and a little description of what the button is. Is it possible to do this on other sites?
I've struggled a lot with this myself, but I found that by putting my page's URL into Facebook's debugger, it made the correct image, text, etc. show up when clicking a share button.
Add these tags in your pages' tags.
<html xmlns:og="http://ogp.me/ns#">
<head>
<meta property="og:title" content="insert your title here"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="http://www.example.com/foo/"/>
<meta property="og:image" content="http://www.example.com/images/example.jpg"/>
<meta property="og:site_name" content="A human-readable name for your site">
<meta property="og:description" content="A one to two sentence description of your page">
</head>
</html>
To turn your web pages into graph objects, you'll need to add Open Graph protocol tags and the Like button to your webpages.
Instructions are here:
http://developers.facebook.com/docs/opengraph/