When I want to share a URL on Facebook (in red on picture), the name is not the one mentioned in the "application-name" meta tag but the one in package.json
Is there a way to fix this?
!share a URL on Facebook]1
For Facebook and Linkedin when you want to share URL, you have to add the open graph tags to have the right texts and visuals.
<meta property="og:title" content="YOUR SITEWEB NAME" />
<meta property="og:description" content="bla-bla." />
<meta property="og:image" content="<%= require('./imagesBlogs/og_image_200x200.png') %>" />
Hi Im trying to create a splash screen for my Vuetify PWA but its not working. I'm personally using an iPhone XS and its not working for whatever reason.
This tutorial works on my phone and I followed what he did https://medium.com/#applification/progressive-web-app-splash-screens-80340b45d210
However he isn't using vue or Vuetify which could be the difference. I looked at this one as well who is using vue but that method didn't seam to work for me either just adding the splashscreens in the manifest under icons https://medium.com/#eder.ramirez87/modern-pwa-with-vue-cli-3-vuetify-firestore-workbox-part-1-974383be5540
Honestly I didn't read his whole project so maybe he doesn't even have splash screens although the links look to be called splash screen. his repository is https://github.com/Eder87rh/cropchien/blob/master/public/manifest.json
this is my pwa https://rosedronesolutions.com so just to be clear the splash screen is what should be shown when you click on the app and it hasn't loaded your app yet.
I am curious about what the right screen resolutions I should be using both in the splash screen as well as iPhone media size because there is like resolution and logical resolution but whatever I just did what that guy did that worked in his sample https://pwa-splash.now.sh/ but didn't work in mine.
To be honest I should probably know how to share my repository but I don't. Its on code commit but maybe you don't need the whole thing anyway. Here is the stuff I added to my index.html and then added the splashscreens in a folder in public called splashscreens
<link href="splashscreens/iphone5_splash.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" rel="apple-touch-startup-image" />
<link href="splashscreens/iphone6_splash.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" rel="apple-touch-startup-image" />
<link href="splashscreens/iphoneplus_splash.png" media="(device-width: 621px) and (device-height: 1104px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" rel="apple-touch-startup-image" />
<link href="splashscreens/iphonex_splash.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" rel="apple-touch-startup-image" />
<link href="splashscreens/iphonexr_splash.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" rel="apple-touch-startup-image" />
<link href="splashscreens/iphonexsmax_splash.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" rel="apple-touch-startup-image" />
<link href="splashscreens/ipad_splash.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" rel="apple-touch-startup-image" />
<link href="splashscreens/ipadpro1_splash.png" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" rel="apple-touch-startup-image" />
<link href="splashscreens/ipadpro3_splash.png" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" rel="apple-touch-startup-image" />
<link href="splashscreens/ipadpro2_splash.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" rel="apple-touch-startup-image" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-touch-fullscreen" content="yes" />
<meta name="apple-mobile-web-app-title" content="Rose Drone" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
When users share page/url on blogs it shows <p>-*+</p> in description.
I have placed all meta tags required and other sites like facebook are working fine. this problem is only with G+ share.
Meta tags included are as follows
<meta property="og:title" content="My title" />
<meta property="og:image" content="http://mysiteurl.com/blog.jpg" />
<meta property="og:url" content="http://mysiteurl.com/blog" />
<meta property="og:description" content="Content description" />
I want to share a link on google+ which will have embedded video when shared as post
Here are the relevant open graph tags that are being used
<meta property="og:type" content="website" />
<meta property="og:url" content="http://mysiteurl" />
<meta property="og:image" content="http://imageurl" />
<meta property="og:description" content="desc goes here />
<meta property="og:title" content="title goes here" />
<meta property="og:site_name" content="sitename" />
<meta property="og:video" content="https://www.youtube.com/v/XXXXXX" />
<meta property="og:video:width" content="300" />
<meta property="og:video:height" content="200" />
<meta property="og:video:type" content="application/x-shockwave-flash" />'
I am using
<a title="Google plus" href='https://plus.google.com/share?url=http%3A%2F%2Fmysiteurl'><img src='/images/googleshare.png'></a>
for sharing via php.
Google plus is picking everything from open graph except video. Do I need to do something else to share this link with video embedded?
Google+ has a small whitelist of sites they embed video from. You are not on the whitelist so video previews won't work. Google does not have a formal process for getting on the whitelist.
I'm trying to embed flowplayer in my clients vbulletin forum and have succeeded with basic videos in the s3 bucket but am having trouble trying to implement rtmp. I've set up the distribution ok and can stream to a plain html page outside of vbulletin but am hitting a wall trying to write a custom bbcode to embed in posts.
My code for basic embed looks like this in my cusotom bbcode...
<object id="flowplayer" width="624" height="352" data="http://www.MY_DOMAIN.com/forums /flowplayer/flowplayer-3.2.14.swf" type="application/x-shockwave-flash">
<param name="movie" value="http://www.MY_DOMAIN.com/forums/flowplayer/flowplayer-3.2.14.swf" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="quality" value="autohigh" />
<param name="flashvars" value='config={"clip":{"autoPlay":false,"accelerated":true,"url":"{param}"}}' />
</object>
And my working rmtp streaming looks like this...
<HTML>
<HEAD>
<TITLE>
Streaming Video with Flowplayer
</TITLE>
</HEAD>
<BODY>
<H1>HSL501 Observation Video</H1>
<script type="text/javascript" src="http://www.MY_DOMAIN.com/forums/flowplayer/flowplayer-3.2.11.min.js"></script>
<div id="page">
<div id="rtmpPlayer" style="display:block;width:1000px;height:500px;"></div>
<script language="javascript">
// our custom configuration is given in third argument
flowplayer("rtmpPlayer", "http://www.MY_DOMAIN.com/forums/flowplayer/flowplayer-3.2.14.swf",{
plugins: {
rtmp: {
url: 'http://www.MY_DOMAIN.com/forums/flowplayer/flowplayer.rtmp-3.2.11.swf',
netConnectionUrl: 'rtmp://XXXX.cloudfront.net/cfx/st'
}
},
clip: {
url: 'mp4:entries%207.mp4'',
provider: 'rtmp'
}
});
</script>
</div>
</html>
Any help would be much appreciated
Steve
Finally figured it out and hopefully this will help somebody else and save them having to search for hours like I did.
<object width="656" height="420" data="http://www.MY_DOMAIN.com/forums/flowplayer/flowplayer-3.2.14.swf" type="application/x-shockwave-flash">
<param name="movie" value="http://www.MY_DOMAIN.com/forums/flowplayer/flowplayer-3.2.14.swf" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" /><param name="flashvars" value='config={"clip":{"url":"mp4:{param}","bufferLength":1,"provider":"dtfl"},"plugins":{"dtfl":{"url":"http://www.MY_DOMAIN.com/forums/flowplayer/flowplayer.rtmp-3.2.11.swf","netConnectionUrl":"rtmp://XXXXX.cloudfront.net/cfx/st"},"controls":{"backgroundGradient":[0.1,0.3,0,0,0],"bufferGradient":"none","sliderColor":"#272727","backgroundColor":"#000","sliderGradient":"small","buttonOverColor":"#272727","borderRadius":"0px","buttonColor":"#565656","timeColor":"#CCCCCC","progressColor":"#565656","durationColor":"#ffffff","bufferColor":"#CCCCCC","progressGradient":"medium","opacity":1}}}' />
</object>
Steve, in Clip --> url , you are giving My_Domain, whereas it should be URI of your file present in S3. Let me know exactly what is happening when you load the page and play video, as we also faced issues in making it work , but finally did it after few fixes.