Getting Your Images To Be Recognized By Facebook

Getting your images to be recognized by the facebook share wiget isn't always easy. Today I want to share a quick tip with you that can be done with tools built into the default cgBlog module. This is super easy and I hope that is helps you as it has me just recently.


What I am using for this tutorial.

  • CMSMS Version
  • CGBlog Version 1.7.5


Not Another Facebook Meta Tag Blog, Ugggg!

First of all I want to let everyone know that this NOT another blog post about meta tags. That works of coarse but it is difficult for us to do this with cgblog versus another blog platform such as wordpress because cgblog is not a part of the core CMSMS system.

So What Is This Really About?

That being said it isn't exactly necessary to have those meta tags. Facebook Share has a really good way of scanning your html source and finding images to use as thumbnails. The problem is that if your images are to large they sorta "skip" over them. Facebook has rules about image sizes and weights. According to facebook: "Images must be at least 50 pixels by 50 pixels. Square images work best, but you are allowed to use images up to three times as wide as they are tall. " Here is where some problems pop up. The first is that if you have images on your site that are too large, to wide, or to tall they won't work.

So How Do I Get This To Work?

Now we can get to the nitty gritty. There are a couple of steps that you need to take to do this.

1. Get Your Image Size Correct

First is that you need to make sure that what ever image you use, It adheres to the "three times as wide as they are tall" rule. This is unavoidable.

2. Field Definitions

What are those you ask? Field definitions are a neat little tool that enables you to easily create a new field type in the admin of your blog, to display an item on the front end of your blog. Things like featured images and even text snippets can be displayed as a separate field in your blog post. To do this go to the cgblog module, there you will find a tab called "field definitions", click on that tab and then click "Add Field Definition" link.

Once you do that give your definition a new name of "facebook_thumbnail", but in reality this can be anything you want it to be. Just make sure you do not leave any spaces in the name as this may not play well with the system. Now use the drop down field named type to select image. (BTW: you can use file as that is how it was done in previous versions of cgblog but image gives you more options and even creates thumbnails for you to take advantage of.)

Now you should see a few more options in the list. The first new one is image type, leave that alone. The next one is watermark, I selected no because it isn't needed for this application. The next is Thumbnail. This is where we need to work. Select yes and make the image size 150px. This basically makes either the width or the height 150px depending on the orientation of the image. The for preview select no as we will not need that either. MAKE SURE THAT YOU CLICK THE CHECKBOX NEXT TO PUBLIC! If you don't the module will not write the image to your HTML markup and you will be beating your head against the wall trying to figure out why it isn't working.

Click Submit and if you go to the entries tab and select "Add Blog Entry", scroll to the bottom directly above the submit button you will see a new file select field with a label of facebook_thumbnail.

Step 2 done.

3. The Code

Now we need to edit the summary template and the detail template in the cgblog module. Both methods will be the same so I will only go over it one time as to save some time.

Under detail summary tab select edit next to the template that you use in my case i am using the "Sample" template. Now you should see a bunch of code. Don't worry for those who aren't programmers. I'm not either so if I can do this so can you. Search for a section toward the bottom of the code :

{if isset($entry->fields)}
      {foreach from=$entry->fields item='field'}
            <div class="CGBlogDetailField">
                  {if $field->type == 'file'}
                  <img src="{$entry->file_location}/{$field->value}" alt="" />

This is basically calling any and all field descriptions with the field type "file" and making each one of the files an image. Since we are not using the type "file" we need to change this:

{if $field->type == 'file'}

Into this:

{if $field->type == 'image'}

replacing the word file with image.

we are also, as I said before, going to make use of the auto generated thumbnails. To do this we need add to the fromt of the file name "thumb_" to signify that we are calling the thumbnail of the image. We also want to give the image a class of "hidden" so we can make the image not visible to the regular visitors of your blog. So to accomplish this we change this:

<img src="{$entry->file_location}/{$field->value}" alt="" />

Into this:

<img class="hidden" src="{$entry->file_location}/thumb_{$field->value}" alt="" />

Now we need to take care of the CSS. We added a class of "hidden" to the code above now we need to add a class to your attached style sheet. The class should have a style of display:none; this will keep the image from being visible from your visitors.

.hidden {

You could alternatively make the new image a part of your layout as well.


Now you can give it a try. This method can be used for many other things but I felt it useful for this type of application. It is easy and it prevents you from having to code any unnecessary applications. As well it is easy for my clients to understand and use.

Please I look forward to your comments and questions. If you have any please leave them below and I'll answer as many as I can.