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.

[adsense:block:adcontenuto]

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.

[adsense:block:adcontenuto]

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:

[adsense:block:adcontenuto]

Development: 

Similar Content

Identify harmful Web Shell with PHP Shell Detector

webshell php

A web shell is a script, commonly written in PHP, which can provide access as the root user to a web server compressed. Trojan also renamed PHP can be very harmful if used correctly by an attacker, it is therefore important to periodically analyze the platform's web in search of intruders.
Development: 

How to spy a mobile phone

how to spy a mobile phone

Have you ever thought to spy your friend’s mobile phone or reading all messages on your girlfriend’s mobile and listen all her calls too.  Maybe you haven’t done it yet because you haven’t found a simply and cheaper way. So reading this guide you can finally try to do it.

There are a lot of free or very cheaper solutions even if you should use them only to make some joke and not to violate the privacy of other people. In this way, in fact, you will commit a serious crime!

Mobile: 

Facebook, 1 hour blackout in Europe

Last night, many users have reported on Twitter that Facebook was not accessible. A few minutes later Anonymous posted a message in which the group of hacktivists claimed the attack on the servers of the social network. A spokesman for Menlo Park has denied everything, saying that it was a simple technical problem.

News Magazine: 

Anonymous, this time hitting the State Police

The hacktivist group most famous against the most sensitive Italian goal. The hole suffered by the server of the State Police at the hands of Anonymous last night marks a quantum leap in the company's shares, which - perhaps because they have abandoned WikiLeaks - seem to be devoting more and more data leaks and dedicate to public shares.
News Magazine: 

On Google+ comes the zoom on photos

zoom google+Short, but interesting. It is the latest news on Google+, shared on the social network by Dave Cohen, Google.
 
It is zooming, used by the user when viewing photos. Everything is connected, quite simply, to the mouse wheel: moving it forward or backward, it becomes possible to zoom in or out details and particulars.
News Magazine: