Image link for HTML5 template not appearing on social media sites like Facebook
Posted by James Reiche on 20 March 2015 05:04 PM
If you are using an HTML5 website template and the image link is not being generated on social media sites like Facebook then go to your sitezadmin-edit advanced settings - general advanced settings section and change the include_og_image_tags setting to true.
It can take up to an hour or so for FB to recognize the change.
If the client really wants to choose what image that Facebook uses when they post a link to their website, you can do the following:
1. Navigate to the Facebook debugger tool (you will have to be logged into your own Facebook account to access this):
2. Enter the clients web address in the "Enter URL" field and click the blue "Debug" button just to the right of that field.
3. Scroll down to where it shows the Open Graph properties and see what image file Facebook is looking for in the "og:image" field.
4. Next you will want to see if the image that Facebook is looking for is being used by the client's template.
a. If the image file it is looking for is not currently being used by the template, you can upload an image to replace the one that Facebook is looking for. Make sure to name it exactly as it is in the "og:image" field in the Facebook debugger tool. This is case sensitive so if it is looking for Gordyspic.jpg and you try to replace the file with gordyspic.jpg it will not work. Also, make sure that the image has the same file extension. For example, You can't replace a .jpg with a .png as Facebook will not recognize the extension change. Next you will just want to click the "Scrape" button located near the top of the Facebook debugger tool and you should then see the new image you uploaded. It is rare, but if you don't see the new image, it can sometimes take Facebook an hour or two to show the changes made. Congratulations, you are finished!
b. If the image file is being used by the template and the client wants a different image than the one currently being used, there will need to be a little bit of coding changed in the template files. ***Please be aware that changing this coding can be undone if the template has its site files updated down the road at some point.***
I. You will want to login to the client's account using FTP and then navigate to the folder that their HTML5 template is installed in.
II. Next, you will want to navigate to /sitezsystem/application/views/ and then edit the "home_view.php" file.
If your template does not have a home_view.php file then edit this file instead - sitezsystem/application/views/front/front_view.php
III. In the <head> section of the coding you will want to add the following code: <meta property="og:image" content="http://clientsdomainname.com/whatyounamedyourimage.jpg" /> The good thing about placing this code is that you can tell facebook where to look and what file to look for. It doesn't have to be the file name and location that the Facebook debugging tool told you it was looking for. When Facebook "Scrapes" the client's site it will see this code and then look in the location that you designated in the code for the image to use when the client's web address is posted in facebook.
IV. Replace the "home_view.php" file in the client's site files with the one you just amended using FTP.
V. Upload the image you designated in the meta property code of step III to the location you designated in that same code using FTP.
Link preview images should be sized 1,200 x 630 pixels - https://developers.facebook.com/docs/sharing/best-practices#images
VI. Click the "Scrape" button near the top of the Facebook debugging tool's screen. You should now see that Facebook is looking to the location, and for the file, that you designated in the og:image meta property code that you added to the home_view.php file. It is rare, but if you don't see the new image, it can sometimes take Facebook an hour or two to show the changes made. Congratulations, you are finished!