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

How to add author box in WordPress post

wordpress author boxBe recognized by the web is a very important element for those who want out from the crowd and it is even more for those who manage a blog or website.
Thus was born the need (if not born, born leak now) to create a sort of brand / quality indicator to associate with the result of the hard work you do to create the post. What to do? Simple, just associate the author box (including image and name-surname) of each post that has been published.
Development: 

How to monitor a mobile phone

f-secure to monitor call phone

Here, how to monitor a mobile phone:

Due to technological developments, smartphones can surf on Internet, take pictures, shoot video and keep critical data. They are key devices in our daily life and, for this reason, we very worry about losing them for stealing.

To limit the damage (and concerns)  fortunately there are solutions, such as F -Secure Mobile Security, which allow you to keep an eye on smartphones  to protect them against unauthorized use, by sending commands remotely by SMS and constantly monitoring the position geographical device by GPS.

Mobile: 

BlackBerry Messenger Voice: messaging and free calls using Wi-Fi

Research In Motion, third world power regarding the sale of smartphones, will respond to the current financial _ not bright period  with new services to which you are going to add a new operating system, BlackBerry 10, whose launch is scheduled for January 2013.
 
 
News Magazine: 

Apple News: Iphone 5s will arrive in June

news apple iphone 5sNews arrived on the iPhone 5S, smartphones that should be the successor to the iPhone 5.
 
According to what the analyst reveals Peter Misek, Apple would be convinced to launch the device in the month of June, precisely at WWDC. The production - according to Misek - will start from the month of March.
News Magazine: