I have added an open graph image to my site but in the news feed it is not scaled correctly. The image is clipped both at the top and at the bottom. The image itself is a png with the size of 1500x1500px.
Looking at my profile page where the image is placed to the left of the text it scales correctly.
I have specified the following meta tags: og:title, og:type, og:image, og:url, and og:description.
I use the ShareThis API for the actual share button (if that can have anything to do with this).
Has anyone had this problem as well?
Related
I have a tab that is to display data that is to be prepared for a report. Kind of like a preview. What I want is to take a screenshot of graph generated in another tab.
Kind of similar to scanning an image. So the initial tab generates 3 graphs under each other that fit in the screen. I basically want the screen shots of the graphs to post them along with the data in the second tab.
The second image is where I want the content of the first image to be posted. How do I go on about that?
Have I misunderstood the img srcset tag if I say that I'd like to specify to the browser what image to show when the screen is max-size: 599px (mobile) and when it's above that?
<img
srcset="
small.jpg 600w,
big.jpg 2000w"
sizes="
(max-width: 599px) 600w,
2000w"
src="big.jpg" alt="Some text" />
This code doesn't behave at all how I'd expect it to. I'd like the browser to show the small image when it's a mobile screen, and show the large one for every other device resolution. Is there no way to do this simply? So confusing.
I've read articles on SitePoint, Smashing Mag, etc, and none of them explains it simply as above. They go into image widths, viewports, ratios, etc. All I need is to specify in a media-query screen resolution style which image to show at which resolution.
Many thanks.
I'm trying to create an open graph story which will include a map (location) and an image which was uploaded by the user.
So far I've managed to show the map with a pin on it so after the user clicks the pin he see a small popup with the image inside.
How can I make it look more like foursquare - to have a map and the image available for view in full screen?
(Currently my Object inherits from "Object" and I've added a location property to it)
I want to know if exist templates to add text on photoshop like in the following pictures:
http://sphotos-e.ak.fbcdn.net/hphotos-ak-ash4/485070_566956359990277_263279122_n.jpg
https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-ash4/3263_403189956409783_609225582_n.jpg
Could you suggest some pages where I can study and try those effects ?
Thanks.
Step1: Find the fonts. Search on font sites for similiar fonts or try to cut out the font and upload it to http://www.whatfontis.com/ or http://www.myfonts.com/WhatTheFont/
Step2: just play around with blending options and stuff.
from what I can see it's these settings you want too look at:
"Notche Latina": Gradient overlay, white stroke and black dropshadow.
"photo recoblablabla": inner shadow and might be in overlay-mode or something
"Festival de la bira": once again, white stroke
First make a layer adjust the objcet on layer as per your requirement.
Add some effects from filter gallery if you required (or layer style).
Click on the text toolbar type your text (required text).Then to apply effects
right click on text layer and click on rasterize type.now you can add effects from the filter gallery to the text.(or Layer style eg-inner shadows,bevel and emboss).
Facebook is selectively not pulling OG Images from some of our Shopify product pages despite the og:image being recognized as an object property when debugging the page.
Pages Causing Errors:
http://www.911lights.com/products/mini-laser-sale
http://www.911lights.com/products/starburst-half-phantom (OG Image Not Pulled, Pulls Only Video Graphic)
Pages Working Fine:
http://www.911lights.com/products/dlxt
http://www.911lights.com/products/svp-hh-siren
I think your issue is related to the image size. The og:image in is 50x50 with a maximum width:height ratio of 3:1. Your images on http://www.911lights.com/products/mini-laser-sale and http://www.911lights.com/products/starburst-half-phantom are both 160 x 41.
Enlarge the actual image on your server (for example: http://cdn.shopify.com/s/files/1/0001/0459/products/ULB15_compact.jpg?100254) to 50px high. Also make sure the width is no wider than 150px for a 50px high image.