I'm writting a Chrome extension.
The page have two iframes, iframe 2 load a different page some times after clicking on a link in the iframe 1. (Crazy right? tha page is a mess thats why I'm trying to fix it a bit).
I need to detect when this iFrame2 load a different page in order to inject my CSS and JS to this new page.
Any ideas on how I can achieve that?
I tried injecting the CSS and JS in all frames using the manifiest.json
"content_scripts": [
{
"all_frames" : true,
"matches": [
"https://ieweb.wsu.ac.za/*"
],
"css": [
"content/css/content.css",
"content/css/login.css",
"content/css/frame2.css"
],
"js": [
"content/content.js"
]
}
]
But it only insert the files on the top page, not in each individual iframe
Related
Our application lets an admin create a suggested social post for all of the members of his or her organization. The admin will insert a URL in our system and our platform creates a unique URL for each member. This is a link with a 302 redirect to the original link. It works similar to Bit.ly. When the member gets the suggested post he/she can create his/her own content for the post and url and approve for posting via the LinkedIn API. That all works perfectly.
As an example the share url could be https://example.com
Member one gets: https://yip.sh/1234
Member two gets: https://yip.sh/4321
Member three gets: https://yip.sh/4444
The PROBLEM: Some (a minority) of the member's posts do not share the meta image for the url. The majority of the social posts work and show a meta image so that tells me both the 302 redirect and the destination url are working correctly. I also have tried the urls from the post that do not work in the LinkedIn post inspector and the meta image shows up there.
My ASSUMPTION: Sometimes pulling the meta image takes a little longer than LinkedIn wants to wait and since each URL is unique it needs to check each time.
Possible SOLUTION: Automated ping of Linkedin post inspector to cache image before the share. This was what we did with Facebook when we had a similar problem. I have not found a way to do that though with LinkedIn.
Just to show the code we are using to share the post. But as I mentioned above this is working a majority of the time.
pass_the_hash = {
"author": "urn:li:person:#{#social_identity.uid}",
"lifecycleState": "PUBLISHED",
"specificContent": {
"com.linkedin.ugc.ShareContent": {
"shareCommentary": {
"text": "My Comment"
},
"shareMediaCategory": "ARTICLE",
"status" => "READY",
"originalUrl" => "https://yip.sh/1234"
}
},
"visibility": {
"com.linkedin.ugc.MemberNetworkVisibility": "PUBLIC"
}
}
Has anyone seen a similar issue with LinkedIn Share API not showing meta image consistently? Or possibly know of a way to automate usage of the post inspector?
To quote LinkedIn...
After updating your website with perfect preview content and image, if you try sharing your website link you will still see old preview content and image. That's because LinkedIn caches link preview content for 7 days. Source: Official LinkedIn Documentation.
As you and they state, you can use the LinkedIn Post Inspector to refresh the cache. If you wanted to go the approach of pinging/curling LinkedIn, you can do...
https://www.linkedin.com/sharing/share-offsite/?url={yourlURL}
For instance, seems to work for getting info from the LinkedIn share API for GitHub.
Of course, you do also have the less-desirable option of waiting 7 days, although it is nice to know that it eventually works itself out by itself.
In the ugcPosts endpoint of LinkedIn shares API, there are some changes that are causing these issues. You will need to make changes to your code and add extra key for thumbnails like below:
{
"author": "'.$ownerURN.$page_id.'",
"lifecycleState": "PUBLISHED",
"specificContent": {
"com.linkedin.ugc.ShareContent": {
"shareCommentary": {
"text": "'.$text.'"
},
"shareMediaCategory": "ARTICLE",
"media": [
{
"status": "READY",
"description": {
"text": "'.$linkDescription.'"
},
"originalUrl": "'.$href.'",
"title": {
"text": "'.$linkTitle.'"
},
"thumbnails": [{
"url": "'.$imageHref.'"
}]
}
]
}
},
"visibility": {
"com.linkedin.ugc.MemberNetworkVisibility": "PUBLIC"
}
}
I hope this is useful to people who are facing issues with the linkedIn Shares API now. I know this question is old but we faced this issue for a few days and the API documentation is not pointing out the issues.
When using featherlight as a wordpress plugin, how can I change default options without breaking theme, etc.?
I see that the only js loaded on my page is
/wp-content/plugins/wp-featherlight/js/wpFeatherlight.pkgd.min.js?ver=1.3.0
Currently I need to add all these attributes to every link:
data-featherlight="iframe"
data-featherlight-iframe-frameborder="0"
data-featherlight-iframe-allow="autoplay; encrypted-media"
data-featherlight-iframe-allowfullscreen="true"
data-featherlight-iframe-style="position:fixed;background:#000;border:none;top:0;right:0;bottom:0;left:0;width:100%;height:100%;"
...which is a lot of repeated overhead. How can I set these as defaults for all my iframe lightboxes?
You can set defaults globally like this:
$.extend($.featherlight.defaults, {
type: "iframe",
iframeFrameborder: "0",
iframeAllow: "autoplay; encrypted-media",
iframeAllowfullscreen: "true",
iframeStyle: "position:fixed;background:#000;border:none;top:0;right:0;bottom:0;left:0;width:100%;height:100%;",
});
I know, it’s silly, but I really don’t know what to do at this point.
I tried to create a new folder in the frontend and had a structure like this:
themes
test
assets
css
bootstrap.css (i took a css file that contain bootstrap 4.1 and have in it a theme from bootswatch.com)
views
layouts
main.php (i copy it from views folder and added use frontend\themes\test\TestAsset with the change of
AppAsset::register($this); to TestAsset::register($this);)
TestAsset.php (i copied the content from the AppAsset file) In config -> main.php i added
'view' => [
'theme' => [
'pathMap' => [
'#app/views' => '#frontend/themes/test/views'
]
]
]
],
The theme that I wanted from the bootswatch.com was applied (it made some mess in the navbar, img-thumbnail and caption class), but I was thinking I could just edit them to make everything ok. But every change that I tried was not applied, not even the body background-color.
When I needed to add something, I used a class of my own:
$this->registerCssFile(Yii::getAlias(’#web’).’/css/library.css’);
and it worked.
At this point, I don’t know how to edit the css of the yii2 or how to add another one that I could use and personalize.
We are having an issue where our structured data is showing 2 products instead of one on each product page. I located the script adding the extra info - however the script was found on each individual product page and we have loads of products for woo commerce. So like 1000+ pages. Is there a setting inside WordPress to remove this schema code?
I located the schema code searching our site files using Sublime. I could remove it but i feel like that would be the wrong way to do it? Since that same script is located on ALL our product pages. Is it a setting in wordpress? I am kind of lost.
This is the schema script I am trying to remove.
<script type="application/ld+json">
{
"#context": "http://schema.org",
"#type": "Organization",
"name": "vapesocietysupply",
"url": "https://vapesocietysupplies.com",
"logo": "https://cdn.vapesocietysupplies.com/wp-content/uploads/2016/11/vss-logo-sharp.png",
"contactPoint": [
{
"#type": "ContactPoint",
"telephone": "+1-888-978-8507",
"contactType": "customer service"
}
]
}
</script>
Thanks for any help in the right direction!
Structured data analysis: https://search.google.com/structured-data/testing-tool/u/0/#url=https%3A%2F%2Fvapesocietysupplies.com%2Fproducts%2Fglazed-donut-by-loaded-e-liquid-120ml%2F
I'm trying to encode in JSON-LD the semantic information related to a website using Schema.org.
The web site is very basic: it contains the home page, a gallery page with a list of images and the image detail page.
Reading the different examples from the Schema.org website, and having a look also at the "get started" section, it is not so easy to understand which information have to be provided in each page.
To clarify the question, I can provide a snippet of code that I'm trying to create, by deducing the needed information after reading the Schema.org documentation.
Below the list of specific questions:
Does the information provided in the home page need to be repeated in all of the other pages? In this case, how the additional information shall be encoded (how to state that the page is a ImageGallery or ImageObject)?
How to match (in the image detail page) the image with a URI to semantically link the thing in the image to a real world thing (using for example a dbpedia.org/resource/URI)?
Example
HOME PAGE
{ "#context":"http://schema.org",
"#type":"WebSite",
"name":"Site name abc",
"alternateName":"ABC",
"description":"description",
"keywords":"keywords",
"inLanguage":"en",
"url":"http://www.thewebsiteurl.com",
"potentialAction":{
"#type":"SearchAction",
"target":"http://www.thewebsiteurl.com/find/{search_term_string}",
"query-input":"required name=search_term_string"
}
}
GALLERY PAGE
{ "#context":"http://schema.org",
"#type":"ImageGallery",
"description":"description",
"keywords":"keywords",
"associatedMedia":[
{
"#type":"ImageObject",
"contentUrl": "http://...../image1URL.jpg",
},
{
"#type":"ImageObject",
"contentUrl": "http://...../image2URL.jpg",
},
.....
]
}
IMAGE DETAIL PAGE
{
"#context": "http://schema.org",
"#type": "ImageObject",
"author":{
"#type": "Person",
"name":"abc"
},
"contentLocation":{
"#type": "Place",
"geo": {
"#type": "GeoCoordinates",
"latitude": "[latitude]",
"longitude": "[longitude]"
},
"name": "Place name"
},
"copyrightHolder":{
"#type": "Organization",
"email": "info#example.mail",
"url" : "http://www.thewebsiteurl.com"
},
"contentUrl": "http://...../image1URL.jpg",
"datePublished": "[date]",
"description": "description",
"keywords":"keywords",
"name": "Image name",
"exifData":[
{
"#type": "PropertyValue",
"name": "Exposure Time",
"value": "1/10 sec."
},
.....
]
}
Does the information provided in the home page need to be repeated in all of the other pages?
With the syntaxes Microdata and RDFa, you would typically mark up what is available on a page. While the syntax JSON-LD is different from them (because it’s not marking up, i.e., it’s decoupled from the existing markup), there is no reason to handle it differently.
If you have content about a certain image on the homepage, the gallery page, and the detail page, you may (and, in my opinion, should) provide structured data about it on each of these pages.
One reason for this is that consumers don’t necessarily parse your whole site:
A consumer might find a single page, look for structured data, and is gone again without looking for another page of your website.
A consumer might find a single page, look for structured data, is interested in more data and follows links specified in your structured data (e.g., URIs given as property values).
So ideally provide structured data (or reference structured data which is provided elsewhere on your site) wherever it’s relevant.
In this case, how the additional information shall be encoded (how to state that the page is a ImageGallery or ImageObject)?
It can make sense to differentiate between the type for the document (in the case of web page, WebPage or one of its subtypes) and the type(s) for the thing(s) described in this document.
So ImageGallery (which is a subtype of WebPage) represents the page, and ImageObject represents an image that could be part of this page.
If possible (but it often isn’t), you should provide properties that put all provided nodes in relation. For example with hasPart/isPartOf, mainEntity/mainEntityOfPage, or of course properties like author etc.
How to match (in the image detail page) the image with a URI to semantically link the thing in the image to a real world thing (using for example a dbpedia.org/resource/URI)?
Schema.org’s sameAs property could be used for this purpose. But you could of course also use properties from other vocabularies, like owl:sameAs.