Magento plugin

There are three ways to add "social wall" to your store:


Please Note

Installation and getting started
  1. Check that your Flockler installation meets the technical requirements
  2. Download the extension from Magento Marketplace: https://marketplace.magento.com/flockler-flockler-flockler.html
  3. Install the Flockler Social Wall extension to your Magento Store by
    a) Unzipping the extension archive to your Magento installation folder (e.g. /var/www/html) (WARNING! Make sure not to remove any existing directories or files!) or
    b) Using Modman (extension archive includes a modman file)
  4. On Magento: Go to 'Flockler' on Magento admin and select 'Webhooks'.
  5. On Magento: Click 'Add New Webhook'. Give a name that describes the content. Copy the URL of the newly created webhook.
  6. On Flockler: Click 'Settings' on the menu and select 'Webhooks' tab. Click 'Create new webhook', paste your webhook URL to field and copy secret code displayed on step 2.
  7. On Magento: Copy-Paste the secret code to the 'Secret' field and click 'Save Webhook'.
  8. On Flockler: Select, if you'd like to publish only the content collated on Flockler in the future or publish all the content already collated on Flockler (and all future content) to your Magento store.
  9. On Magento: You'll see your content when you go to 'Flockler' on Magento admin and select 'Posts' (screenshot)
Updating
  1. Download the latest version of Magento plugin
  2. Update the Flockler Social Wall plugin to your Magento Store by
    a) Unzipping the latest extension archive to your Magento installation folder (e.g. /var/www/html) (WARNING! Make sure not to remove any existing directories or files!) or
    b) Using Modman (extension archive includes a modman file)

Option 1: Add as a widget to a static page

The easiest way to add Flockler Social Wall to your store is to add it as widget to any of your "static pages" (screenshot).

  1. Go to edit the page you want to add the widget. In Magento admin click 'CMS' and select 'Pages'
  2. Select the page and select content on the left.
  3. Choose a good place for your Flockler Social Wall and click "Insert widget…"
  4. Select "Flockler Wall" and define content by defining Site ID, Section ID or Tags that already have posts retrieved in your Magento store.
  5. Change the layout parameters (Items per page, Item width and Show Load More) if necessary
  6. Click "Insert Widget"
  7. Then save the page by clicking "Save and Continue"
  8. Check out the page and admire the new Flockler Social Wall content block!

Generated widget code:

{{widget type="flockler_flockler/Wall" section_id="15411"}}

Option 2: Product or category specific wall

Flockler Social Wall can be integrated also into your store's layout and templates in order to get dynamic, category or product specific, wall content. That way you can show related posts right next to your product or category.

Add content first

When wall is placed on a product or category page it's content is defined by that specific product's or category's content parameters. If you want to add a static wall to your product or category page, please use "Option 3: Customize wall into your theme"

If no posts match to those criteria, the wall is not shown at all.

Set layout parameters

When integrating the "wall block" into your layout files you need to give the layout parameters as a part of your <block> definition through the following <action>-tag methods:

It may look something like this: <action method="setWidth"><value>500</value></action>

Example 1: Add wall into bottom of product page (screenshot)

Add this to your local.xml layout file:

// app/design/frontend/base/default/layout/local.xml

<?xml version="1.0" encoding="UTF-8"?>
<layout version="0.1.0">

<catalog_product_view>
  <reference name="content">
      <block type="flockler_flockler/wall" name="flockler.wall" as="wall">
        <action method="setWidth"><value>33%</value></action>
      </block>
  </reference>
</catalog_product_view>

</layout>

Example 2: Custom place on product pages (screenshot)

Add this to your theme's layout file:

// app/design/frontend/rwd/default/layout/catalog.xml

...
<catalog_product_view>
  <reference name="product.info">
      ...
      <block type="flockler_flockler/wall" name="flockler.wall" as="wall">
        <action method="setWidth"><value>50%</value></action>
        <action method="setCount"><value>2</value></action>
        <action method="setShowLoadMore"><value>0</value></action>
      </block>
      ...
  </reference>
</catalog_product_view>
...

And this to the template:

// app/design/frontend/rwd/default/template/catalog/product/view.phtml

...
<?php echo $this->getChildHtml('wall') ?>
...

Note: When selecting place for your wall please keep in mind that it needs an area of at least 1050px to show three posts side-by-side and 700px to show at least two.


Option 3: Customize wall into your theme

If you want to add a wall in a specific place in your store, you can also render it as a widget on one of your theme's templates. That way you need only few lines of code and you can set all the parameters in a same place. The {{widget ...}} shortcode is the same that you create on "Option 1: Add as a widget to a static page" with "Insert widget..." wizard.

// app/design/frontend/rwd/default/template/catalog/product/view.phtml
...
<?php
    echo Mage::getModel('widget/template_filter')->filter(
      '{{widget type="flockler_flockler/Wall" section_id="15411" item_width="50%"}}'
    );
?>
...

Parameters

You must supply one of these parameters:

Layout parameters

The following optional parameters are supported:

Please note that with the social wall, you’ll need an area of at least 1050px to show three posts side-by-side and 700px to show at least two.

Setting parameters

Content and layout parameters: widget

Both content and layout parameters for widget are defined through Magento Admin "Insert widget..." wizard which generates a shortcode something like this:

{{widget type="flockler_flockler/Wall" section_id="15411" tags="camera,some" item_count="4" item_width="400" show_load_more="false"}}

Content parameters: category page

Content of category specific wall can be defined in Magento Admin category settings. To get there browse to: Catalog > Categories > select category > Flockler.

Note: In addition to content parameters there's "Disable category name as tag" dialog in the category settings. By selecting "Yes" you can disable the automatic functionality to render all the posts tagged with the category name to the wall.

Content parameters: product page

Content of product specific wall can be defined in Magento Admin product settings. To get there browse to: Catalog > Products > select product > Flockler.

Layout parameters: product and category page

Defining the layout parameters for category or product page ("Items per page", "Item width" and "Show Load More") please refer to the instructions in "Option 2: Product or category specific wall"

Wall Settings Logic

Here's a brief description of the logic how the content parameters work and which posts are rendered on the wall:

  1. Site ID, Section ID and Tags criteria are processed with an "AND operator". It means that post has to match to all those criteria in order to be rendered to the wall.
  2. If Tags field include many tags, they are processed with an "OR operator". It means that if post is tagged with any of the tags it is rendered to the wall.
  3. Category wall: All the posts tagged with the name of the category are automatically included to the wall.
  4. Category wall: The 3rd rule can be disabled by selecting "Yes" in the "Disable category name as tag" dialog in category wall settings.
  5. Product wall: If product doesn't have any own wall-settings, product wall gets content from the walls of the categories this product belongs to.
  6. Product wall: If product has its own specific wall settings, none of the category wall settings apply.

Technical requirements


Known issues