So I want users to be able to see my background on my website. Currently my websites width is 925px and when you view the website in a mobile browser (e.g. iPhone, Opera Mini) it is zoomed in on the text and the user can't see the background.
I've tried using the meta viewport tag unsuccessfully. How do I get my website to be zoomed out by default on mobile browsers?
EDIT:
Here is the code I've tried so far:
<meta name = "viewport" content = "width = device-width">
I know this is an old question, but I am answering anyway in case someone else needs the answer.
As of September 2011, Opera Mini is still using version 2.5 of the Presto rendering engine. Viewport isn't available in Opera until Presto 2.7. (Opera Mobile, our smart phone browser does support viewport.)
Try this:
<meta name="viewport" content="initial-scale=0.25">
When you include width=device-width, the browser 'magically'** finds the content area and adjusts it to fill the width of the device. If you want the background to peek through, you'll need to shrink the entire page to fit within the viewport.
Leaving <meta name=viewport> out entirely will also work, but you will typically see less of the background image.
Ideally, however, you should also use media queries to create a site that works at a variety of widths.
** Using heuristics of some kind that a browser developer would be able to explain better than I can.
After much trial and error I got the following to work correctly on iPhone 5.0.1 and Android 2.3.6. The site was designed for a 480 width. Depending on the width of your site you have to play around with the width value for the iPhone.
<meta name="viewport" content="width=520, target-densitydpi=high-dpi" />
<meta http-equiv="Content-Type" content="application/vnd.wap.xhtml+xml; charset=utf-8" />
<meta name="HandheldFriendly" content="true" />
<meta name="apple-mobile-web-app-capable" content="yes" />
I'm surprised meta viewport didn't work for you (on Mobile Safari). Can you post what you used?
UPDATE: This generally works for me... give it a try:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
If that works, you can then start playing with the scale values to let users zoom if they want to, and by how much.
Related
On iphone my website is not displaying properly. The content is cut almost at the end.
I thought
<meta name="viewport" content="width=device-width, initial-scale=1">
is causing the problem, but when I removed it the webiste was no longer mobile friendly.
How to solve this problem?
Example photo - There should be contact details below
On my website, I use JWPlayer to play video content. I would love to embed a player hosted on my website into a Facebook post that plays in the post and not link to another website. When I use JWPlayer's embed wizard on their website, it creates a page on their server with the player and gives some iframe code that I can paste into Facebook. This works completely fine. However, I really need to be able to make an automated process that creates embed pages on my own site independent of JWPlayer's website.
I took the source code and modified it to fit my website, but unfortunately Facebook does not allow it to play inline. It shows the splash image, title, and description but does not have a play button. When I click the image, it takes me to my website rather than playing the video within the post.
When researching the issue on Facebook's dev reference, I saw that you need a secure URL. My website has an SSL certificate. However, it does not have an EV certificate like JWPlayer's website. Could this be the issue? I don't want to spend the money on it unless I know it will work.
Here is my html heading if it helps at all. And I am using JWPlayer 7. Any help will be much appreciated.
<head prefix="og:http://ogp.me/ns#">
<title>HTTP test video</title>
<meta charset="utf-8">
<meta name="robots" content="noindex">
<meta property="og:url" content="https://www.examplewebsite.com/embed/player.html">
<meta property="og:title" content="HTTPS test video">
<meta property="og:image" content="http://www.examplewebsite.com/embed/og_image.jpg">
<meta property="og:description" content="This is a test.">
<meta property="og:type" content="video">
<meta property="og:video:url" content="https://examplewebsite.com/embed/jwplayer.flash.swf">
<meta property="og:video:secure_url" content="https://examplewebsite.com/embed/jwplayer.flash.swf">
<meta property="og:video:type" content="application/x-shockwave-flash">
<meta property="og:video:width" content="480">
<meta property="og:video:height" content="270">
</head>
Alright, I figured out the problem. For some reason, the og:url tag was messing the whole thing up. I removed that tag and everything works fine as far as displaying inline. I do not know why that fixes it, but it works. However, I believe JWPlayer 6 and 7 don't support Facebook embed... But that is a different issue.
Facebook OG Image stuff is a nightmare. How do you tackle keeping images consistently appearing on Facebook right? I am currently struggling to get a default image setup for the forum of a website. The forum is in phpBB. I have added this code to the header.
<meta property="og:image" content="https://fyxtrpg.com/wp-content/gallery/assets/fyxt-rpg-forum-default-facebook-image.jpg" />
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="484">
<meta property="og:image:height" content="252">
The image is set to the exact size it is supposed to be. I even tell Facebook that. But it still chops off both ends.
I also get an error saying it can't download the image or it is too small. it is not to small, exceeding the 200px min. It is also listed IN the debugger and showing that Facebook can indeed download it just fine.
My URL: https://fyxtrpg.com/fyxt-forum/viewtopic.php?f=7&t=128
Facebook Debug Info
Time Scraped 2 seconds ago
Response Code 206
Fetched URL https://fyxtrpg.com/fyxt-forum/viewtopic.php?f=7&t=128
Canonical URL https://fyxtrpg.com/fyxt-forum/index.php
Notice
Warnings That Should Be Fixed
og:image could not be downloaded or is too small 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://fyxtrpg.com/wp-content/gallery/assets/fyxt-rpg-public-beta-logo.jpg' will be used instead.
To find the object, these are the redirects we had to follow
original https://fyxtrpg.com/fyxt-forum/viewtopic.php?f=7&t=128
og:url https://fyxtrpg.com/fyxt-forum/index.php
The following will be treated as a redirect by the crawler:
A HTTP redirect
A <link rel="canonical" href=".." /> tag
A <meta property="og:url" content=".." /> tag
The final URL, which we tried to extract metadata from is highlighted in bold
These are the raw tags that we found
Meta Tag <meta property="og:url" content="https://fyxtrpg.com/fyxt-forum/index.php" />
Meta Tag <meta property="og:title" content="Fyxt RPG Forums" />
Meta Tag <meta property="og:description" content="The free to play Fyxt RPG system offers RPG players a fun, fast, and flexible RPG experience. Play any genre, setting, or character for free with Fyxt RPG!" />
Meta Tag <meta property="og:image" content="https://fyxtrpg.com/wp-content/gallery/assets/fyxt-rpg-forum-default-facebook-image.jpg" />
Meta Tag <meta property="og:image:type" content="image/jpeg" />
Meta Tag <meta property="og:image:width" content="484" />
Meta Tag <meta property="og:image:height" content="252" />
Based on the raw tags, we constructed the following Open Graph properties
og:url https://fyxtrpg.com/fyxt-forum/index.php
og:type website
og:title Fyxt RPG Forums
og:image
og:description The free to play Fyxt RPG system offers RPG players a fun, fast, and flexible RPG experience. Play any genre, setting, or character for free with Fyxt RPG!
og:updated_time 1417807331
As you can see the debugger says it can't find it then shows me all the data it actually DID find.
When I post the image is cropped, but if I delete that and manually upload it fits fine. That is not acceptable, I need know that anyone sharing something from the website is going to have a decent image appear along with it. Not one that is chopped or distorted.
How do I fix this so Facebook sees the image AND displays it correctly, consistently?
Is there a process of method that someone can suggest to insure that all links to the website will be X size photo/thumbnail? It is really frustrating as it seems that sometimes Facebook uses a portrait, other times a landscape, other times a square. I have even noticed it using different methods to post the same picture. This makes it very difficult to make sure the images look good on Facebook.
Thank you for your advice and help!
More info added... I have also sent in numerous Facebook bug reports because this stuff needs to be fixed.
I have also found that Facebook is not being consistent between creating and posting. This includes resolution, ratio, and a couple other things. Here is one mess I found on ONE attempted post.
If anyone has any suggestions I am eager to hear how to actually work WITH Facebook and their API and not against it...
I have been dealing with this over the last few days. It seems that Facebook only takes the OG tags as suggestions. I discovered that if your image is closer to a square, and it finds a large enough image that is closer to it's ideal aspect ratio, then it will use that one.
Also, even though they say the minimum is 600px X 315px, they really do prefer images above 1200px X 630px.
https://developers.facebook.com/docs/sharing/best-practices#images
When I try to share from http://www.giftry.com I am given the small square thumbnail image instead of the large rectangle. The image linked to in the open graph meta tags is larger than Facebook's recommended 1200x630.
I've tried using the debugger, but there are no errors and everything looks correct. Any thoughts on what I can do?
Here are my og meta tags:
<meta property="og:title" content="I need your gift ideas!">
<meta property="og:site_name" content="Giftry">
<meta property="og:url" content="http://www.giftry.com">
<meta property="og:description" content="Come help me at Giftry — a place where gift givers unite to curate giftries full of fabulous gift ideas. Whether you create your own giftries or explore gift ideas for others, Giftry makes it easy to find ‘just the thing’, for anyone and any occasion. Now, let’s get gifting!">
<meta property="og:image" content="http://ec2-static.giftry.com/img/giftry_gift_surprise_large.jpg">
<meta property="fb:app_id" content="356150731192079">
Seems that I have find a way how to resolve this. When I remove fb:app_id and update url via debuger the rectangular image were shown as expected. Then I have created new fb:app_id and it works fine as well. If I turn back my old app id facebook show me small square thumbnail again.
I have found thousands of solutions for embedding a flash player in a Facebook wall, most of them considerably outdated and almost nothing posted after the major UI changes that FB has made relatively recently.
That being said, the most simple and (theoretically) still valid way for doing this that I've found is through posting a link that points to an HTML which presents the Open Graph tags that FB would read and interpret, as follows:
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>My title!</title>
<meta property="og:title" content="My title!">
<meta property="og:type" content="video.movie">
<meta property="og:url" content="http://mysite.com/url/">
<meta property="og:description" content="content description">
<meta property="og:image" content="http://mysite.com/URL_THUMBNAIL.jpeg">
<meta property="og:site_name" content="mysite.com">
<meta property="og:video" content="http://mysite.com/flash.swf?flashVar=0101">
<meta property="og:video:type" content="application/x-shockwave-flash">
<meta property="og:video:width" content="300">
<meta property="og:video:height" content="200">
It is important to note that the flashVar is necessary for the kind of application I am using, and I wouldn't expect that to be the problem, as it isn't pointed out as so when I use Facebook's object debugger (developers.facebook.com/tools/debug/).
Furthermore, the most intriguing problem is that this solution actually works when I post the link with an account that still uses the old Facebook interface (without Graph Search) - a little "play" button will appear [as shown on the following link] on the thumbnail and, when I click on it, the SWF starts to play on my Facebook wall.
http://das.ufsc.br/~alexandrec/SSoldFB.png
However, when I try to post the same link on my FB account (which already has the Graph Search and all the other UI changes), this play button won't appear [as shown below] and, if I try to click on the thumbnail, another window will open with the link specified on og:url
http://das.ufsc.br/~alexandrec/SSnewFB.png
I am wondering if this is a matter of having my website put on some sort of white list, but I haven't found any up-to-date documentation that mentions an actual list of this kind - and as my link works on the old UI I believe I would already be on that list.
There is another way for posting SWF files on the wall through the Graph API, making a POST request of an object with a source, a message and so on, but I find this way not so interesting as I can't specify the width and height of the embedded player and that is pretty essencial for my application.
Anyone knows why this happens? Has Facebook decided that it won't allow users to post SWFs anymore, or is this just a (hopefully temporary) Facebook bug? Is there any other way to make this work (taking into consideration my necessity for defining height and width of the embedded player)?