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

How to find the right niche for your blog

how to fine niche

The web is full of endless blog generalist that "only occupy space and positions", they can not be nobody because talk about topics completely different from each other, without being able to reach the top of Google results.
To be successful, it is very important to decide then a specific niche, a specific topic is not very wide which allows to get you out of great satisfaction and be among the first positions in SERPs (in the results of a Google search).
Web Marketing: 

Analyze Your Facebook Page and That of Your Competitors

analyze facebook pagesAll activities have a Facebook Page, whose goal is to be known and particular importance is given to the number of "Like" that these activities are able to obtain. But there are two other aspects to be taken into account and that is how to analyze and monitor these pages.
Social Network: