I've been looking around for a bit but I can't seem to find any information on how to achieve what I want.
Basically I have a page which displays a gif and offers the possibility to share it on facebook. I tried to make this work with the gif file directly but after a lot of trial and a lot of errors I gave up on this idea and instead, decided I might as well make it so the page would appear as a video on facebook since I already have a 15second long video generated from the gif for instagram.
The problem is when I do this I keep ending up with this result
but I'm trying to do an inline video sharing (like youtube does)
I think I need a shockwave player but I have no idea where to begin, my video file being an mp4 and all.
I can't find any information on how to this using heroku + ruby on rails
any links would be appreciated.
here are the metatags I used:
<meta property="og:url" content="url_of_the_page">
<meta property="og:title" content="event_name">
<meta property="og:description" content="event_place_and_time">
<meta property="og:type" content="video.other">
<meta property="og:image" content="secure_url_of_remote_thumbnail">
<meta property="og:video" content="secure_url_of_remote_mp4">
<meta property="og:video:secure_url" content="secure_url_of_remote_mp4">
<meta property="og:video:type" content="video/mp4">
<meta property="og:video:width" content="960">
<meta property="og:video:height" content="1280">
<meta property="og:site_name" content="site_name">
Thanks for any help
Facebook Open Graph Debugger Tool For The Page
Related
Hi Goodies i have an issue in pyscript
issue : when i paste the below pyscript code in my WordPress post as an html and press preview it just simply popups to dawnload the pyodide file instead of showing the hello world message in the code below. Please someone can clear that to me why this is happening.
thanks regards
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
<py-script> print('Now you can!') </py-script>|
</body>
</html>
the output screenshots from the browser where i get this happening.
(1) From WordPress
this is once i write the code in real time wordpress post as an html
this is what i got once i click on preview
(2) Samething is happening in vscode live server instead of the showing the message hello world it just popup my dawnloader idm to dawnload a pyodide file.
this is the code in vscode with the live server
this is what i got once i run with the live server in vscode
i need to run a small python code in my WordPress post when someone visit my website and in that post once he requests some calculation so the python code should be responsible to do some calculations and show that to the user.
any suggestions please
From the logo on the popup messages you're getting in both cases, it looks like this is behavior caused by having [https://www.internetdownloadmanager.com/](Internet Download Manager) (IDM) installed.
When the Pyodide runtime loads, it fetches certain additional files from the web, including pyodide_py.tar (the compressed Python API files the Pyodide Python API, as well as any additional packages specified in <py-config>. If IDM is configured to interrupt fetching these necessary files, Pyodide will fail to load and/or execute.
You may be able to whitelist (allow) IDM to automatically download these files, but that's beyond my knowledge of that particular plugin.
For more discussion, here's a similar issue on the PyScript GitHub.
I am trying to set og:image tag for my website so that users can see the thumbnail image when the website link is shared. Now the thumbnail is working fine facebook, twitter and Linkedin. But when I share the link on WhatsApp it only works for android. In the case of WhatsApp for ios, it tries to load the image but fails and only website description is sent with the website link.
I have already followed all the answers available on this forum.The image I am trying to use for thumbnail is 669 × 378 px and is 89KB in size. There are no errors according to the facebook debugger. My website is in WordPress, so I was using Yoast SEO earlier but to solve this problem I tried by adding meta tags manually as well, but nothing works for WhatsApp for IOS.
These are the metatags found by facebook debugger for my website https://www.indiadappfest.com
These are the raw tags that we found
Meta Tag <meta property="og:locale" content="en_US" />
Meta Tag <meta property="og:type" content="website" />
Meta Tag <meta property="og:title" content="India Dapp Fest 2019 | Asia's top-notch revelation on blockchain based applications" />
Meta Tag <meta property="og:description" content="India Dapp Fest is a top-notch conference focussed on blockchain, enabling conscious decentralization and inturn, ushering in a change to pave the path for future work assemblies" />
Meta Tag <meta property="og:url" content="https://www.indiadappfest.com" />
Meta Tag <meta property="og:site_name" content="India Dapp Fest 2019" />
Meta Tag <meta property="og:image" content="https://www.indiadappfest.com/wp-content/uploads/2019/03/thumbnail-2-low-resolution.jpg" />
Meta Tag <meta property="og:image:secure_url" content="https://www.indiadappfest.com/wp-content/uploads/2019/03/thumbnail-2-low-resolution.jpg" />
Meta Tag <meta property="og:updated_time" content="1553416119" />
Someone, please help me to fix it for ios.
As per the open graph documentation you should use 1:1 i.e square images, apart from that remove the yoast seo plugin and add the meta tags manually (i used a plugin called scripts and styles). This helped me solve the problem for the thumbnail in WhatsApp for ios. You might also want to add another meta tag with a rectangular image as Facebook will skew the 1:1 image when you'll share it on Facebook.
I am trying to share the tweet using twitter share button and using twitter cards for post image with my link and i am using :
<meta property="og:image" content="https://farm6.staticflickr.com/5510/14338202952_93595258ff_z.jpg">
<meta property="og:title" content="SOME TEXT">
<meta property="og:description"SOME DESCRIPTION">
<meta name="twitter:site" content="THIS IS CONTENT">
<meta name="twitter:card" content="photo" />
<meta name="twitter:title" content="TWITTER CONTENT">
<meta name="twitter:description" content="TWITTER DESCRIPTION">
<meta name="twitter:image" content="https://farm6.staticflickr.com/5510/14338202952_93595258ff_z.jpg">
and for share button using this:
<a class="twitter-share-button"href="https://twitter.com/intent/tweet?text=Hello%20world">Tweet</a>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
but this code only sharing text and link on twitter not with image.
can any one tell me whats wrong with my code?
I just solved this issue by changing the tag name:
<meta name="twitter:image:src" content="https://example.com/img/my_image.jpg">
It seems the documentation is showing twitter:image instead of twitter:image:src.
First, try to use complete path from http or https for example: https://webpage.com/my_path_image.jpg
Check directly in the following links:
Twitter: https://cards-dev.twitter.com/validator
Facebook: https://developers.facebook.com/tools/debug/
If you are still pulling your hair out trying to figure out why Twitter card images are not displaying for pages on your site despite having the correct dimensions and meta tags first try hosting the image on an external server i.e. a public Amazon S3 bucket.
For reasons I have yet to discover the Twitter agent / card validator would not return the image from my server (docker containers behind NGINX proxy) even though all other Twitter and OG Graph online testers returned the image correctly.
As soon as I hosted the image elsewhere the cards worked perfectly.
I've had a look at other solutions proposed to other similar questions on StackOverflow and I can't seem to get my favicon to display for my Rails page in Chrome (at least on the desktop, it works for Chrome on my iPad weirdly).
I've tried having it as an .ico, as a .png, and currently have it as a Base64 string as proposed in response to a similar question. All of these work in Firefox, but will not work in Chrome.
The page is deployed using Heroku, and the link href tag is in the head tag.
The page is at https://www.resnate.com.
EDIT: Code:
<head>
<meta property="og:title" content="Resnate: The Music Social Network." />
<meta property="og:description" content="Music, Gigs and Merch." />
<meta property="og:image" content="/assets/previewimg2-c6c3bbb488ce1d2360bb605f93adc8421afe44813c1de1e324aa008858dbba18.png" />
<title>Resnate: Music, Gigs, Merch.</title>
<link rel="stylesheet" media="screen" href="/assets/application.self-a2388fc8a11c59fee992af9cba7099a53de4bd515465610aa19c43a3b90054f6.css?body=1" data-turbolinks-track="true" />
<link href='//fonts.googleapis.com/css?family=Lato:400,900' rel='stylesheet' type='text/css'>
<script src="/assets/jquery.self-c64a74367bda6ef8b860f19e74df08927ca99d2be2ac934e9e92d5fd361e0da4.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/jquery_ujs.self-d602bdfe68ffc63b9f9cc512872aa3cfff046228a0a36e90dd476e8ef54c1b09.js?body=1" data-turbolinks-track="true"></script>
<script src="https://js.pusher.com/2.2/pusher.min.js"></script>
<link href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAABYlAAAWJQFJUiTwAAAACXZwQWcAAAAgAAAAIACH+pydAAAC8klEQVRYw+2XsWscRxSHv5nZ273bVRw43BrLcEIGkwgRY8g/YHDhwq3BpcvgwrhyYRUOuFGVMmXAJJCgQn+Cgw3BRpGNweJUyE5njLGk273bvZt5KeZ0J4WTtCffKY1fuey83zfvzbx5TzXv3JPO1lt0GIIAiulaX8MVBdXZ8wSdrbe0N5qoKEK6vSmre1OVAMlzAAIdhqgoQlermHrsI+DcFEIhoDUI2CzDAToMCRCQbg9Tj7n4y89U6nUIDEpNFkBEoGfpfvzIm1u3sbstEAgGG1UQfH0GjKHd3ERp46knE3TEWWqNhtfYrzn4xzlUFNFubvL6xk10NQKlPjsSIgIiuE7OpZXH1OYa/RR7GwLgxZQ26GqErtVwaYbNczgphAg6itBJ7BX0XmqH/oIRq0ApXJpx9sZ1znx/BZumoPSY4g6TJOw8+4sPK6tgNKNSGoxaq5TCFgUzi99Sv3YV6fVQQXCc5EH9/hrX6fD+tz8wcW3kf0d6FWsB2Fr6kWyjiUmSUuI2TYnn57jw8MHAx2F29Lb6Yc82Nmm9+BsVVrCt9NCDKSKYmQQpugzyfEzqSsXVJDEqrPDV4gIzl7/zVUz/B8IJKopoPX/B7to6pn/wjrPSiXVpRrLwDefu/jDyTOx9e/dome0/n5V1Wx5gb5fAyLyKtR7KjVe8xgPoh10Zc/it0OPVjDEv9+TtC8CXQ1gaQCcx6for/ln+6chClK6/Grx+EwOwaYYUXXbX1vn05GmpUmzTbAIA4huHeL4ByJiPUeOAjxMBKGMAmF26f6LneL+PsQBEBB2GtNZeoqvVz2pIWmsv0WHoW7NyAMq3UknMh5VV3v/6+0RaMtduM6rV3wcgiAjiLK7jhwaMLv2sHs4guHYb18kRZ/uRGEZjCKA1kufUGg0urTyeWlvur/AwncFAQ6C3vUOlXqc215jaYNLb3mG/ZoDys5rNMt7cun1qo5mqBH4wcUWB5DkO/Lh0CrY3nLqiIKjOngf438bzfwFHKVzQwuVyewAAAFl6VFh0U29mdHdhcmUAAHja88xNTE/1TUzPTM5WMNMz0rNQMDDVNzDXNzRSCDQ0U0jLzEm10i8tLtIvzkgsStX3RCjXNdMz0rPQT8lP1s/MS0mt0Msoyc0BAK1OGKx0FS5rAAAAIXpUWHRUaHVtYjo6RG9jdW1lbnQ6OlBhZ2VzAAB42jMEAAAyADIMEuKEAAAAInpUWHRUaHVtYjo6SW1hZ2U6OmhlaWdodAAAeNozNLIwAgACAADOvq1X/gAAACF6VFh0VGh1bWI6OkltYWdlOjpXaWR0aAAAeNozNLIwAQACAgDQ2j98IAAAACJ6VFh0VGh1bWI6Ok1pbWV0eXBlAAB42svMTUxP1S/ISwcAEXsDeF85R+IAAAAgelRYdFRodW1iOjpNVGltZQAAeNozNLY0NjcyNTI3BAALOQIJ9tf2MgAAABl6VFh0VGh1bWI6OlNpemUAAHjaM7LMTgIAAq8BOcs8cVIAAAAcelRYdFRodW1iOjpVUkkAAHjaS8vMSbXS19cHAAyaAmiUQFGqAAAAAElFTkSuQmCC" rel="icon" type="image/x-icon" />
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="nM46FYSVzSqJFGHsAMGU/IrPXSNExiq25L5Q7vJp2ZP+f3uj1u9isqrpgNna/mAl1X0eABdwsP6YYt8qzgDHTA==" />
<!--[if lt IE 9]>
<script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
I know this question is two years old now, but as I have been struggling with this exact problem for 3+ hours surfing the net without finding a solution to my case (I was doing everything people suggested in all its flavors) and I have just suddenly make it work, I think I'm going to post my experience just in case I can save the pain to the next victim.
My setup was exactly the same as OP's: Rails app with a favicon displaying in every single browser but Chrome. I tried to follow #toddmetheny answer without success.
It turns out that as this app I'm working in loads a whole lot of scripts inside <head>, where you place the favicon <link> tags becomes important. I don't really know why this happens (would be much appreciated if someone could either confirm or destroy my theory), but I guess that while Chrome is loading those scripts, as it has not yet found any <link> tag referencing a favicon, it requests the default /favicon.ico. I noticed this while looking at the Network tab: Chrome always requested /favicon.ico while the other browsers requested the one referenced in the <link> tag as expected.
I don't know if this might have been the cause to OP's problem (as I see he loads some scripts too), but the solution was as simple as moving the favicon_link_tag block to the top of <head>, just after <meta> tags.
Hope this helps some desperate folks out there!
Try using the rails helper favicon_link_tag.
Make sure your icon is saved in app/assets/images. Clear your browser cache to ensure you're using the latest.
Please excuse my basic knowledge. I built a site and with a responsive template. it worked fine in my proofing are and on all platforms. When i assigned it to the actual domain which is on forward it does not render in the iphone correctly. It ignores the responsive design aspects.
http://www.fransproof.acaesthetics.co.uk/ here it works fine and responds on the iphone.
http://bibbyengineering.co.uk/ here which is where it needs to be it does not work fine on the iphone.
Can any one help me fix it. I have in the head so it's not this issue.... from reading it is something to do with the forward that is set up on bibbyengineering.co.uk
I just havent a clue how to solve it. I cant move the domain we don't own it. Many thanks
Your forwarder domain does not have a viewport meta tag in its <head>. (See, for instance, w3school's viewport page.)
Initial domain has the tag <meta name="viewport" content="width=device-width" /> but it doesn't help when it's inside an iframe.
Try adding something, say, <meta name="viewport" content="width=device-width, initial-scale=1.0">, so that the headin forwarder domain becomes
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>