понедельник, 28 декабря 2015 г.

ITPMeta is a Joomla! extension that manages meta data and puts semantic data in the HEAD of website pages

03:26 By , , , No comments

ITPMeta documentation and FAQ

ITPMeta is a Joomla! extension that manages meta data and puts semantic data in the HEAD of website pages. There are predefined Open Graph, Facebook, Twitter, Google, Dublin Core and SEO tags. This is a documentation and answers of frequently asked questions of ITPMeta.

Additional Information

You can find additional information about ITP Meta on the following pages.

Download and install

I guess, you have already installed Joomla! and now you have to download ITPMeta package, which is specific for your Joomla version.
Go to "Extension Manager" and install the package.
Joomla! extension manager
If you are installing the extension for the first time, you will see a list of installed libraries, plugins and modules. You will also see a list of minimum requirements. If the system displays red indicators for unfulfilled requirement, it will be good to find a way to fix it.

Requirements

You must install Prism Library because the extension needs it to work properly.

Technical Requirements

The minimum requirements to run the extension properly are:
  • Joomla! v3.2
  • PHP 5.3
  • MySQL 5.1
  • MooTools 1.2.x
  • jQuery 1.8.x
  • cURL, fopen
  • Magic Quotes disabled

Manage URLs and tags

This is a manger of URLs that contains a list of Internet addresses from your site. You can create, edit or delete these addresses using buttons, which are on the right side of the manager.
When you create a record, you will be able to add META tags to that address. These tags will refer only to this page. They will be added to the source code when page be loaded.
01.To add an URL you have to click on the button "New". Enter the URI into the field "URI string". You should get the URI from the page address that you have been loaded.
For example:
If your URL is "http://itprism.com/blog/25-seo-infographic", you have to use "/blog/25-seo-infographic".
Select a status and save. If you select "Published" the system will load the data for this URI. If you select "Unpublished", that means this record is inactive and the system won't put any tags into the page code.
NOTE: The URI has to start with a slash (/).
Adding new URL
02.You have created a new record and now you are seeing a list with META tags. The list has to be displayed on the right side on the page.
Open Graph meta tags
03.When you click on a tag, the system will fill the text fields, which are on the left side. Those fields contain the code of the selected tag.
If you see a structure like this "{PAGE_TITLE}", that means you have to replace that string with your data.
Now, enter your value into text area "Content" and the system will put your value into the right place.
When you are done, save the data.
Adding a new meta tag
04.When click on save button,  new tag will be added in the list of existing ones. If you want to edit the tag, just click on it or on content text.
Meta tags list

Reorder tags

If you want to reorder tags you should drag and drop them in the position you want. Click on the icon that is on the left side of tag and drag it to new position.

Auto Update

If you enable this functionality, the system will update content of existing tags automatically.
NOTE: This option works for plugin "System - ITPMeta  Tags", which collects data and generates tags.
Example:
There is a tag "og:title" assigned to URI of an article. 
If you edit the title of that article and the option "Auto Update" is enabled, the system will get the new title and will store it to the tag.
If you want to use a custom title, you can replace the content of the tag with yours and disable the option "Auto Update."  Thus, you will prevent its automatic update, because the system updates content if there is difference.

Scripts

Using this functionality if you want to put any data in the code of specific page. You are able to put the code after opening BODY tag or before closing BODY tag.
Example:
You want to put Google Analytics with particular parameters that will collect analytics data for specific page. So, you can use this functionality.

Global tags

There are tags like "og:site_name" and "fb:admins" that have to be added in the code of everyone page. So, the tags managed by "Global tags"will be included in each page of your website.

Plug-ins

Plug-ins add additional features on the website. ITPMeta comes with several plugins and you can find them on the "Plug-in Manager". Enable those that you would like to use.

Plugin "System - ITPMeta"

This plugin adds predefined tags to the code of pages and puts schemas into the <HTML> tag.

Options

Tags position

You are able to select the position of the tags where they will be added.
  • standard position - the system follows the queue of adding meta data.
  • after <head> tag - the tags will be added immediately after open <HEAD> tag.
  • after <title> tag - the tags will be added immediately after the <TITLE> tag.

Schemas

The schemas describe element in the HTML code. The browser needs these schemas to learn more about tags that are in the code. So, we need to put a link to OpenGraph or Facebook schemas in the HTML tag.
You can add that data by selecting one of the options - "Yes" or "No", and the system will put following string to the code of web page.
prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article# blog: http://ogp.me/ns/blog#"
The HTML tag becomes something like that
<html prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article# blog: http://ogp.me/ns/blog#" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" dir="ltr" >
ITPMeta settings

Plugin "System - ITPMeta URLs"

This plugin collects URLs automatically and stores them to the extension.

Options

Collection type

This option sets the way used for collection URLs.
  • Full - collects all links.
  • Strict - collects links that are connected with a menu item. This option is recommended.

New link state

With this option, you give the status of the new links (published or unpublished), collected by the system. So, if you select "published," all new URIs will be active.

Autoupdate state

This option set status of URL options "Auto-Update". If you select "On" all new URIs will be stored with active auto-update functionality.
NOTE: This plugin is available only for ITPMeta PRO.

Plugin "System - ITPMeta - Tags"

This plugin collects data from Joomla! extensions and generates OpenGraph, Twitter Card or SEO tags.
Example:
If you want to generate "og:title" tag, enable the option "Open Graph Title." The system will get a title from an article and will add/update the tag.
NOTE: This plugin is available only for ITPMeta PRO.

How to set a picture that will be used when someone shares an article?

If you want to provide an image that will be used when someone clicks on the button "Like" or "Send", you have to add Open Graph image ( og:image ) tag to URI of that article. Follow next steps:
  1. Go to "Manage URLs"
  2. Find the URI of the article. If missing, create it.
  3. Click on "Image" that is in the slide "Open Graph Basic".
  4. Enter a link to the image in field "Content" and save.
If you use ITPMeta PRO and want the system to generate Open Graph image automatically, you should follow next steps:
  1. Enable the plugin "System - ITPMeta Tags"
  2. Set "Yes" for option "Open Graph Image" in the plugin "System - ITPMeta Tags"
  3. Open the article in "Article Manager".
  4. Select a picture using options "Images and Links". ITPMeta will use these pictures to generate Open Graph image tag.
NOTE: This process describes how to provide pictures when using native Joomla! contentextension (com_content).

How to translate ITPMeta?

You can translate this extension in your language using Transifex. Go to the system and sign in. FindITPMeta translation project and start translating. If you need more information, read the article "How to translate ITPrism extensions in your language?"
You can also use ITP Transifex to create language packages.

How to debug the extension and catch an error?

If there is a problem with the extension and the system does not display error messages, you should debug it. That will give you more information about the problem.
  1. Go to "System" -> "Global Configuration" -> "System" -> "Debug Settings".
  2. Set to "Yes" the option "Debug System".
  3. Now go to tab "Server" and set option "Error Reporting" to maximum.
Now, the system should display information about the error.
You can also check log files in folder "/logs" or the log file "error_log" in your main folder.

How to upgrade the extension?

The better way to upgrade the extensions is:
  1. Make a backup of your site ( database and files ) ( optional but highly recommended );
  2. Install the new version over the old one ( all previous data will be saved );
  3. Check the extension settings and menu items for changes;
  4. Check for a new version of Prism Library. If there is a new version, install it.
  5. You should also upgrade all other plugins, which work with ITPMeta.
It is a good practice to have a copy of your website on a subdomain. It can be something liketest.mywebsite.com. You should upgrade ITPMeta on this test site first. That will be useful for you because you will be able to explore the newest features and configuration options. When all is OK, you will know how to upgrade the extension on your production website fast.

How to upgrade to version 4.0?

  1. Uninstall ITPMeta Library from the extensions manager.
  2. Install Prism library.
  3. Install version 4.0 over old one.

How to get support?

You can post issues on ITPMeta Git repository.  If you have any questions, you can send me a mail from the contact form. If you need premium support you are able to subscribe for my premium services onITPrism members site.

How to get FREE support?

You can report issues on ITPMeta GitHub repository.
If you have any questions, you can send them to me, using the contact form. Please, send me a message with only one question. When I answer you, you will be able to send me your next one.

Read more →

Adding Facebook 'Like' button to multiple pages Joomla Site

03:06 By , , , No comments


Adding Facebook 'Like' button to multiple pages Joomla Site

Postby JoomlaProf » Mon Jul 18, 2011 9:22 pm
Adding Facebook 'Like' or 'Recommendations' to your Joomla websites can easily be achieved by inserting the iframe tagged code onto your html template using the admin panel. Another method is to depict 'Like' on a module far the center of attention. To this end you may find an appropriate plugin in the extension directory.

However if you like to get the 'Like' button closer to the action then you may interweave the code into the template or that part of the component which will be called dynamically.When dealing with numerous webpages the task tends to become tricky and tedious. To further complicate things, lack of properly documented functions could keep you guessing your time away.In this post we will look at how we can effectively add Facebook apps to our Joomla website to accommodate the numerous dynamic pages that Joomla generates.

Adding the Like button - iframe

To add a 'Like' button simply visit the Like Button Plugin fill out the form push the Get Code button and copy the iframe to the appropriate area in your joomla template.
If you do have numerous pages whose url is required to be parsed, this piece of static code could use a hack.To elaborate the this point, consider a Game Site with the largest number of Online Games 36,000 at the time of this writing.Imagine filling out the Like form and pasting the code on 36,000 individual games.

Coding becomes really simple if we hack the
    href=http://myurl.com
piece and substitute it with a variable
    $myabsoluteurl
We can then look up the url and parse it to the variable.

A simple method to get the current url is
    $url = JURI::current();
    $currenturl = $url;

this is not effective when parsing through an iframe. An appropriate hack around this would be
    $myabsoluteurl=JURI::getInstance()->toString();
    echo $myabsoluteurl.'"';

Your complete functional iframe thus looks like this
CODE: SELECT ALL
<iframe src="https://www.facebook.com/plugins/like.php?href=<?php $myabsoluteurl=JURI::getInstance()->toString(); echo $myabsoluteurl.'"'; ?>&amp;  scrolling="no" frameborder="0"
        style="border:none; width:450px; height:80px"></iframe>

There we have a simple iframe that will post your Likes,dynamically.
Top
JudeSecaro
Posts: 3
Joined: Sun Jul 17, 2011 7:15 pm

Re: Adding Facebook 'Like' button to multiple pages Joomla S

Postby JudeSecaro » Tue Jul 19, 2011 7:43 am
Nice Post. I tried using prependmeta tags to handle the OpenGraph interface Facebook adopts but get an error that <meta name="XYZ" instead of <meta property="XYZ". Is there a way to throw a <meta property="XYZ"?
Top
JohnS
Posts: 2
Joined: Fri Aug 19, 2011 9:43 am

Re: Adding Facebook 'Like' button to multiple pages Joomla S

Postby JohnS » Fri Aug 19, 2011 9:53 am
I have added the facebook recomendations tab to my site and it works however with default images. Would like to understand how Joomla sites can be customised to interact with facebook through the opengraph protocol. Does Joomla support the Opengraph protocol....have looked through a number of extensions on the community but did not come across one on the open graph protocol.

FaceBook Recommendations Frame
CODE: SELECT ALL
<iframe src="http://www.facebook.com/plugins/recommendations.php?site=MYSITE.com&width=550&height=750&header=false&colorscheme=dark&font&border_color" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:550px; height:750px;" allowTransparency="true"></iframe>
Top
JoomlaProf
Posts: 2
Joined: Fri Aug 19, 2011 11:11 am

 Facebook OpenGraph On Joomla site

Postby JoomlaProf » Fri Aug 19, 2011 10:18 am
JohnS wrote:I have added the facebook recomendations tab to my site and it works however with default images. Would like to understand how Joomla sites can be customised to interact with facebook through the opengraph protocol. Does Joomla support the Opengraph protocol....have looked through a number of extensions on the community but did not come across one on the open graph protocol.

FaceBook Recommendations Frame
CODE: SELECT ALL
<iframe src="http://www.facebook.com/plugins/recommendations.php?site=MYSITE.com&width=550&height=750&header=false&colorscheme=dark&font&border_color" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:550px; height:750px;" allowTransparency="true"></iframe>


Facebook Open Graph Protocol on Joomla

Open graph protocols are easily implementable on Joomla by stringing together the tag meta properties as a string and parsing to the header using
    addCustomTag()

The customised code will first call a string variable which simply stitches the various meta property tags. The following is an example implemented on gaming portal Y9
    $opengraph = '<meta property="og:title" content="'.$game->title.'"/>' ."\n";
    $opengraph .= '<meta property="og:type" content="'."BLOG_replacewithyourtype".'"/>' ."\n";
    $opengraph .= '<meta property="og:url" content="'. $myabsoluteurl.'"/>' ."\n";
    $opengraph .= '<meta property="og:image" content="'."http://YOURSITE.com/.../images/".$blog->imagename.'"/>' ."\n";
    $opengraph .= '<meta property="og:site_name" content="'."YOUR SITE TITLE".'"/>' ."\n";
    $opengraph .= '<meta property="fb:admins" content="'."YOUR FACE BOOK DEVELOPER CODE".'"/>' ."\n";

you can also crosscheck functioning with recommendations frame above in Y8
CODE: SELECT ALL
$opengraph    = '<meta property="og:title" content="'.$game->title.'"/>' ."\n";
            $opengraph .= '<meta property="og:type" content="'."BLOG_replacewithyourtype".'"/>' ."\n";
            $opengraph .= '<meta property="og:url"  content="'. $myabsoluteurl.'"/>' ."\n";
            $opengraph .= '<meta property="og:image" content="'."http://YOURSITE.com/.../images/".$blog->imagename.'"/>' ."\n";
            $opengraph .= '<meta property="og:site_name" content="'."YOUR SITE TITLE".'"/>' ."\n";
                                $opengraph .= '<meta property="fb:admins" content="'."YOUR FACE BOOK DEVELOPER CODE".'"/>' ."\n";
//add the tags to the head of the page;[/
$document->addCustomTag($opengraph);

Read more →

КАК ДОБАВИТЬ СОЦИАЛЬНЫЕ МЕТА ТЕГИ OPEN GRAPH PROTOCOL ДЛЯ FACEBOOK В JOOMLA

03:02 By , , , 2 comments


Как добавить социальные мета теги Open Graph protocol для facebook в Joomla
Поскольку facebook является неотъемлемой частью продвижения для любого ресурса и всякие кнопки поделиться и кнопки лайкнуть просто жизненно необходимы. Но какую именно информацию должен подхватывать не понятно. Все сайты разные по своей структуре не говоря уже о классах поэтому, что бы робот facebook не хватал что попала со страницы существует протокол Open Graph. Что это такое и как он облегчает жизнь роботам соц сетей читайте здесь.
К сожалению очень мало информации по этому вопросу в интернете особенно в рунете. Все что нам может предложить google для решения задачи по вставке open graph protocol в joomla? это парочка плагинов которые позволяют вставлять свои meta и теги head. Один из популярных являет ITP Meta. Принцип работы его бесплатной версии мягко говоря странный. После того как вы создали статью, вам необходимо отдельно для каждого материала прописывать мета теги. Не желая мирится с такой рутинной работой я предлагаю вам воспользоваться моим методом.

Итак для начала чтоб стало совсем понятно почему надо ставить Open Graph protocol для facebook в head Joomla. Вот как выглядит материал без специальных записей.
Отсутствие Open Graph protocol
А вот так он выглядит со всеми необходимыми записями. Под необходимыми я подразумеваю основные. Так как записей очень много некоторые из перечисленных meat тегов протокола Open Graph которые будут в этой статье не очень нужны facebook-у, но они являются обязательными для скажем pinterest.
 Нормальный open graph protocol

 

Добавление Open Graph protocol в Joomla

Итак данный этап будет первым на пути к счастью и красивых окошек «Поделиться на Facebook». Не проверял на Joomle 2.5 так что не обессудьте. Но для Joomla 3.2 работает идеально. Итак для начала нам понадобиться отредактировать файл статьи.
  • Идем сюда: /components/com_content/views/article/tmpl
  • Открываем файл: default.php
  • Далее ищем 14-ую строчку с комментарием: // Create shortcuts to some parameters.
  • Далее необходимо определить переменную для даты создания статьи. Для этого добавляем следующую строчку куда угодно в список переменных. В итоге должна появится новая переменная $datepubl. Для примера вот как это у меня.
$user     = JFactory::getUser();
$datepubl = $this->item->created;
$info     = $params->get('info_block_position', 0);
Далее перед закрывающимся знаком « ?> » примерно строчка 25, вставляем следующий код
if (isset($images -> image_intro) and !empty($images -> image_intro)) {
   $timage = htmlspecialchars(JURI :: root().$images -> image_intro); 
   }
elseif (isset($images -> image_fulltext) and !empty($images -> image_fulltext)) {
   $timage = htmlspecialchars(JURI :: root().$images -> image_fulltext); 
   }
else {
   $timage = 'http://komarovdesign.com/images/logo_12x.png'; 
   }
$doc =& JFactory :: getDocument(); 
$doc -> addCustomTag( ' 
<!-- Open Graph data --> 
<meta property="og:title"content="'.$this -> escape($this -> item -> title).'"/> 
<meta property="og:type"content="article"/> 
<meta property="og:url"content="'.JURI :: current().'"/> 
<meta property="og:image"content="'.$timage.'"/> 
<meta property="og:site_name"content="Blog about web design, css & code."/> 
<meta property="article:published_time"content="'.$datepubl.'"/> 
<meta property="article:author"content="Artem"/> 
<meta property="fb:admins"content="100007059401635"/> 
');
Как видите все просто. Что касается картинок то идет следующий порядок если нет картинки для вступительной части материала, берется картинка полного материала, если и ее нет то берется логотип сайта. Его разумеется надо указать заменив на свой в строчке 'http://komarovdesign.com/images/logo_12x.png'
Далее так же ручками необходимо прописать описание вашего сайта в строке "og:site_name". Указать автора статьи "article:author". В строке "fb:admins" необходимо прописать ID вашего профиля на facebook.

Если внимательно читали то заметили что тут нет основного тега "og:description" он добавляется в другом файле.
  • Идем сюда: libraries/joomla/document/html/renderer/
  • Открываем файл: head.php
  • Ищем примерно 106 сточку с комментарием: // Don't add empty descriptions
  • И после основного description вставляем мета тег Open Graph protocol. В итоге должно получиться следующее.
{
$buffer .= $tab . '<meta name="description" content="' . htmlspecialchars($documentDescription) . '" />' . $lnEnd;
$buffer .= $tab . '<meta property="og:description" content="' . htmlspecialchars($documentDescription) . '" />' . $lnEnd; 
}
Вот и все. После всех этих манипуляций вы сможете проверить все ли вы правильно сделали воспользовавшись специальным инструментом facebook Debugger.https://developers.facebook.com/tools/debug/ . Он позволяет поверить правильность разметки и в случае чего скажет вам где у вас ошибка.

Read more →