Issue:
When a user shares a webpage from a mobile browser's share menu to WeChat, a thumbnail image is rendered with that link as intended (the open graph image is populated). If the user opens that link, the WeChat's in-app browser is opened. Now, when user clicks to share that link from within the in-app browser, the thumbnail is no longer there (empty thumbnail link is displayed).
Question:
What is different about WeChat's in-app browser that makes it so the open graph image is not captured in the thumbnail like it is when shared via a normal browser (Chrome, Firefox, Safari).
Thank you in advance.
WeChat Provides a JSSDK, with the Share API in it you can specify the title, link, thumbnail, desc, etc of share behavior of current open page inside in-WeChat-browser.
For Example, I have a Page, title: A, link: www.a.com:
Without API, the share behavior is normal with title: A, link: www.a.com, thumbnail will be the first image in the webpage, and WeChat will grab some text for description.
With the API setup (code blow), the share behavior can be totally different: title: b, link: www.b.com, image: b.jpg, etc.
wx.onMenuShareTimeline({
title: 'b',
link: 'www.b.com',
imgUrl: 'image/to/b.jpg'
});
Related
For access web apps launched into a SharePoint site, clicking on "details" provides a page which has the following chart:
When I check the source of that "image", The link looks like this:
https://MYCOMPANY.sharepoint.com/THISPROJECTPATH/_layouts/15/AppMonitoringChart.aspx?Launches=Days&Data=0|0|0|0|0|0|0|2|1|0|0|0|4|0|0|0|0|0|0|0|0|1|1|0|0|0|2|0
in other words, it's passing the data to the chart in the link itself. I want a way to capture the link to this image (without visiting the page manually/authenticating), which would allow me to track signin status for many projects. This, however is impossible if the image itself doesn't have a fixed path... does anyone have any ideas? Or a way to harvest the data that is fed into the chart programmaticaly?
We are using the G+ Pages API to post into a G+ Page. When creating a post, we enable link attachment with customization of the link thumbnail image.
Sometimes, the API ignores the image url with give it and selects another image (without returning any error message). I'm trying to understand why but I couldn't find any documentation that can provide an explanation.
Here is an example:
This is the url we are attaching to the post: https://business.yell.com/knowledge/attract-right-social-media-audience-increase-followers/
This is the body of the request:
{
"access":{
"items":[
{
"type":"public"
}
]
},
"object":{
"attachments":[
{
"image":{
"url":"https:\/\/business.yell.com\/knowledge\/wp-content\/uploads\/2015\/01\/how-to-attract-the-right-social-media-audience-and-increase-followers.png"
},
"objectType":"article",
"url":"https:\/\/business.yell.com\/knowledge\/attract-right-social-media-audience-increase-followers\/"
}
],
"originalContent":"content text"
}
}
The image url is from a meta tag (og:image) in the article source, but the API ignores the url and uses a different image from the page.
Any idea what am I doing wrong?
Thanks!
OK, so I used facebook open graph object debugger on the url (https://developers.facebook.com/tools/debug/) and found that
og:image was not defined, could not be downloaded or was not big enough. Please define a chosen image using the og:image metatag, and use an image that's at least 200x200px and is accessible from Facebook. Image 'https://business.yell.com/knowledge/wp-content/uploads/2014/12/Anna-Bravington_avatar_1418999410.jpg' will be used instead.
If I send a different thumbnail image to FB it uses it but G+ for some reason (which I don't know what it is yet) ignores it.
Based on GooglePage api docs, there are 2 ways to posting an article with an image:
Article with an image from Google+ photos : Upload your image to Google+ photos. The image can be any public image from Google+ photos belonging to your Google+ Pages account — the image does not have to be from your target article page. You specify your post (Article) with the image's url using the direct URL returned by the Media.insert method. (Do not specify a private image as its rendering is undefined.)
Create an activity with a URL in the attachments array, and POST it with the preview argument set to true. (Example: $plus->activities->insert($remote_id , $activityObj, array("preview"=>true) ) ). This POST will return a preview rendering of your activity, with a list of thumbnail images for you to select from.
This is mean that the object.attachments.image.url have to be either a google+ photo url or a thumbnail image returned from object.attachments.previewThumbnails
I am using objectProperties for image to be visible in yammer feed of page. But it is not showing in yammer site feed page. Image url I am specifiying from SharePoint site collection image library(https://XX.sharepoint.com/SiteCollectionImages/PR.gif). However it is working fine if I give some internet accessed image (e.g. www.google.com/images/123.gif).
Also If I click on “goto page” link in that feed there same image is visible. Please note I am already logged in to SharePoint site with another tab.
objectProperties: {
type: "page",
title: pageTitle,
url: pageUrl,
image: "https://XX.sharepoint.com/SiteCollectionImages/PR.gif"
}
#Yammer-team: I think embed.ly is interrupting in home page feed. can you please check and confirm. Thanks.
I got the answer from Yammer documentation that currently yammer is supporting image url only accessible from publicly accessible content. https://developer.yammer.com/opengraph/#og-schema
one more comment from Myo Thein that - "We use embed.ly and hence it needs to be available on the internet."
I'm running a Vanilla Forum with a FileUpload plugin, allowing users to upload images and insert the corresponding code directly into the body of their post. These images work with FancyBox when clicked, linking together nicely within the page. However, should a user use a third-party image hosting site (i.e. Imagevenue, Imageshack, Postimage.org) and copy and paste the resulting image code, it deactivates the FancyBox feature associated with all images previously on the page, so when you click on an image uploaded via FileUpload it opens in a new window now instead of in a FancyBox.
My question is one of two things:
a) Is it possible to fix this formatting issue so that if a user does choose to use a third-party image hosting service then it will not affect the fancybox of my previous images.
or
b) Is it possible to block this type of image code from being inputted in the body of a post to prevent this from ever happening.
Thank you and please reply if you would like more information!
Most likely the generated code from those third-party hosting sites has not an image extension (JPG, PNG, GIF) so fancybox doesn't know what type of content needs to handle.
If you are binding fancybox like
$(".fancybox").fancybox();
... you could force the type of content to image like
$(".fancybox").fancybox({
type : "image"
});
I don't really see how pasting the code of a new image will disable the code for existing ones if you want to elaborate.
I have a web app in an iframe (Facebook Tab App) on a web page (Facebook).
The web app plays audio and when the user navigates away, usually by clicking on another Facebook link, the page loads another Facebook page and the audio stops.
This works on all browsers except Internet Explorer (IE9). Audio continues to play when I navigate to another Facebook page.
Facebook seems to use the approach where many of their pages are displayed (using hashbang #! approach) without standard page reloading. For me: this means the web app's audio continues to play (the iframe is somehow orphaned?).
The audio stops playing when you navigate to another site that doesn't use the #! URL syntax and the browser properly reloads those pages.
What can I do to ensure the audio stops in my web app (Facebook Tab App) when I navigate to another Facebook page? I'm looking at how to:
Detect an appropriate event in the parent
Explicitly turn off the audio in my web app
I managed to resolve this by hooking onto the unload event on the window, like
$(window).unload(function() {
var a = $("#audio");
a.get(0).pause();
});