Drupal: Insert custom image to publish articles on Facebook

drupal and open graphIn this article we have two separate procedures to integrate open graph meta on our Drupal site to insert a custom image when we publish an article on facebook.

1: One manual, acting directly on the file page.tpl of our theme;
2: automatic, by installing the Open Graph Meta Tags module for Drupal.


When you create web pages with Drupal, one of the more pressing need is to share and publish it on the main social channels available, such as Google +, Facebook, Twitter and all the others.

With specific reference to share on facebook, leaving the task to drupal and facebook does not always we are completely satisfied: often it happens that the preview image of our article is not the one you want, or refers to some completely off topic banner on our website.

We know in fact, that every author of respect, especially when in the case of known sites and with many visits,  can not and should not underestimate this: such an error can affect several aspects among which an important one is the fewer mouse clicks which will go as towards our article.

To remedy this error, when we use drupal for the publication of our articles, we have two possible solutions: one manual, acting directly on the file page.tpl of our theme, the other more automatic by installing a separate external module.

1. Insert custom images on facebook by changing the file page.tpl

For those who prefer not to overload drupal with a module, this is the procedure to integrate open graph directly within our theme intervening on the page.tpl.php file that we will find in the following location after accessing the folder on the server through our client ftp: sitename/sites/all/themes/mytheme/page.tpl.php

Page.tpl file should be downloaded and modified using the editor that we use regularly. The file is in php.

The first thing to do is to identify the tag "head" (ie the part enclosed in <head> and </ head>). Between the two tag we add this piece of code:

<meta property="og:image" content="http://pathtoimage/image.jpg" />

Of course, this line of code must remain the same except for the part that starts with content. In fact, into the quotes we're going to enter the path in which we have placed our image.

Example: A path that you typically use for placing images on the site is "sites/default/files/images/myimage.png"

Another thing to keep in mind is the size. In fact it must have a measure equal to 97px X 114px. Larger images will be resized automatically, but the advice is to reduce them to the exact measurement to avoid unpleasant results.

After entering the code string and image, save the changes made to the file page.tpl and load in the same location from which you downloaded locally. After doing this, clear the cache of drupal and then share our article on facebook to get the desired result.


2. Use the module Open Graph: How to install and configure the Open Graph Meta Tags

For those who prefer not to do the above procedure is available the "Open Graph Meta Tags" module available for Drupal 6 and 7 version. Remember, however, that also the use of the module requires a small operation to the code for its functioning.

After download, we can upload it in the usual modules folder (sites / all / modules) and then activate it by checking the box next to the name in the modules section of Drupal.


It 's the time now to work on the file usual page.tpl of our theme:
Open the file with the editor, and we identify the first opening tag of the file, ie <html> this to put this string:
More precisely:
</ html>
Save the file and clear the cache as described in point 1 of this article.
Now we can go to configure the module in the admin section (http://yoursite.com/admin/config/content/opengraph_meta)
Entered in the configuration of the Open Graph module, we have several options to choose from:
  1. First, we can choose which content types allow the modification of the open graph meta (for example, you can select that it is present only on the content type "blog" and not on others).
  2. Insert the title, the name of the site;
  3. we can choose a custom image by specifying the path where it is located in the "Fallback Image". But Wait! We need a clarification!

Inserting an image here every post we're going to publish will have the same image, which is in itself not always correct because in most cases the need is to have a custom image for each article that we are going to publish.

The solution is to ignore this field and save.

Then, when we will enter the type of content over which we have enabled the module, ie we will create the actual content, images inserted into the body of the article can be selected as thumbnails for sharing on facebook as you can see in the image below:



Similar Content

Gallery with effect stack of images

css imageWhen he began to spread on the main browser support for CSS3 transformations, many tutorials applied this new feature to the galleries, creating the effect that here we define 'stack of images': the base image in the foreground and behind it the levels that give the illusion of a group of overlapping photos.


Getting Your Bearings on the Three Forms of Mobile Marketing

Here are three basic approaches you should consider when integrating mobile marketing into your marketing strategy:
  • Direct mobile marketing
  • ✓ Mobile-enabled traditional and digital media marketing
  • ✓ Mobile-enabled products and services
Web Marketing: