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

Create applications with Ember.js


If at the beginning of his career JavaScript had a role almost decorative, merely add interactivity to Web pages, over the years its role has grown allowing you to create Web pages more sophisticated. Today, the role of this language on the Web, and not only took on such importance that enable achievement of real applications, which require skills so typical of those who develop software in a professional manner.

Direct Marketing and Email Marketing: Difference and comparison

direct marketingThe pioneers of direct marketing (DM) Bob Stone, Martin Baier and Henry J. Hoke Jr spoke of the discipline of direct marketing as an interactive system of marketing that uses one or more advertising media to derive a measurable response and quantifiable, and a transaction at any place, with the added possibility that all this activity is not indifferent to being stored in a special archive (database).
Web Marketing: 

Google is chaos: quarterly report already released by mistake.

google chaosThe publication ahead of schedule of the accounts of Google, made public by hours in advance while the press was still incomplete, has been a "human error rather than a systemic problem." This was stated by the CEO of the company specializes in printing services financial RR Donnelley, Tom Quinlan, in an interview with the Wall Street Journal.
News Magazine: 

The @ mentions of Instagram translated automatically on Twitter

instagram on twitterA small and fast news about Instagram is sure to please lovers of this now proven compatibility mobile application but also aficionados of Twitter.
For non-experts and for the less "geek" is a little cumbersome to understand at first, but not impossible.
News Magazine: