We have an angularJS ecommerce website with a Facebook pixel installed - we would like to create a Facebook Product Catalogue using the Facebook pixel as a data source.
According to Facebook we need to add the required metadata tags to each product page we want to add to the catalogue.
Sound simple enough but our website is a single page application so viewing a product goes like this...
User clicks on product link
Application switches to 'Product Page' state and renders a 'loading' html template
An api call is made to get the products details
The api call completes and we update the template html with the product details(and required metadata tags) and remove the 'loading' element
So my question is, will the Facebook pixel be smart enough to detect the metadata tags once they are added to the page in step 4?
Or will the pixel see the page as it initally loads(with no product data and a 'loading' div)?
I have contacted facebook support regarding this but they actually directed me here!
Thanks
Related
I have a site developed in wordpress. There is a product category and there are posts assigned to it, now when a product is clicked, a fancybox opens up. I am trying to have facebook like for the products inside the fancybox using addthis. Now the problem is, when a product is liked a random image is shown instead of the product image. After much research found that I need to set up the facebook meta on the fly, but I am unable to figure out a way to achieve this task. As the page is not reloaded how can I set up the meta tags having the respective images for the products?
The site url is http://havmor.com/products/
Regards,
Joel James
I have an app app1 which defines a custom Facebook action act1.
When a user performs this action to an entity (ntt1) in my app, I post to API /me/app1:act1 with URL to ntt1 as its param, so that a post is generated on user's wall saying User act1'ed ntt1 where ntt1 is a link to ntt1's view page (with open graph meta data on its header).
Users can comment or like on this wall post regularly.
Now I want to show users' comments on ntt1's web page as well to share the comments and likes between the Facebook wall and ntt1's view page.
I tried using the Comments social plug-in, but don't know what to put in the data-href to point to the action_instance_id of the wall post.
I know I can simulate a comments box on my page using the graph API (and I've already done so), but this is not making a good ux, because the users need to authorize to my application to view this page (so that the java script API can fetch the comments from the Facebook).
Have you tried just pointing the data-href attribute to
https://www.facebook.com/{user_name_or_id}/activity/{action-instance-id}
…? The docs for using actions say this is the URL you can use to “preview” the news feed story that this published action will generate (or rather has already generated, because without publishing the action first, you would not have an action-instance-id).
If you click on the “x minutes/hours/… ago” link for the feed story for one of your published actions, it should take you to a link that’s build using the same scheme.
I have a Facebook feed that takes me to a landing page when I click on it. I want to be able to add Facebook's like plugin onto that landing page in order to like the feed I came from. This would be the equivalent of clicking like from the feed post itself. I don't know what to use for the data-href property in order to connect the like button to the feed.
I know the feed id and access_token and have tried the following:
https://graph.facebook.com/1608072154_362229823788663&access_token=...
http://www.facebook.com/1608072154/posts/362229823788663
So far I've only been able to like link urls and not the actual feed post.
Is what I'm trying to do even possible? and if so, how do I get the url?
Is what I'm trying to do even possible?
Yes it is possible, but not with the like plugin. I have a production app that pulls in a person's feed from multiple social networks including Facebook. I display a gray star for unliked content and a gold star for liked items. When the user clicks the gray star for a facebook item, I send an HTTP Post to the Graph API with /post_id/likes which likes it. If they click the gold star, then I send an HTTP DELETE to the /post_id/likes which removes it. See: https://developers.facebook.com/docs/reference/api/post/ and the "likes" create/delete section near the bottom.
1) Paper.li enables people to publish online newspapers from their favorite social media. An example is here : http://paper.li/tag/socialmedia. All the pages are provided in six languages (English, German, French, Spanish, Portuguese, Japanese).
2) For each of these pages, we are inserting OpenGraph meta information in the source of the page as described in Facebook documentation (https://developers.facebook.com/docs/opengraphprotocol/). We insert the following metas :
a. og:title : The paper title inserted by the user on our service.
b. og:description : A standard description for all pages on our service.
c. og:type : We do not used a standard type provided by Facebook here and we know that the page is classified in “Others” by providing the following value “paper_li:newspaper”.
d. og:url : This is the paper URL.
e. og:image : This is the image of the first article shown in the page to the user. (this is the most relevant content for this page).
f. og:site_name : This is top domain of the app, we mean here “paper.li”
g. fb:app_id : This is the Facebook Application Id we use for our service (providing a Facebook Tab App and login on our service too). This app can be accessed through the following URL on Facebook : http://www.facebook.com/362293833600.
h. og:locale : It defines the current language used by the user on our service
i. og:locale:alternate : It defines all the five other languages we support on our service
This meta information is working really well when using the send button or the like button with social plugins.
3) Our service provides papers who are updated every 24 hours on the same URL (each daily edition is served on one unique URL corresponding to the paper). By this, it means that “og:image” can change (that’s 99.9% of cases) daily, because first article fetched on the web will change daily and image too (corresponding to point 2.e). Paper title (indicated in OpenGraph meta by the point 2.a) can be changed by the user at any time too. In this example, the title is in Japanese in the Graph, for example, with always the same avatar picture in the wall posts.
4) As it’s suggested in your documentation, we want to use the publishing functionality from Facebook linked with the “Like” button. By this, it means that every time a paper is updated on our service, our service is publishing automatically a status to the page corresponding on the Graph on Facebook with the daily headlines (article title, description and image) through the GraphAPI. By doing this, every user having liked the page with the “Like” button will get the status in his news feed if Facebook decides to show it. That’s the purpose of the “Like” button and it’s working really well.
The problem is the following: when we access each of these pages liked on Facebook as an administrator (with application authentication token), we can publish statuses (what we are already doing), but they are published with a page avatar corresponding to the first “og:image” meta that was fetched by Facebook at the first “Like” of this page. It means users are seeing an image for this page that is not corresponding to the content (statuses) published by the page. Same problem appears with the title (if a user is changing it on our side, it can’t be updated on Facebook).
We find it very strange as for standard pages (created by “Create a page” button on Facebook), an access to “Profile picture” and page settings is provided as we don’t have it for pages created through the “Like” button plugin placed on our website (even if we are admin of the page through the app_id). The only way for us to change it for future pages is to change “og:image” meta information but it means that no more relevant image will be shared with corresponding URL (when sharing it in a status at a specific time, for example).
In conclusion, our question is the following: Is it possible to change avatar image and settings (title, ..) on Facebook (through Graph API) of a page created (in the Graph) through the “Like” button plugin? What would be the impact of this action?
In conclusion, our question is the following: Is it possible to change
avatar image and settings (title, ..) on Facebook (through Graph API)
of a page created (in the Graph) through the “Like” button plugin?
No, pages cannot be created via the Like plugin. But if you're referring to a feed post being created, then still no because your app did not insert it.
What would be the impact of this action?
If any authenticated app can change people's posts, regardless of which app created the posting, to their feed, then it might lead to abuse of the system.
I'm using the Shopp e-commerce plugin for Wordpress. I added the Open Graph Helper plugin to help automatically generate FB like buttons on each of the individual product pages that passes the product info to FB rather than generic site info (since the product page is a template).
When I click like I get an error saying that "The page failed to provide a valid list of administrators. It needs to specify the administrators using either a "fb:app_id" meta tag, or using a "fb:admins" meta tag to specify a comma-delimited list of Facebook users." even though I've added my admin ID. Page content doesn't populate the comment box, but it does post to the user's FB page correctly.
You can view an example here: http://kranedesign.com/shop/emory-in-dark-olive-with-shearling-lined-hood/
I'm not sure what the problem is but when I was creating like button generating code for this site Sunwise Sunglasses I found that the order of the the OG tags mattered, and that the Facebook Debugger page was excellent and found any problems: http://developers.facebook.com/tools/debug
There is a free plugin you can use for Shopp and Facebook like.