Author |
Topic |
|
dax
Starting Member
14 Posts |
Posted - July 16 2013 : 19:59:01
|
Hi all,
We are trying to create a meta tag for rich snippet images, so that the correct product image is created for Facebook and Google +
From what we can see the tag needs to go in shoppage_header.htm along the lines of...
<meta property="og:image" content="" />
Has anyone had experience with generating a dynamic image which could be used in this tag?
Or is there a better way?
DAX |
|
diegomilito
VP-CART Expert
Argentina
779 Posts |
Posted - August 01 2013 : 23:13:16
|
dax, just some sharing, i ever tried some experiment for dynamic images to be showed on facebook passed from my site products,
there is code to be put into <head></head> inside your header template :
<head> <% if request.querystring("id") <> "" then dim strprodcid strprodcid = request.querystring("id") %> <meta property="og:title" content="<%= getproductnameforfb(strprodcid) %>" /> <% else %> <meta property="og:title" content="enter your site title" /> <% end if %> <meta property="og:type" content="website" /> <% if request.querystring("id") <> "" then dim strprodukid strprodukid = request.querystring("id") %> <meta property="og:url" content="http://www.enteryoursite.com/shopexd.asp?id=<%=strprodukid%>" /> <% else %> <meta property="og:url" content="http://www.enteryoursite.com/" /> <% end if %> <% if request.querystring("id") <> "" then dim strprodid strprodid = request.querystring("id") %> <meta property="og:image" content="http://www.enteryoursite.com/<%= getproductimageforfb(strprodid) %>" /> <% end if %> </head>
and there is also sub routine to be put into shop$db.asp : function getproductimageforfb(sid) dim strcatalogid dim itemsql,itemconn, itemrs, strsupname, stritemname itemsql="* from products where catalogid = "& sid &"" shopopendatabase itemconn Set itemrs=itemconn.execute(itemsql) if not itemrs.eof then stritemname = itemrs("cimageurl") ''response.write stritemname ''response.end end if getproductimageforfb = stritemname Set itemrs = nothing set itemconn = nothing end function
function getproductnameforfb(sid) dim strcatalogid dim itemsql,itemconn, itemrs, strsupname, stritemname itemsql="select * from products where catalogid = "& sid &"" shopopendatabase itemconn Set itemrs=itemconn.execute(itemsql) if not itemrs.eof then stritemname = itemrs("cname") end if getproductnameforfb = stritemname Set itemrs = nothing set itemconn = nothing end function
and of course you need to insert the fb iframe code into product template maybe at the tmp_product.htm :
src="https://www.facebook.com/plugins/like.php?href=http://www.enteryoursite.com/shopexd.asp?id=[catalogid]&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:400px; height:30px;" allowTransparency="true"></iframe>
i do not sure if those will work in your site perfectly but at least u should know something about coding or have a coder to adjust that for you..
good luck diego. |
|
|
devshb
Senior Member
United Kingdom
1904 Posts |
Posted - August 28 2013 : 21:43:05
|
Hi Diego,
That''s a great solution, it''s similar to the kind of thing we''ve been doing too.
Something we''ve had issues with though is that the images (cimageurl or extendedimage etc) on some of our clients'' sites are not necessarily very "square"; facebook ignores images that have an aspect ratio beyond 3:1, and generally square images work much better for/on facebook.
The og:image value doesn''t necessarily have to be an image that''s physically displayed on the page either, so you could use a different image in the facebook tag than the normal cimageurl/extendedimage when it''s not a very "square" one.
So at the moment the main problem (once you''ve got the kind of customised tweaks like you shared above in place) is what''s the best way to create images that fit with the facebook ratios?
Your function can then easily be tweaked to use the column name that hold the "facebook image" rather than the cimageurl/extendedimage.
Have you run into this "square image" issue? If so, how did you deal with it? If you''ve got a site that''s got, say, 10,000 images, most of them sizes/ratios like 400x100 or 150x500, then facebook would ignore the image tag and just use whatever other images it can find which fit its sizing/ratio rules (which are usually completely irrelevant ones like a shopping trolley icon or a border background gif etc).
Facebook say that the images must be at least 200x200, and as square as possible.
What I''m thinking is maybe to create some kind of admin script which goes through all the extendedimage files in a loop, and uses aspjpeg to "redraw" them to fit facebook-image-rules, and then stamp those resized files onto another column on the products table, and then use that for the tag.
Has anyone else had this issue with facebook using totally irrelevant images when they share a link to their site on facebook? I''m amazed that there haven''t been more postings about this, we''re getting quite a steady flow of people who are starting to spot this issue when they use facebook, but the full solution hasn''t been created yet as far as I know. We could create an admin addon that does that kind of aspjpeg loop, and corresponding detailed code for the customer-side to setup the tags on the home page and product pages etc so that all pages on the site have a fall-through that always use a good/relevant image, but I''d like to see if anyone out there is having these issues, and what they think first.
Surely Diego and Dax aren''t the only people that are having these issues?
I don''t really see it as an oversight/problem with vpasp itself, because the problem''s relatively new and people are only just starting to spot it, but I think it does need a proper/full solution. Whether that''s an addon that we build, or shared-code like Diego''s, or vpasp themselves doing an update, I''m not sure, but I reckon it definitely needs addressing.
Simon Barnaby Developer [email protected] www.BigYellowZone.com www.BigYellowKey.com Follow us on Twitter: http://twitter.com/bigyellowzone Web Design, Online Marketing and VPASP addons |
|
|
devshb
Senior Member
United Kingdom
1904 Posts |
|
carfin
VP-CART Expert
United Kingdom
948 Posts |
Posted - August 29 2013 : 06:37:30
|
Hi Simon,
I agree that the best way round this is to have a field in the products table to store a uniform size image (say 200px) for use with Social Networking sites and other applications. You can use and amend the properties of the DrawImage method within ASPJPEG to create a standard size new blank image (canvas) and then do a batch process loop through all the extended images resizing to fit on each new blank image, saving the new image to the products table.
Or if you have Photoshop (other image editing software is available) you can batch process your original extended images to a square format and then upload
We don''t use social media yet as we are a business to business wholesaler but I know one small company that is having this exact problem. It would be interesting to know if VP-ASP could provide a solution as a bolt on.
Regards,
Carrol www.deanston-electrical.co.uk |
|
|
|
Topic |
|