gj |

Rich Snippet Data for Magento Product Pages Improves Google Search Results

PAJ — Fri, 18 Nov 2011 13:34:44 +0000

“Rich Snippets” are a standardised markup format used by Google to improve search results by including more specific or “rich” information relating to a web page, i.e. for product pages, price and ratings info. Google says “(we try) to present users with the most useful and informative search results. The more information a search result snippet can provide, the easier it is for users to decide whether that page is relevant to their search.”

By editing Magento product page templates we can include the Rich Snippet markup data readable by Google and improve the organic Google search results for our product pages.

There are various standards available to markup Rich Snippet Data on web pages – microdata, microformats, RDFa etc. We are going to use the microformat markup, although it does not provide as many options as other formats it does fit more easily into Magentos existing default product page design.

This Rich Snippet data will not affect the look of our product page, microformats use the `class` attribute in HTML tags (often or
) to assign brief and descriptive names to entities and their properties.

We are going to use simple microformat conventions or entities to markup our product page html so that Google spiders can read Rich data from our product information such as the price, availability or review rating of a product from all our pages.

We will implement two main microformat entities, hproduct and hreview-aggregate coded within the correct sections of our product page html so that the microformat markup looks something like:

Rich Snippet product microformat tree

How to Markup the Default Magento Theme with Rich Snippet Information

Lets start with the hproduct microformat tag. This needs to encapsulate the main product information, including product description, image, price etc. If we look at the structure of the default magento product page we can see that the html document division with the product-essential class contains all the product information that we need, so we will add the main hproduct microformat tag here by adding hproduct to the DIV class.

HTML document division containing Magento product information

hproduct

Open up your Magento theme template folder, browse to /template/catalog/product and open up view.phtml for editing. Here you will find the html document division with the class product-essential, we simply append the new hproduct microformat class to it to add the hproduct rich snippet tag.

item fn

Within our microformat markup tree we now want to markup the product item, price and image sections of our Magento product html.

Still looking at view.phtml within the product-essential div we will find the product-name division. Here we will add the item fn microformat tags to markup the product name.

description

Within view.phtml we can also add the markup for the microformat description tag. An ideal place for this is the quick overview html division where we can simply append the description tag to the existing DIV class.

productAttribute($_product, nl2br($_product->getShortDescription()), 'short_description') ?>

price

To markup the product price open up price.html in the same folder. This template file is responsible for returning product pricing in all areas of the Magento frontend. You will notice that all the pricing document divisions already have the class name price. We don’t need to change anything here. However if you want to include the price-range microformat tag you can include it here by adding it to the divisions with the class name price-box.

image

To tag the product image navigate to the template/catalog/product/view folder and open up media.phtml for editing. Here you will see the product image html. The product image URL is specified within an IMG tag that has the ID “image”. Simply add a new class to the IMG tag with the name photo fn.

$_img = 'helper...

hreview-aggregate

The most effective data we can microformat tag is the product review and rating data which will be displayed in Google search results showing our Magento product rating information. This data is encapsulated within the hreview-aggregate tag.

Navigate to the template/review/helper folder and you will see two files responsible for rendering review and rating html. summary.phtml and summary_short.phtml. Open up summary.phtml for editing.

First we need to add the hreview-aggregate tag to the html division that contains the rating data for the product. Here you will see the DIV with the class name ratings. Append the hreview-aggregate tag to this DIV class name.

Next you will see that Magento already uses a division with a class name of rating. This will confuse Google as the microformat name we want to use is also “rating”. However there is a method to work around this using a SPAN class. Edit the existing rating division to include the new SPAN element as show below.

count

Now we markup the number of reviews the product has received with the count tag. Still within summary.phtml we add a SPAN element with the class name count to the existing code.

        
			getReviewsCount()?>__(' Review(s)') ?>
            |
            __('Add Your Review') ?>

author

Finally lets consider the author tag. To identify the author of a blog or article, Google checks for a connection between the content page (such as an article), an author page, and a Google Profile. I am unsure if any real benefit will come from applying the author tag to your product content but for completeness one way to do it is to add the author tag to a link in the footer of your Magento pages. i.e.

g a i t e r j o n e s / __('(ver. %s)', Mage::getVersion()) ?>

Testing

After saving all our edited files, we can check whether our product pages are returning rich snippet data using the Google Rich Snippet Testing Tool. Goto the testing page and enter the URL of a product page from your Magento site.

Google Rich Snippet Testing Tool Magento Product Preview

The rich snippets testing tool will show you all the rich snippet data for your product page including information that comes from non microformat tags such as Meta tags or Facebook Open Graph tags. Make sure you are making best use of these tags too to ensure that Google is gleaning as much useful SEO information from your pages as possible.

Conclusion

The main question now is will Google use our Rich Snippet data in search results and how long will it take before the Rich Snippet data shows up* – SEE UPDATE BELOW!

I am still unsure if Rich Snippet data is being used across all Google search engines and countries at this moment. The data will certainly not show up until your site is spidered, and there is no guarantee it seems that even when Google has your RIch Snippet data if they will use it or not in search results – Google says “Note that there is no guarantee that a Rich Snippet will be shown for this page on actual search results.” The FAQ page which was written in 2010 seems to suggest the use of Rich Snippet Data is limited and suggests that interested users complete an “interested in Rich Snippets” form. See the Rich Snippets Google FAQ for more infomation.

If and when Rich Snippet data is widely used by Google in search results it certainly can’t do any harm to ensure your Magento product pages are ready!

* UPDATE

I wrote this blog entry on 18th November 2011 and around the same time implemented rich snippet data in one of my webshops I just performed a Google search for one of our products today (8th December) and the rich snippet product review data is now being shown. So it took approximately three weeks for Google to pick up the new rich snippet data in our Magento products and reflect them in relevant search results.

Magento Product Social Media Marketing Part 1 – the Facebook Like Button

PAJ — Wed, 23 Feb 2011 13:44:55 +0000

What is Social Media Marketing? According to Wikipedia its “a means to gain customer and competitive insight, recruitment and retention of new customers/business partners, and a method of managing their reputation online.” It is a powerful way to create social exposure for your products and boost traffic to your site.

Twitter, Facebook and Youtube are the most popular social networking destinations, I’ve already looked at how to automatically generate product marketing Tweets for Twitter, so let’s now turn our attention to Facebook and look at ways to integrate product information from a Magento eCommerce store into the Facebook Social Graph by implementing the Facebook Like Button on all Magento product, category or cms pages.

You will have seen the Facebook Like Button everywhere, but what exactly is it? Facebook calls the Like Button a Social Plugin that “…lets a user share your content with friends on Facebook. When the user clicks the Like button on your site, a story appears in the user’s friends’ News Feed with a link back to your website.” The Like Button is both simple and powerful. The concept is simple, Facebook users click the Like button to “like” something and indicate its cool to their friends. Their friends see the link they have liked in their Facebook news feed and are therfore also encouraged to click it. When the Like Button is integrated into your eCommerce store, the Facebook user (customer) indicates their confidence, satisfaction etc in your products by clicking the Like Button creating a great marketing opportunity for you by sharing your products with all of their friends. But there is more to it than that, because clicking the like button also integrates your product page into the Facebook “Open Graph” database. Facebook says “If you include Open Graph tags on your Web page, your page becomes equivalent to a Facebook page. This means when a user clicks a Like button on your page, a connection is made between your page and the user. Your page will appear in the “Likes and Interests” section of the user’s profile, and you have the ability to publish updates to the user. Your page will show up in same places that Facebook pages show up around the site (e.g. search), and you can target ads to people who like your content.” Facebook is attempting to assimilate the Internet into its own Database ultimately turning all Internet pages into Facebook Open Graph objects. With a user base of around 400 million, whether you are a Facebook fan or not this marketing opportunity should not be neglected!

On Sunday 27th February 2011 Facebook altered the functionality of the Like button to replace the functionality of the Share button. The “Share” button will see no further development according to Facebook Spokeswoman Malorie Lucich. The company will continue to support the Share button but Like is the “recommended solution moving forward.” The main difference users will now see is that likes to external content are shown in profiles and news streams as “user likes a link TO EXTERNAL CONTENT” instead of “user likes EXTERNAL CONTENT”. The latter still applying for content hosted on Facebook.

Implementing the Like Button with Magento is relatively simple and there are extensions available from Magento Connect (even a free one!) the most important aspect of implementing the Like Button is getting the Open Graph data right to ensure that your products are “assimilated” correctly into Facebook with a unique and constant URL, product title, image and meaningful SEO rich description. Check out the extensions with that in mind, if you want to implement the Like Button yourself within Magento 1.3, 1.4 or 1.5 here’s how I did it. I strongly recommend you develop your Facebook Like button on a development server and not your live site!

Go Canonical

The Like Button requires a unique URL to identify your product page in the Facebook Open Graph database. Magento is notorious for creating duplicate content, generating mulitple URLs for the same product content so it is also good SEO practice to implement the canonical URL tag within the header of your site to tell search engines which URL they should use for your products to avoid duplicating search engine content. The canonical URL is perfect for the Facebook Open Graph URL tag. In Magento 1.4.x and above Canonical URLs are included in the core code, for Magento 1.3.x use the Yoast canonical URL extension its free and installs quickly and easily. Here’s how to install the extension under 1.3.

Magento Community Edition 1.3.x

You can find the Yoast canonical URL extension on Magento Connect note there are issues with this extension if you already use the Fooman Speedster module that you need to workaround.

I installed it under Magento 1.3.x using the command line PEAR installer :

dev/magento1-3-3-dev# ./pear mage-setup
Running initial setup...
config-set succeeded
Channel "connect.magentocommerce.com/core" is already initialized
Channel "connect.magentocommerce.com/community" is already initialized

dev/magento1-3-3-dev# ./pear install magento-community/canonical_url-1.3
downloading canonical_url-1.3.tgz ...
Starting to download canonical_url-1.3.tgz (3,866 bytes)
....done: 3,866 bytes
install ok: channel://connect.magentocommerce.com/community/canonical_url-1.3

Refresh the Magento cache to enable the extension.

Magento Community Edition 1.4.x, 1.5.x

Magento 1.4 and 1.5 now support the canonical tag “out of the box”. To enable the tag for the category and product pages go to: System=>Configuration=>Catalog=>Search Engine Optimization and enable: Use Canonical Link Meta Tag For Products (and if you want – Use Canonical Link Meta Tag For Categories) :

Enable canonical Meta Tag in Magento 1.4, 1.5

Confirm the Canonical Tag is correct

Check the Canonical Tag is working by browsing to a product and checking the source HTML. In my demo store with Magento 1.3.x or with the Canonical Tag option deactivated in Magento 1.4, 1.5 the Nokia 2610 product page shows the category/product url http://dev.webshop.com/electronics/cell-phones/nokia-2610-phone.html, with the Yoast extension or canonical Meta Tags activated there is a more SEO friendly canonical link URL :

http://dev.webshop.com/nokia-2610-phone.html” />

Configure the Open Graph Meta tags

Now we have a static canonical URL for our products we need to configure the Open Graph meta tags Facebook will use to convert our page into a Facebook Open Graph object. Facebook says “The (Open Graph Meta) tags allow you to specify structured information about your web pages. The more information you provide, the more opportunities your web pages can be surfaced within Facebook today and in the future.”

Before we can add the meta tags we need to add the xmlns:fb -attribute to the xml name space element in our HTML header, this is so that Internet Explorer browsers can understand the Open Graph tags.

Locate the main /template/page folder for your Magento theme, for the default theme this is located in app/design/frontend/base/default/template/page for Magento 1.4.x, 1.5.x and app/design/frontend/default/default/template/page for Magento 1.3.x.

Open the main HTML template phtml file for your theme e.g. 2columns-right.phtml and locate the line of code with the opening HTML element:

Change this to

Now in the template/page/html folder open the head.phtml file and add the following code and Open Graph meta tags for your version of Magento directly under the existing META tags. (Double click the code boxes and and use CTRL-C to copy the code.)

Magento Community Edition 1.3.x with Canonical URL Extension














getLevel() ?>
getId()  ?>
getRequest()->getParam('id', false)  ?>





getHeadProductUrl()): ?>


",", ",substr(Mage::registry('current_product')->getDescription(), 0, strpos(Mage::registry('current_product')->getDescription(), '.')+1))) ?>"/>








getImageUrl()=="")): ?>







getIdentifier() == 'home'  && Mage::app()->getFrontController()->getRequest()->getRouteName() == 'cms' ) : ?>

Magento Community Edition 1.4.x, 1.5.x














getLevel() ?>
getId()  ?>
getRequest()->getParam('id', false)  ?>





helper('catalog/product')->canUseCanonicalTag()): ?>


",", ",substr(Mage::registry('current_product')->getDescription(), 0, strpos(Mage::registry('current_product')->getDescription(), '.')+1))) ?>"/>








getImageUrl()=="")): ?>







getIdentifier() == 'home'  && Mage::app()->getFrontController()->getRequest()->getRouteName() == 'cms' ) : ?>

First we add the site default OG Meta Tags including two Facebook tags to identify the Facebook admininstrator ID for this content and an associated Application ID. Add your Facebook account ID and app ID here. To register a Facebook application simply login to Facebook, goto http://www.facebook.com/developers/apps.php and click on the “Set up new app” button. Give your app a name and set the domain name for the app – the domain name must match the domain the Like button is installed on for it to work, and save it. In the application settings or on the MyApp page you will see your Application ID number.

The information in these tags will be used by Facebook when they “scrape” your page the first time someone clicks on a product page Like Button.

Then we specify the Open Graph tags that will appear when we detect a product, category or cms pages. For CMS pages you need check for each CMS page name you wish to place a like button on, i.e. in the code example we are checking for a page called “home”. For CMS pages you need to also manually set the URL to an image. For category and sub category pages we can check for a configured category image, if non exists then use a manually configured default image. For products we will take the default image from the product. Bundled products are not currently being detected, will need to work on a solution for that…

If you want to include specific OG Meta tags for a page with a specific url then use.

helper('core/url')->getCurrentUrl() === 'http://www.mystore.com/my-specific-page-url.htmll') : ?>

Edit the open graph data for your own requirements and add or remove more tags as you wish. The name, description and URL tags for product and category pages can be populated automatically. The URL for products comes from our canonical URL extension and the product description uses the same method I used for SEO description meta tags, to create a meaningful description to use within Facebook from the product long description text. The same method could be used for category pages too, for CMS pages you may need to manually enter the description for each CMS page you want a Like Button to appear on, and check for the page name using the code above.

More information on the Open Graph tags can be found here.

Save your files and refresh a product page. Check the source HTML to check that the Open Graph tags have been populated correctly for product, category, sub category and cms pages i.e. :

Add the Magento Facebook Like Button – XFBML or IFrame?

Now we are all prepared to add our Like Button. You can render the Like Button and javascript code using two methods, XFBML or Iframe. There are pros and cons to both and you might already be averse to using Iframes on your pages. They both achieve the same result with the main difference being that the XFBML is slightly more versatile (and also perhaps quicker) allowing for a comment to be left after you have clicked the button, and also providing methods to trigger actions after the click.

Best practice recommends using XFBML but there is another reason for using the Iframe version that might interest you. If you sell the same product in multiple stores for example a Retail and a Wholesale store and the stores have different domains then using XFBML will result in two entries for the same product within Facebook because the domain name in the URL for the product must match the domain name of the page that executes the XFBML code. Using the Iframe method allows us to specify the domain ourselves and due to the nature of an Iframe Facebook has no way of confirming if it matches the domain of the parent page of the Iframe or not. Another way to illustrate this is that if you develop your XFBML Facebook Like button on your development server and make test “Like” clicks on product X, Facebook will see this as http://your.develeopment.server/productX when you move the code to your live server, your “Likes” will be lost because Facebook will now register a new Open Graph object at http://your.live.server/productX. Whereas using the Iframe we can specify http://your.live.server/productX as the URL both on the live and development server.

Magento Facebook XFBML Like Button

Lets implement the XFBML version first. To add the Like Button to our product pages we need to locate view.phtml in the /template/catalog/product folder of our theme. Open view.phtml and look for the element or div that renders the product-name, around about line 50. We can locate the Facebook like button directly under the product name in the default theme, or you can locate it where you wish on your themes product page either by moving the code or positioning the button using a CSS class. Add the following code first :

This defines how our button looks and there are various options that you can experiment with to get the button you want. Note the DIV ID (or class) can be changed/added to whatever you want to style or move the button within the page. Take a look at http://developers.facebook.com/docs/reference/plugins/like/ to experiment with the different button style options available. This is what they look like with standard, button count or box count layout styles :

Examples of different Like Button render options

Now we need to pull the Javascript SDK code from Facebook. Facebook says “The most efficient way to load the SDK in your site is to load it asynchronously so it does not block loading other elements of your page. This is particularly important to ensure fast page loads for users and SEO robots/spiders.” To access the SDK requires your Facebook application ID from Facebook. We can set the Like Button language with a locale code, add a translation for en_US to your Magento language files to change the language to match your store i.e. de_DE for German.

Add the following code next with your Facebook APP id, you can add it directly after the Button code on your product page if you will only be using like buttons on product pages. Or add it to your header.phtml template file to load it with every Magento page.

Notice that the Javascript code performs a protocol check to ensure that the link to Facebook matches the protocol of the page, i.e. HTTP or HTTPS, this is important when linking to external content to avoid browsers security errors when using an SSL connection.

Testing

Save your changes and refresh your product page to see your shiny new Like Button. Remember you should test all the popular browsers to ensure the code is working and the button displays correctly. Your browser tests should include, Internet Explorer, Firefox, Chrome, Opera and Safari and remember to test HTTPS access too. I also recommend that you check how your page looks to crawlers like Google Bot, an error in the header of your page may render ok for normal browsers but not for a crawler bot. You can also do a page fetch test from within Google Webmaster Tools. I learned this the hard way with a site becoming deindexed in Google due to a error in the header PHP code that was only being triggered by crawler Bots!

Like Button - Magento 1.3.x Product Page Example

Go ahead and click on it (if you like it!) This will trigger Facebook to scrape your page and the “Like” should appear in your Facebook profile feed with the image, and title from your Open Graph tags.

Facebook Marketing Like - example news feed post

To add the Like Button to a category page add the same Button code above to locate view.phtml in the /template/catalog/category folder of your theme. Open view.phtml and look for the element or div that renders the category-name and add the code just below it. Note that depending on your theme there will be multiple occurences of the category name for different category views in this file.

Magento Facebook Like button category page example

Remember for Facebook to scrape your page the URL must be valid and accessible from the Internet, so if you are working on a development server it must be also accessible from the Internet. It can take a while for the Open Graph data to be collected and to appear correctly in Facebook. If you want to manually check that your Open Graph data is accessible use the Facebook Lint tool at http://developers.facebook.com/tools/lint. Enter the canonical URL of a product page and Facebook will return the scraped Open Graph meta data for you to verify.

Verify Open Graph meta data with the Facebook Lint Tool

Magento Facebook IFrame Like Button

For completeness lets also look at implementing the Like Button using an IFrame, remember this can be useful because it allows cross domain Like buttons, i.e. buttons for the same content that will work when served from different website domains.

Unlike the XFBML code, the IFrame must specify the Like URL within the IFrame element so for Magento 1.3.x we need to generate the IFrame code in the header so that we can call the Canonical URL extension code. Add the following code at the end of head.phtml for Magento 1.3.x

For Magento 1.4.x and 1.5.x you can either add the IFrame code directly to view.php or call it with the Javascript function in head.phtml. To use the Javascript function add the following to head.phtml

This code generates the IFrame html using a Javascript function that is called from the product page. Note that to keep the URL constant we replace the base host and domain name to be used for the Like Button with the domain name of the host site (or whatever we want). Edit www.YOUR-DOMAIN.com to match the URL of your site/store.

Now open up view.phtml and as with the XFBML solution add the following code after the product name, or wherever you want within the product view page of your theme.

This simply calls the Javascript function created in head.phtml which returns the HTML for the IFrame. For Magento 1.4, 1.5 you can also replace the script code directly with the IFrame code in view.phtml:



getBaseUrl(), "http://www.YOUR-DOMAIN.com/", trim(Mage::registry('current_product')->getProductUrl())); ?>&locale=__('en_US') ?>&layout=button_count&show_faces=false&width=150&action=like&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:150px; height:21px;" allowTransparency="true">

Refresh the product page to see the IFrame version of the Like Button.

Positioning the Facebook Like Button

To style the button or to adjust its position on the product view page wrap the Facebook code in a DIV i.e. “facebook_like_product_button” and create a matching style CSS ID or class. For example to pad the button out a little add the following to your CSS:

/*Facebook Like Button*/
#facebook_like_product_button {
padding-top: 1em;
}

Like Button for your facebook page

If you want your main home page like button to Like an existing Facebook page simple modify the Like button code to include the URL of your Facebook page:

Conclusions

Now that the like button is working you will want to check which products are receiving button clicks, use the Facebook Insight tool to look at the statistics for your product page Likes – http://www.facebook.com/insights/ You may need to first click the green “statistics for your domain” button to link your domain to your Facebook profile. You can also integrate reporting into Google Analytics, see the blog post below. Topics for another post include how to target customers that have liked your products individually by sending them specific product updates via Facebook.

Note that the code posted here was tested with Community Editions of Magento only.

In part two of this Social Media Marketing for Magento tutorial we will integrate 300+ more Social Marketing destinations into Magento product pages using the AddThis toolbar.

Magento SEO – Generate META Description Tags Automatically

PAJ — Mon, 10 Jan 2011 17:04:57 +0000

Whilst some may argue that the META description tag has little SEO value, it is used by search engines to compile page “snippets” that are displayed next to the search results, and these snippets should contain meaningful and good SEO content. When you add a new product in Magento you need to think about your SEO keywords, page title and META tag content. If you have a lot of products and have not created META description tag content for them then it can be a lot of work to update all the products maually, and more work to keep them up to date. There are a couple of ways to make this easier, you can export all your products, and edit the META description for each product and then reimport them into Magento which is a very slow process, or you can automatically create the META description based on your products long description, your products should at least have good descriptions!

Product descriptions in our Magento shop usually contain the product name in bold type on the first line, followed by a few good SEO keyword rich product description sentences. We can use this product description to create a nice META description tag with just a few lines of code in the head.phtml template file of your theme.

For example, if we look at the sample database products, the Nokia 2610 product description looks like this

Sample database product description

The description META tag from the sample database for this product looks like this “Offering advanced media and calling features without breaking the bank, The Nokia 2610 is an easy to use”

How about we use the product name and the first sentence from the description as the product description META tag for all our products? This can easily be accomplished by replacing the META description tag code in head.phtml located in your themes template/page/html/ folder.

Replace:

With:


",", ",substr(Mage::registry('current_product')->getDescription(), 0, strpos(Mage::registry('current_product')->getDescription(), '.')+1)))=="") : ?>
getDescription()).'" />' ?>

",", ",substr(Mage::registry('current_product')->getDescription(), 0, strpos(Mage::registry('current_product')->getDescription(), '.')+1))).'" />' ?>


getDescription()).'" />' ?>

This code will first check that we are working with a product page, it then takes the long product description text, replaces the first html line break with a comma, extracts the text to the first full stop and then strips out any markup tags. If the resulting description is empty then we revert to using the normal product META description.

The resulting slightly better looking META description tag for our product now looks like this “Nokia 2610 Phone, The Nokia 2610 is an easy to use device that combines multiple messaging options including email, instant messaging, and more.” Google will use this as the description snippet in search results. I use this same text for my automated product marketing tweets and Facebook content too – more on that later.

All our products should now have nicely formatted META description tags. Play around with the str_replace function to extract the text you want from your product descriptions, make sure you have your main SEO keywords in both the first sentence of your product description and your HTML Title and you are now on your way to better SEO content for all your products, and good looking content for your search engine description snippets.

Automatic Magento Product Marketing Tweets for Twitter

PAJ — Tue, 28 Dec 2010 16:04:31 +0000

THIS MAGENTO HACK IS NOW A MAGENTO MODULE/EXTENSION, CLICK HERE FOR MORE INFO

Wouldn’t it be great if your customers could do your twitter product marketing for you? Thats what I thought after seeing a few automated marketing posts coming up in my twitter feed. So I set about looking at my own automated marketing tweets triggered when a customer placed an order in our Magento e-commerce store. The goal was to randomly select a product from the last order – a so called “Top Seller”, wrap it up nicely in a 140 char tweet with a URL to the product page and post it to twitter automatically from the onepage checkout success page as the customer completed checkout. After a day or so of development I came up with a solution that looks something like this on Magento 1.3.3.0 using the test database.

Example automated product marketing tweet

Step 1 – Installing in Magento

To integrate the code into Magento you can either use the onepage checkout success.phtml file to call the code after checkout, or if you have already developed your own Magento code modules you can create a new template phtml file and test the code by calling it from a CMS block in Magento i.e.

{{block type="MY_Page/view" template="Page/tweet.phtml"}}

If you use success.phtml you will need to submit an order from your webshop to test the code, if you are using CMS simply browse to the CMS page you created, i.e. http://www.mysite.com/tweet

Here is the working code to use either in your own phtml template file or to append to success.phtml in your frontend themes template files.

data->url;
		}
	elseif(strtolower($format) == 'txt') //text
		{
			return $response;
		}
}

// Get last order from Magento session.
$orderId = Mage::getModel('sales/order')->load(Mage::getSingleton('checkout/session')->getLastOrderId());
$order = Mage::getModel('sales/order')->load($orderId);
$items = $order->getAllItems();
$itemcount=count($items);
//$name=array();
//$unitPrice=array();
//$sku=array();
$ids=array();
//$qty=array();

try
{

// Build arrays, uncomment as needed to populate arrays with more order information, SKU, price etc.
foreach ($items as $itemId => $item)
{
	// $name[] = $item->getName();
	// $unitPrice[]=$item->getPrice();
	// $sku[]=$item->getSku();
	// we are only interested in the product id
	$ids[]=$item->getProductId();
	// $qty[]=$item->getQtyToInvoice();

//	echo $name[$itemId]. ' - ' .$sku[$itemId]. ' - €'. $unitPrice[$itemId]. '
';
}

	do {

	shuffle ($ids);
	$rand_keys = (count($ids) > 1)?array_rand($ids, $itemcount):array_keys($ids);
	$custom = Mage::getModel('catalog/product')->load($ids[$rand_keys[0]]);

	// Make sure the product is visible in catalog
	if ($custom->getVisibility()==4) {

	// twitter text prefix, this will appear before your product description
	$twitter_txt=$this->__('Top Seller'). ": ";

	// twitter txt URL - add a short URL to the product using bit.ly API
	$shorturl=make_bitly_url($custom->getProductUrl(),'YOUR-BITLY-USERNAME','YOUR-BITLY-API');

	// The text between our tweet and the shorturl when the tweet is longer than 140 chars
	$twitter_txt_suffix = '... ';
	$chars_remaining=140-(strlen($shorturl)+strlen($twitter_txt_suffix));

	// debugging echos comment these out when testing complete.
	// Check lengths of short url, prefix etc.
	echo $shorturl. ' is '. strlen($shorturl). ' chars.
';
	echo 'Suffix and URL are '. (strlen($shorturl)+strlen($twitter_txt_suffix)). ' chars.
';
	echo 'Characters remaining for tweet : '. $chars_remaining. '
';

	// Prepare tweet text
	$twitter_txt=$twitter_txt . strip_tags(str_replace("
",", ",substr($custom->getDescription(), 0, strpos($custom->getDescription(), '.')+1))). ' ';

	// Make sure we only tweet 140 chars or less

		if (strlen($twitter_txt) <= $chars_remaining) {
			$twitter_txt = $twitter_txt; //do nothing
		}
		else {
			$twitter_txt = wordwrap($twitter_txt, $chars_remaining);
			$twitter_txt = substr($twitter_txt, 0, strpos($twitter_txt, "\n"));
			$twitter_txt = $twitter_txt. $twitter_txt_suffix;
		}

	// Complete tweet text with short url.
	$twitter_txt = $twitter_txt. ' ' .$shorturl;

	// Get ready to tweet
	$accessToken = file_get_contents("/home/www/classes/twitteroauth/access_token");
	$accessTokenSecret = file_get_contents("/home/www/classes/twitteroauth/access_token_secret");

	// Create our twitter API object
	require_once('/home/www/classes/twitteroauth/twitteroauth.php');
	$oauth = new TwitterOAuth('YOUR-TWITTER-CONSUMER-KEY', 'YOUR-TWITTER-CONSUMER-SECRET', $accessToken, $accessTokenSecret);

	// Send an API request to verify credentials
	$credentials = $oauth->get("account/verify_credentials");
	echo "Connected as @" . $credentials->screen_name. '
';

	// TWEEET, uncomment to tweet.
	//$oauth->post('statuses/update', array('status' => $twitter_txt));

	// debugging echos comment these out when testing complete.
	echo 'Simulated tweet : ('. strlen($twitter_txt). ' chars long.)

';
	echo ''. $twitter_txt. '
';

	}

	} while ($custom->getVisibility()!=4);

// debugging use this to catch any errors, remove error message when testing complete.
} catch (Exception $ex) { echo "An Error was detected."; }		

?>

Copy and paste the code at the end of your one page checkout success.phtml file or paste it into a new template phtml file i.e. tweet.phtml.

The first function is used to create a shortened URL via the bit.ly API, for this you will need a bit.ly account and your bit.ly API key (available form the settings menu in your account). We are only really interested in the product ids from the order, but if you want to use other information in your tweet remove the comments from the array loop.

$twitter_txt contains our tweet text. It starts out with a prefix “Top Sellers” and then uses an excerpt from the Magento product description to create the rest of the tweet text.

$twitter_txt=$twitter_txt . strip_tags(str_replace("
",", ",substr($custom->getDescription(),0, strpos($custom->getDescription(), '.')+1))). ' ';

My product descriptions text always includes the product name on the first line of the long description text followed by a line break e.g.

Nokia 2610 Phone
The Nokia 2610 is an easy to use device that combines multiple messaging options including email, instant messaging, and more.

We strip out the HTML replacing the first html line break with a comma and then search for the next full stop to extract the first sentence from our description. (This is also a good technique I have used for automatic SEO meta description tags for products.) If your product descriptions do not include line breaks you will need to play with this code so that it extracts a product description that suits your requirements.

We need to make sure our tweet including prefix and short url are less than 140 chars so we use some code to check how long the tweet product description text is and shorten it if required adding a “…” suffix. Now we have our tweet text and call the Twitter oAuth code to authenticate and post the tweet. The code that makes the tweet is commented, and for testing the tweet text will be echoed out so you can easily debug your tweet and description text, the simulated tweet should look something like this:

http://bit.ly/hd6Et1 is 20 chars.
Suffix and URL are 24 chars.
Characters remaining for tweet : 116
Connected as @your-twitter-username
Simulated tweet : (135 chars long.)
Top Seller: Nokia 2610 Phone, The Nokia 2610 is an easy to use device that combines multiple messaging options... http://bit.ly/hC6Et1

Debugging the tweet text from a CMS page

See below for setting up your twitter application and installing the oAuth code.

Note that you need to have an order in the current magento session, I haven’t yet figured out how to access the last order outwith the user session, so if you don’t see anything or see the exception error echoed out make sure you are logged into your magento shop and have placed a test order.

Step 2 – Twitter PHP oAuth Code

The Twitter oAuth authentication process is complex and way beyond my programming skills, however Abraham Williams has developed the PHP code to perform the twitter oAuth authentication and posting for us. Download the code here. Open the ZIP folder and extract the twitteroauth folder to a suitable area on your development host. For example /home/www/classes. The folder contains two PHP files, twitteroauth.php and OAuth.php that are called from our code, update the script include so that the path to your oAuth files is correct.

Step 3 – Twitter Application and Access Codes

Obviously to create a twitter app you need a twitter account. Login to your twitter account and go to http://dev.twitter.com/apps/new to register a new twitter app. Complete the registration by choosing an application name, note this name will appear under your posts! Set the application type to client and make sure you set the application type to read & write.

When you have registered your application take a note of the Consumer Key and Consumer Secret. Click on the My Access Token right hand menu link and take a note of your Access Token (oauth_token) and Access Token Secret (oauth_token_secret).

Copy and paste your Twitter Consumer Key and Consumer Secret into the script.

$oauth = new TwitterOAuth('YOUR-TWITTER-CONSUMER-KEY','YOUR-TWITTER-CONSUMER-SECRET', $accessToken, $accessTokenSecret);

The Twitter Access Token and Access Token Secret can be included in plain text in the script but for security I am separating them out into two seperate files located with my oauth PHP scripts:

$accessToken = file_get_contents("/home/www/classes/twitteroauth/access_token");
$accessTokenSecret = file_get_contents("/home/www/classes/twitteroauth/access_token_secret");

So either modify the strings above to contain your access codes as plain txt i.e. $accessToken=”MY-ACCESS-TOKEN”; or create your own folder and paths to two files containing your twitter access keys in plain text.

Step 4 – Test

If you have copied the code to your success.phtml file make an order and you should see the simulated tweet with your product description on your one page checkout success page.

http://bit.ly/hd6Et1 is 20 chars.
Suffix and URL are 24 chars.
Characters remaining for tweet : 116
Connected as @your-twitter-username
Simulated tweet : (135 chars long.)
Top Seller: Nokia 2610 Phone, The Nokia 2610 is an easy to use device that combines multiple messaging options... http://bit.ly/hC6Et1

To make a test tweet uncomment the tweet statement and place another order, check your twitter account for a new tweet!

When you are happy with your tweet text, uncomment the debugging echos from the script and test again.

Example automated product marketing tweet

Conclusions and further ideas

Twitter marketing can easily become Twitter spam, depending on how many orders a day your shop is getting you may need to throttle back the number of product tweets you make, the tweet could also be handled elsewhere in the app, or from a cron job that picks a random product each day. I like the idea of the “Top Seller” from an actual order, and that the customer was actually doing the marketing work for you! You may also want to extract your parent categories to create additional hash tags for your tweets to improve search results, although this will eat up your precious 140 chars.

Some Googled resources used in creating this solution:

http://articles.sitepoint.com/article/oauth-for-php-twitter-apps-part-1
http://subesh.com.np/2010/03/ordered-items-detail-order-id-magento/

gj |

Rich Snippet Data for Magento Product Pages Improves Google Search Results

This Rich Snippet data will not affect the look of our product page, microformats use the class attribute in HTML tags (often or ) to assign brief and descriptive names to entities and their properties.

How to Markup the Default Magento Theme with Rich Snippet Information

hproduct

item fn

description

price

image

hreview-aggregate

count

author

Testing

Conclusion

Magento Product Social Media Marketing Part 1 – the Facebook Like Button

Go Canonical

Configure the Open Graph Meta tags

Add the Magento Facebook Like Button – XFBML or IFrame?

Magento Facebook XFBML Like Button

Testing

Magento Facebook IFrame Like Button

Positioning the Facebook Like Button

Like Button for your facebook page

Conclusions

More Reading

Magento SEO – Generate META Description Tags Automatically

Automatic Magento Product Marketing Tweets for Twitter

Step 1 – Installing in Magento

Step 2 – Twitter PHP oAuth Code

Step 3 – Twitter Application and Access Codes

Step 4 – Test

Conclusions and further ideas

This Rich Snippet data will not affect the look of our product page, microformats use the `class` attribute in HTML tags (often or
) to assign brief and descriptive names to entities and their properties.