Домівка > How to (як зробити?), Magento > Як додати кнопку Add This та Facebook like на сторінку продукту в Magento.

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

[tweetmeme source=”magentoua” only_single=false https://magentoua.wordpress.com/2010/07/01/add-social-bookmarks%5D
Соціальні мережі на даний час є однією з найбільш привабливих сфер для просування товарів та послуг. Саме тому не можна упускати можливості скористатися цим.

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

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

Додаємо кнопку 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.

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

Advertisements
Категорії:How to (як зробити?), Magento Позначки:, , , , ,
  1. unix
    Вересень 8, 2010 о 13:51

    Доброго часу доби!
    Тут ви описуєте спосіб додавання кнопки Like через iframe, чи не маєте робочого прикладу додавання цієї самої кнопки але через JavaScript SDK від FaceBook?

  2. Вересень 8, 2010 о 14:06

    unix :
    Тут ви описуєте спосіб додавання кнопки Like через iframe, чи не маєте робочого прикладу додавання цієї самої кнопки але через JavaScript SDK від FaceBook?

    На жаль робочого прикладу немає. Не доводилося прикручувати через JavaScript SDK.

  3. Maks
    Вересень 28, 2010 о 14:11

    А як айфрейму передати посилання на поточний продукт?

    • Вересень 28, 2010 о 14:26

      URL продукту у view.phtml можна отримати за допомогою:

      <?php echo $_product->getProductUrl() ?>
      

      Але для цього ми не можемо використовувати CMS блок для нашого коду, прийдеться код з кроку 1 вносити в view.phtml бо в статичному блоці не вдасться передати урл 😦

  1. Грудень 6, 2010 о 09:52

Залишити відповідь

Заповніть поля нижче або авторизуйтесь клікнувши по іконці

Лого WordPress.com

Ви коментуєте, використовуючи свій обліковий запис WordPress.com. Log Out / Змінити )

Twitter picture

Ви коментуєте, використовуючи свій обліковий запис Twitter. Log Out / Змінити )

Facebook photo

Ви коментуєте, використовуючи свій обліковий запис Facebook. Log Out / Змінити )

Google+ photo

Ви коментуєте, використовуючи свій обліковий запис Google+. Log Out / Змінити )

З’єднання з %s

%d блогерам подобається це: