Як додати кнопку Add This та Facebook like на сторінку продукту в Magento.

Соціальні мережі на даний час є однією з найбільш привабливих сфер для просування товарів та послуг. Саме тому не можна упускати можливості скористатися цим.

Соціальні закладки

Щоб полегшити користувачам ділитися знайденими цікавинками були створені сервіси соціальних закладок, які дозволяли миттєво ділитися усім корисним та захоплюючим. Сьогодні ми покажемо, як зробити так щоб продуктами з магазину можна було легко ділитися.

Додаємо кнопку Addthis  

1. Перш за все нам потрібен код для кнопки. Йдемо на www.addthis.com та дотримуючись інструкцій генеруємо потрібний нам код.

<!-- AddThis Button BEGIN -->
<a class="addthis_button" href="http://addthis.com/bookmark.php?v=250&amp;username=xa-4c2afe6111eb2ab2"><img src="http://s7.addthis.com/static/btn/v2/lg-share-en.gif" width="125" height="16" alt="Bookmark and Share" style="border:0"/></a><script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4c2afe6111eb2ab2"></script>
<!-- AddThis Button END -->

2. Створюємо CMS Block, називаємо його «Addthis Button», задаємо йому ID «addthis» (більше про статичні блоки можна прочитати тут) та додаємо йому в поле Content отриманий код.

3. Об’являємо блок в catalog.xml там де створюється catalog_product_view

<catalog_product_view>
	 <reference name="content">
            <block type="catalog/product_view" name="product.info" template="catalog/product/view.phtml">
				...
				<!-- Додаємо блок -->
				<block type="cms/block" name="addthis">
					<action method="setBlockId"><block_id>addthis</block_id></action>
				</block>
				<!-- Додаємо блок -->
				...
			</block>
	 </reference>
</catalog_product_view>

4. Йдемо в app/design/frontend/your_package/your_thema/template/catalog/product/view.phtml

та викликаємо блок у потрібному нам місці наприклад після опису продукту:

...
<?php if ($_product->getShortDescription()):?>
	<h4><?php echo $this->__('Quick Overview') ?></h4>
	<div class="short-description"><?php echo $_helper->productAttribute($_product, nl2br($_product->getShortDescription()), 'short_description') ?></div>
<?php endif;?>
<!-- Викликаємо блок -->
<?php echo $this->getChildHtml('addthis') ?>
<!-- Викликаємо блок -->
...

5. Тремо кеш, якщо він у нас увімкнений і все готово.

Додаємо кнопку Facebook like 

Робимо аналогічно до того як робили з Addthis.

1. Йдемо на http://developers.facebook.com/docs/reference/plugins/like і генеруємо код. Маємо отримати щось на зразок цього:

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fexample.com%2Fpage%2Fto%2Flike&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>

2. Створюємо блок «Facebook button» з ID «facebook».

3. Об’являємо блок в catalog.xml

<catalog_product_view>
	 <reference name="content">
            <block type="catalog/product_view" name="product.info" template="catalog/product/view.phtml">
				...
				<!-- Додаємо блок -->
				<block type="cms/block" name="facebook">
					<action method="setBlockId"><block_id>facebook</block_id></action>
				</block>
				<!-- Додаємо блок -->
				...
			</block>
	 </reference>
</catalog_product_view>

4. Йдемо в app/design/frontend/your_package/your_thema/template/catalog/product/view.phtml

та викликаємо блок:

<!-- Викликаємо блок -->
<?php echo $this->getChildHtml('facebook') ?>
<!-- Викликаємо блок -->

5.Тремо кеш, якщо він у нас увімкнений.

Звичайно можна не морочити голову і просто прописати отримані шматки коду прямо в view.phtml, але у цьому випадку ми втрачаємо зручність модифікації та вимкнення даної опції. Власнику сайту не буде потрібно дзвонити вам і просити забрати кнопку чи змінити її, це можна буде з легкістю зробити в Панелі Адміністратора просто поредагувавши або відключивши потрібний блок.

---

Сподобалася стаття? Підпишись на RSS або на e-mail розсилку. А ще приєднуйся до нас у Твітері @magentoua.

Вам також буде цікаво прочитати:

• Magento Widgets
• Чекліст для розробника магазину на Magento
• Як вивести список популярних продуктів на головній сторінці магазину в Magento?