I'm having a problem where the image that is pulled through to the user's wall after they click the like button is cropped. See link for image:
http://imageshack.us/photo/my-images/36/fblikeimage.jpg/
Here is my iFrame code:
<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fmysite.org&send=false&layout=box_count&width=450&show_faces=false&action=recommend&colorscheme=light&font&height=90&appId=1234"
width="320" height="60"></iframe>
Here are my OG tags:
<meta content="123456879" property="fb:app_id">
<meta content="sch_donations:donate" property="og:type">
<meta content="https://mysite.org/?utm_source=internal&utm_medium=social&utm_content=recommend-on-facebook&utm_campaign=WTH-FB" property="og:url">
<meta content="Title text" property="og:title">
<meta content="Description text" property="og:description">
<meta content="https://mysite.org/image.jpg" property="og:image">
<meta content="https://mysite.org/?utm_source=internal&utm_medium=social&utm_content=recommend-on-facebook&utm_campaign=WTH-FB" property="sch_donations:link">
I wondered if anyone else has come across this problem? Can you see anything in my code that might cause this?
I think the image is the problem... What are its original dimensions? Fb tends to crop it like that if an image doesn't have its height and width equal...
Related
I want to be able to have different images of the shared link preview especially with WhatsApp's want a full-width image like the one of youtube
I tried images with different dimensions. But not working.
<meta property="og:image" content="Https://linearc.top/image1. Jpg">
<meta property="og:image" content="Https://linearc.top/image2. Jpg">
<meta property="og:image" content="Https://linearc.top/image3. Jpg">
I want to be able to have something like this
I instead of
I am adapting a fixed size website (800x600 pixels) to work on mobile phones and I have run in to some problems on the iPhone.
I have set the meta viewport tag with width=800 to fit the page exactly on the screen.
Unfortunately on the iPhone it centers the page on the height giving it an unwanted top-margin. It works fine on Android.
How can I get it to align to the top on iPhone?
Here is a simplified version of the page
<html>
<header>
<meta name="viewport" content="width=800">
</header>
<body>
<div style="width:800px; height: 600px;">
</div>
</body>
</html>
Try this , and it should rescale automatically
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Hi I have a problem with iPhone web app. The problem is that the website is moves under the statusbar when I add the app to to the home screen.
So for example my header block is not fully shown.
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
Here is the image showing the problem.
Try to change:
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
into:
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
I had the same problem where this was set to black-translucent and setting it to black removed the problem.
how can I get my fixed width site to always appear "fully zoomed in" on webkit (iphone and android) browsers?
right now, it looks fine on an iPhone and "too small/zoomed out" on an Android phones that have higher resolution.
i'm trying this viewport:
<meta name="viewport" content="user-scalable=yes, width=device-width, target-densityDpi=device-dpi, initial-scale=1.0" />
The following worked for me. The page gets scaled down for medium and low density devices. Android 2.2 has some issues with handling meta tags.
<meta name="viewport" content="width=device-width, target-densitydpi=high-dpi" />
Try changing the "initial-scale=x.x" number until it looks right:
<meta name="viewport" content="user-scalable=yes, target-densityDpi=device-dpi, initial-scale=1.6" />
The following code does not fit onto the iphone screen;
how do I have to define the viewport?
<html>
<body>
<center>
<div id="karteu" style="background: url('../customer/Karten/karte1.jpg') no-repeat left center;width:714px;height:540px;" >
</div>
</body>
</html>
Normally the site should be zoomed, so i first should see the website in small, and then be able to zoom that i see it in the original size, but in my case it does not, when i call the site, the zoom is, that the image has this original size already, and that i have to scroll, but i dont want to scroll,...i want to use the normal safari mobile zoom and then scroll
The solution at the bottom does not zoom anything.
I want to see the overview of the image at the beginning.
Then i want to be able to zoom with the normal safari zoom functions,..
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
use the following meta tag:
<meta name="viewport" content="width=*your site width*, initial-scale=0.30">
works for both tablet and mobile