Social Integrator for Magento 1 OpenMage

Complete Social Integration With Just A Few Clicks!

Apptrian Social Integrator extension for Magento adds Open Graph, Google Rich Snippets (Schema.org) in JSON-LD format, Pinterest Rich Pins, Twitter Cards, Social Buttons, and Icons on Product, Category, Home, and CMS pages. The extension also supports the AddThis social bookmarking service. There are dozens of options for customization. This extension provides your Magento site not only with visual and social improvements but also has great SEO value.

Features

General Settings

• The Easy way to enable or disable the extension.
• The Easy and proper way to include (or not) APIs needed for social buttons/plugins:
  • Facebook JavaScript SDK
  • Google platform.js
  • Instagram follow.js
  • Linkedin in.js
  • Pinterest pinit.js
  • Twitter widgets.js
• Easy way to integrate AddThis social bookmarking service.

Open Graph (for product, category, home, and cms pages)

• Easy way to enable or disable Open Graph.
• Multiselect option to add Open Graph for product, category, home, and/or cms pages.
• Option to type in Facebook Administrator IDs (fb:admins).
• Option to type in Facebook App Id (fb:app_id).
• Option to select category image or not, and what image to use for Category Image (og:image) meta tag. Options are "Do not show", "Image", and "Thumbnail".
• Products will use the full-size primary image for (og:image) meta tag.
• Product pages are done as Product objects while Category and CMS pages are done as Article objects.
• All other data needed for Open Graph meta tags is parsed from Magento and tags are generated automatically.
• Option to choose CMS Page object type (og:type). (article or website)
• Option to choose Home Page object type (og:type). (article or website)

Google+ and Google Rich Snippets (Schema.org) (for the product, category, home, and cms pages)

• Easy way to enable or disable Google+ and Google Rich Snippets (Schema.org) in JSON-LD format.
• Multiselect option to add Google+ and Google Rich Snippets for product, category, home, and/or cms pages.
• Option to type in Author Google+ Url (<link rel="author").
• Option to type in Publisher Google+ Url (<link rel="publisher").
• All other data needed for Google Rich Snippets is parsed from Magento and Schema.org JSON-LD objects are generated automatically.
• Option to type in Author Name (author.name).
• Option to select category image, and what image to use for Category Image (ImageObject). Options are "Image", and "Thumbnail".
• Products will use the full-size primary image for (ImageObject).
• Product pages are done as Product objects.
• Option to choose Category Page object type (Article or WebPage).
• Option to choose CMS Page object type (Article or WebPage).
• Option to choose Home Page object type (Article, WebPage, or WebSite).
• Option to limit the number of ImageObjects.
• Option to type in Publisher Name (publisher.name).
• Option to upload Publisher Logo (publisher.logo) image.
• Option for product Rating Normalization. Enabling this option will convert the product rating to the default Google rating (0 to 5) instead of (0 to 100).

Pinterest Rich Pins (for the product, category, home, and cms pages)

• Easy way to enable or disable Pinterest Rich Pins.
• Product pages are done as Product objects while Category and CMS pages are done as Article objects.
• All other data needed for Pinterest Rich Pins meta tags are parsed from Magento and tags are generated automatically.
• Pinterest Rich Pins are using Open Graph meta tags to implement their functionality, therefore Open Graph must be enabled in order for Pinterest Rich Pins to function.
• Please take a look at our genuine Pinterest Rich Pins example.

Twitter Cards (for product, category, home, and cms pages)

• Easy way to enable or disable Twitter Cards.
• Multiselect option to add Twitter Cards for product, category, home, and/or cms pages.
• Option to type in Website's Username (twitter:site)
• Option to type in Creator's Username (twitter:creator)
• Option to type in Domain Name (twitter:domain)
• Option to select data to be used as Secondary Data (twitter:data2) for product cards. Available options are "Category", "Location", and "Website".
• Option to select the type of Category Twitter Card (twitter:card). Available options are "Summary" and "Summary With Large Image".
• Option to select category image or not, and what image to use for Category Twitter Card Image (twitter:image) meta tag. Options are "Do not show", "Image", and "Thumbnail".
• Mobile App Integration
  • Easy way to enable or disable Mobile App Integration.
  • Option to type in Android (twitter:app:id:googleplay)
  • Option to type in Android (twitter:app:name:googleplay)
  • Option to type in Android (twitter:app:url:googleplay)
  • Option to type in iPad (twitter:app:id:ipad)
  • Option to type in iPad (twitter:app:name:ipad)
  • Option to type in iPad (twitter:app:url:ipad)
  • Option to type in iPhone (twitter:app:id:iphone)
  • Option to type in iPhone (twitter:app:name:iphone)
  • Option to type in iPhone (twitter:app:url:iphone)
• Product pages are done as Product cards while Category and CMS pages are done as Summary cards.
• All other data needed for Twitter Cards is parsed from Magento and tags are generated automatically.
• Please take a look at our genuine Twitter Card examples.

Social Buttons (for the product, category, home, and cms pages)

• Easy way to enable or disable Social Buttons.
• Option for selecting a layout. Two layouts available (Horizontal and Vertical)
• Social buttons can be injected in more than several locations on the page by selecting Parent Block and Position.
  • Options for Parent block:
    • Content (content)
    • Left (left)
    • Right (right)
    • Footer (footer)
    • Product Alert Urls (alert.urls) [this position is available only on product pages]
  • Option for selecting Position. Available positions are "Bottom (after)" and "Top (before)".
• Button sort order option, as a comma-separated list.
• AddThis Features
  • Easy way to enable or disable AddThis widget.
  • The AddThis Class option allows you to insert any AddThis widget.
  • The AddThis Custom Image Buttons option allows you to customize the button's appearance with your images.
  • Option to show both AddThis and original social buttons.
• RSS Button Features
  • Easy way to enable or disable the RSS button.
  • RSS Url.
  • Title text for the button (HTML attribute "title").
• Facebook Button Features
  • Easy way to enable or disable Facebook "Like/Share" buttons.
  • Supported Attributes:
    • Action (data-action) with options "Like" and "Recommend".
    • Color Scheme (data-colorscheme) with options "Lite" and "Dark".
    • Kid Directed Site (data-kid-directed-site) with options "True" and "False".
    • Layout (data-layout) with options "Standard", "Box Count", "Button Count", and "Button".
    • Share Button (data-share) with options "True" and "False".
    • Show Faces (data-show-faces) with options "True" and "False".
    • Width (data-width)
• Google Button Features
  • Easy way to enable or disable Google "g+1" button.
  • Supported Attributes:
    • Size (data-size) with options "Small", "Medium", "Standard", and "Tall".
    • Size (data-annotation) with options "None", "Bubble", and "Inline".
    • Width (data-width)
    • Align (data-align) with options "Left" and "Right".
    • Recommendations (data-recommendations) with options "True" and "False".
• Instagram Button Features
  • Easy way to enable or disable Instagram follow button.
  • Supported Attributes:
    • Account ID (data-id)
    • Instagram Handle (data-handle)
    • Count Bubble (data-count)
    • Button Size (data-size)
    • Show Handle (data-username)
• LinkedIn Button Features
  • Easy way to enable or disable LinkedIn "inShare" button.
  • Supported Attributes:
    • Counter (data-counter) with options "Disabled", "Right", and "Top".
    • Show Zero (data-showzero) with options "True" and "False".
• Pinterest Button Features
  • Easy way to enable or disable Pinterest "Pin it" button.
  • Ability to add Pinterest Hover Button and to choose where the hover button will be shown. Options are "Do Not Show", "Only on Product Pages", and "Global". [This option is shown only in the "Social Buttons (Product Pages)" section.]
  • Supported Attributes:
    • Pin Size with options "Small" and "Large".
    • Pin Shape (data-pin-shape) with options "Rectangular" and "Circular".
    • Pin Color (data-pin-color) with options "Gray", "Red", and "White".
    • Pin Count (data-pin-config) with options "Above", "Beside", and "None".
  • Option to select category image or not, and what image to use for Category Image for Pinterest Button. Options are "Do not show", "Image", and "Thumbnail". [This option is shown only in the "Social Buttons (Category Pages)" section.]
• Twitter Button Features
  • Easy way to enable or disable Twitter "Tweet" button.
  • Supported Attributes:
    • Counter (data-count) with options "None", "Horizontal", and "Vertical".
    • Size (data-size) with options "Medium" and "Large".
• YouTube Button Features
  • Easy way to enable or disable the YouTube button.
  • Supported Attributes:
    • Channel Name (data-channel)
    • Channel ID (data-channelid)
    • Layout (data-layout)
    • Theme (data-theme)
    • Subscriber Count (data-count)
    • JS Function Name (data-onytevent)
• Social Buttons have independent settings for product, category, home, and cms pages which give you the ability to have different settings for each of the page types.

Social Icons (primary and secondary)

• Easy way to enable or disable Social Icons.
• Option for selecting a layout. Two layouts available (Horizontal and Vertical)
• Social icons can be injected in more than several locations on the page by selecting Parent Block and Position.
  • Options for Parent block:
    • Page Top (after_body_start)
    • Header (top.container)
    • Top Menu (top.menu)
    • Content (content)
    • Left (left)
    • Right (right)
    • Footer (footer)
    • Footer (bottom.container)
    • Page Bottom (before_body_end)
  • Option for selecting Position. Available positions are "Bottom (after)" and "Top (before)".
• Ability to add HTML attributes width and height (If you want to use CSS to style icons leave these empty).
• Icon sort order option, as a comma-separated list.
• AddThis Features
  • Easy way to enable or disable AddThis widget.
  • The AddThis Class option allows you to insert any AddThis widget.
• Icon Features (for RSS/Facebook/Google+/Instagram/LinkedIn/Pinterest/Twitter/YouTube respectively)
  • Easy way to enable or disable RSS/Facebook/Google+/Instagram/LinkedIn/Pinterest/Twitter/YouTube icon.
  • Option to type in your RSS/Facebook/Google+/Instagram/LinkedIn/Pinterest/Twitter/YouTube page URL.
  • Option to type in RSS/Facebook/Google+/Instagram/LinkedIn/Pinterest/Twitter/YouTube custom title text (HTML attribute "title").
• Social Icons have independent settings for primary and secondary icon set, which gives you the ability to have different settings for each of the icon sets.
• Ability to show both primary and secondary icon sets on the same page.

Installation Instructions

- Log in to Magento Admin
- (Optional) Disable Magento Compiler if you are using it (System > Tools > Compilation)
- Go to System > Magento Connect > Magento Connect Manager
- If you purchased an extension on our site use the "Direct package file upload" section and the "Upload package file". Browse to the .tgz file. Click the "Upload" button.
- If you purchased an extension on Magento Marketplace use the "Paste extension key to install" and paste Access Key you get from Magento Marketplace. Click the "Install" button. Click the "Proceed" button.
- Go back to Magento Admin
- Flush Magento Cache (System > Cache Management), then log out from Magento Admin and log back in
- (Optional) Enable Magento Compiler by clicking the "Run Compilation Process" button (System > Tools > Compilation)

If you do not know how to install an extension or you wish a professional to do it for you, we offer an additional installation service for a small fee.

Configuration

Our extension works out of the box. However, there are a few things you should set for the best results. Log to your Magento Admin and go to:

System > Configuration > Apptrian Extensions > Social Integrator

In the Open Graph section:
For Facebook Administrator IDs (fb:admins) type the Facebook IDs of the app's administrators as a comma-separated list. If you do not have administrators, type the ID of the profile which created your Facebook page.
For Facebook Profile ID (article:author) type Facebook Profile ID of the administrator of Magento store or owner of the store.

In the Google+ and Google Rich Snippets (Schema.org JSON-LD) section:
For Author Name (author.name) type the name of the administrator of the Magento store or owner of the store. For Publisher Logo (publisher.logo) upload your store logo. Be aware that this logo must follow Google requirements as follows:
Logos should have a wide aspect ratio, not a square icon.
Logos should be no wider than 600px, and no taller than 60px.
Always retain the original aspect ratio of the logo when resizing. Ideally, logos are exactly 60px tall with a width <= 600px. If maintaining a height of 60px would cause the width to exceed 600px, downscale the logo to exactly 600px wide and reduce the height accordingly below 60px to maintain the original aspect ratio.

In the Twitter Cards section:
For the Website's Username (twitter:site) type your store Twitter username. For example @site_username.
For the Creator's Username (twitter:creator) type the Twitter username of the administrator of the Magento store or owner of the store. You can use the site username or leave it empty.

All options are self-explanatory and usually have tooltips for additional information. After changing options make sure you refresh your Magento cache.

Customization Instructions

If you want to style Social Integrator further, copy
./skin/frontend/base/default/css/apptrian_socialintegrator.css
to
./skin/frontend/your_design_package/your_theme/css/apptrian_socialintegrator.css
and add your CSS styles.

Read comments in the CSS file and you will be able to make most of the common changes like horizontal or vertical alignment by just changing one CSS property.

You can change social icons by creating a directory
./skin/frontend/your_design_package/your_theme/images/apptrian/socialintegrator/
and then copy your icons inside it. Icons must be in .png format and filename must be icons.png.