I am implementing a facebook share button in an angularjs app and after doing all the necessary stuff to get my meta tags updated and read by Facebook's crawler, I am seeing a mismatch between Facebook's debugger tool and what the share dialog shows.
If I run the debugger on my link, I get a successful scrape that pulls all of the meta tag content and shows what the share dialog should look like. Then if I click on the preview to see that actual share dialog, I get a different result as if it is not reading the meta tag content. The same goes for the share button on my actual website.
Any thoughts?
This might be an issue with protocol inconsistancy. Check you're not using http:// on the debugger, vs https:// on the actual site, and vice versa. Ensure all of your og tags have the correct protocol set, and that the protocol is not omitted.
Facebook provides a javascript SDK where you can specify what data you want to be in your popup. If you want complete control over the dialog then it would probably be best to use FB.ui to do so.
Related
I've successfully added a Share button to my website using the following code:
https://developers.facebook.com/docs/plugins/share-button
It produces a popup with a link to the og:url along with the title of the linked page and a picture from it, which I can then post, and it shows up on my Facebook.
I am having 3 issues with this:
I've update the og:url and data-href after page load, using jquery, but the new values get ignored when I Share.
the og:title, og:description, and og:image don't appear to be used at all.
Sometimes I'd like to Share some custom text (and images if possible) without any url.
I'm aware that Facebook provide other tools/APIs that provide more versatility but it seems that would mean my site would have to go through a review process, and I'd have to code for security. This is not an option and I want to stick to the popup method.
Hope someone can help. Many thanks.
If the tags do not change when posting, refresh (and test) the tags in the debugger: https://developers.facebook.com/tools/debug/sharing/
Dynamically created Open Graph tags (with JavaScript) will be ignored, the tags have to be in the original page source.
The original method for sharing links with a custom image, text and link appears to have been stripped from Facebook. I for one would love to see them bring this back.
Here is my situtation. I have a Facebook tab that loads a page that is hosted under my hosteddomains.com. I setup a Facebook app to work with my Facebook tab. When I try to use the new "Share Dialog" if the link I want to share is not the same as the app domains then i get an error and I can't share the link. Am I doing something wrong or is this what they intended to do?
IF that's what they intended to do then there is no way that this will replace what sharer.php could do. I could be on any site and share any link with an image to Facebook and have it posted to my wall.
The question is if i am on facebook tab and i want to share a link (I want a dialog box with a custom photo, title, link, and summary) and allow my users to post this custom message to there Facebook status.
Maybe i am confused about how to accomplish this, but so far i am not having much luck.
I miss the good ole days when i could just construct a URL and that would give me the ability to share what i want to share. Twitter and Pinterest have these methods.
Here are some code examples of things that I've tried that did not work:
Option #1:
The url in this option goes to page that I created on hosteddomains.com that has the Open Graph Meta Tags in it. My idea was to share these pages from my server that will direct them back to my Facebook tab. The result I was getting from this method was seeing the title of the tab from my FB page and description. The reason turned out to be that if i set the og:url to my Facebook tab page, that's the page that would get scraped. That's not what i was expecting from this method. I thought it would take the meta tags from the page i shared and the url with it. Not take all of the info from url and ignore the meta tags.
<a href="https://www.facebook.com/sharer/sharer.php?u=[URL]"
target="_parent">SHARE ON FB</a></p>
Option #2:
Tried using Facebook Share Dialog. I had an interesting time with this one. I setup a new Facebook app. I tried the Facebook tab as the URL and also my custom url to the page that has custom open graph meta tags. The facebook app has two App Domains - hosteddomain.com and websiteA.com. I also created a Page Tab section. The page tab section loads the HTML page that was loaded in the tab we made for our facebook page. Issue with this method is I don't get a custom open graph options set from my php page. I'm picking up information from the facebook tab again. At least now the dialog box shows the name of the new app. I am limited in what i can share using this method. The url i share has to belong to the App Domains. In order to have multiple app domains, I had to make that Page Tab section and then add the second url to the App Domains field, otherwise i got a warning.
<a href="https://www.facebook.com/dialog/share?app_id=[appID]&display=popup&href=[url]
&redirect_uri=[url]&ref=s" target="_blank">SHARE THIS</a>
Option #3
The last thing I tried was the fb-share-button using the Javascript SDK. I get the same result as option #1. I don't think there is much difference between these two. Option 3 here is a bit easier to deal with and cleaner code. In this example, the url is to my custom page on hosteddomains.com that has my custom open graph meta tags. That doesnt seem to matter though. It still pulls the info from the og:url meta tag. I tried removing the og:url meta tag. I get the same result. Is it the Page Tab info interfering?
<div class="fb-share-button" data-href="[url]"></div>
I need some information, why like box frame not working: 'Could not retrieve the specified page. Please verify correct href was passed in.'. I`m testing this href in http://developers.facebook.com/tools/debug - it says correct answer, but frame not working.
In access logs for UA facebookexternalhit/1.1 always answer status 200 (and 301/302 for specific page).
example page: http://www.now.ru/item/series/comedy/Univer_222394
additional information: on some pages frame works, and some does not work
thanks.
The Facebook Like Box is really designed to use the URL for a Facebook page, not for a general Web Page. It pulls Timeline content from a fan page within Facebook.
It can be used for a Web Page if the page has defined Open Graph Meta Tags and has been Liked at least once. However, there will be no "stream" functionality. The Like-Box for a Web Page would just have functionality similar to the Facepile plugin (except that Facepile just shows you friends, and a Like-Box also shows non-friends.)
Typically, though, you would want to supply the Like-Box with a Facebook Page URL in the following format:
http://www.facebook.com/pages/Facebook-Page-Name/Facebook-Page-ID
Perhaps you are intending to use a Like Button or Facepile Social Plugin instead? Either of those can accept any URL as input.
I´ve inserted a FACEBOOK like button succesfully, except that the meta tag 'og:site_name' is not working...:
On my facebook page, it shows the name of the main domain (http://www.domain.com) and not the content of the meta tag 'og:site_name' (FAN CLUB)
I've research everything there is to research without success... Something so simple(?) Am i missing something?
Thanks!
Feeding your URL through the Facebook Debugger should clear Facebook's caching of your URL and refresh any changes you have made. Try passing your URL to the debugger and it should be refreshed to the correct value.
The debugger will also direct you to any other problems you may have with regard to integrating your URL into the Open Graph Protocol...
I have read a guide for publish link to my wall or my fan page. Here is the guide: net.tutsplus.com/tutorials/php/wrangling-with-the-facebook-graph-api/
This is my application test:
http://www.onlyimagination.com/mytest/source/
The application works, but i don't want GENERATE the link manually, i want only SHARE.
This is the screenshot of the publish of this app
Instead I would just put the link and my application AUTOMATICALLY extracts all the links like this sharing of information here in this screenshot.
The info presented in the 2nd screenshot is just the info of the picture that facebook has.
In order to tell facebook how to present your links you need to use the Open Graph protocol (you can also use the Open Graph docs).
With this protocol you define properties which facebook knows how to extract, such as title, type, image and more.
This means that the response for every link you want people to share on facebook should contain the og meta tags.
Edit
Sorry, did not think about adding this before:
You can use the Debugger tool to see how facebook "sees" urls.
You see, what happens when a user shares a link is that facebook has a program that send a request for the shared link, it then parses the response and search for specific tags to extract the data which is then presented to the user.
For example, try the Debugger for google.com and see what info was extracted, then try to share it and see that it uses the same info.
Also, at the bottom of the Debugger result, there's a link Scraped URL: See exactly what our scraper sees for your URL if you click that you see the actual response.
Hope this clarifies it.
2nd Edit
I don't know how you publish your posts in your app (next time it could be easier if you just add the code you use), but it doesn't matter how you publish it (js sdk or from the server side) you always have two options:
Post a link that has the og meta tags in it, those will tell facebook how to display the link
Add the link, picture, name, caption and description fields when posting (js sdk for client and graph api for server)