">mixi Developer Center (mDC)

mixi Connect

mixi Connect (English) » mixi Plugin » mixi check » Specification

Specification

Placing “mixi check” button on your web

Placing mixi plugin (in this case, mixi check button) on a webpage is quite easy.All you have to do is to add some HTML lines.

    <a href="http://mixi.jp/share.pl" class="mixi-check-button">check</a>
    <script type="text/javascript" src="http://static.mixi.jp/js/share.js"></script>

You can specify the following attribute for each “a” element and “script” element
“a” element:

Attribute Description Remark
href http://mixi.jp/share.pl Mandatory
class mixi-check-button Mandatory
data-key Specify a check key issued upon the service registration Mandatory
data-url Specify URL where the mixi check button is placed (*1)(*2)(*3) Optional
data-button Specify the type of mixi check button(*4)(*5) Optional

(*1) please specify the URL accessible without authentication or IP filtering.
(*2) for a page optimized for a smart phone, URL for a PC webpage should be specified.
(*3) If the URL included double byte code, such as Japanese, please specify the URL encoded by UTF-8
(*4) either “button-1″ or “button-2″can be specified
(*5) developers may choose a GIF file format such as “button-1.gif” by specifying GIF format.De fault setting is PNG file format.

button-1 button-2 button-3 button-4 button-5

script element：

Attribute Description Remark
src http://static.mixi.jp/js/share.js Mandatory
type text/javascript Mandatory

You can place multiple buttons in a page by adding a elements on each position to be placed the button. In
this case, script element should be added after the last “a“ element in the page.

List of permitted URLs

All URLs sent via mixi plugin should be listed on the List of Permitted URLs. If any of the following URL
which is not listed, it will result in as follows:

  • If the URL of a page where a user shares via plugin is not listed, it ends up with error
  • If the URL of an image where a user shares is not listed and the URL of a page itself is listed, the
    image will be ignored.

You can list the URLs on the List of Permitted URLs from your Partner Dashboard

How to specify the information of a webpage

By adding some tags in HTML describing the website where mixi plugin is placed, you can specify the title,
description and thumbnail images for information published on mixi wall.
mixi plugin supports The Open Graph protocol [OGP] and the OGP information described in the webpage
can be interpreted properly.

Web namespace Identifier

By adding xmlns attribute as follows, namespace can be identified.

    <html xmlns:og="http://ogp.me/ns#"
          xmlns:mixi="http://mixi-platform.com/ns#">

“xmlns:og” is The Open Graph protocol namespace and ”xmlns:mixi” is namespace identified by mixi.

Title and Description

You can specify the title and description for the webpage with meta elements in head elements.

    <html xmlns:og="http://ogp.me/ns#"
          xmlns:mixi="http://mixi-platform.com/ns#">
    <head>
      <title>...</title>
      <meta property="og:title" content="..." />
      <meta property="og:description" content="..." />

If the website support The Open Graph Protocol, the title and description may be specified.
Following rules apply to specifying the title.
1.In the case the meta element of “mixi:title” is specified for the property attribute, it is applied.
2.In the case the rule 1 isn’t satisfied and the meta element of “og:title” is specified for the property attribute, it is applied.
3.If neither rule 1 nor 2 are satisfied and the title element is specified, it is applied.
4.If nothing above is satisfied, the service name registered in service registration is applied.

And following rules apply to specifying the description.
1.In the case the meta element of “mixi:description” is specified for the property attribute, it is applied.
2.In the case the rule 1 isn’t satisfied, and the meta element of “og:description” is specified for the property attribute, it is applied.
3.In the case the rule 2 isn’t satisfied, and the meta element of “description” is specified for the name attribute, it is applied.
4.If nothing above is satisfied, no descriptions are registered.

In fact, as for the page its title element and are specified, the site supports The Open Graph protocol, you don’t need to specify anything about its titles and descriptions.

Specifying the restricted page

In the case the page is not appropriate under18, you should add following meta tags.

    <html xmlns:og="http://ogp.me/ns#"
          xmlns:mixi="http://mixi-platform.com/ns#">
    <head>
      <title>...</title>
      <meta property="mixi:content-rating" content="1" />
      ...

For those pages, users under 18 are restricted.

Specifying URLs for devices other than PC

You can specify the URLs for the webpage developed for devices other than PC, if any, with link elements.

  • Specify “mixi-check-alternate” for rel attribute.
  • Specify “text/html” for type attribute.
  • Specify the type of device for media attribute. (described below)
  • Specify the URL of each page for href attribute.

Following values are available for media attribute;

Media attribute Type of Device
mixi-device-smartphone Smartphone
mixi-device-mobile Feature phone (all carriers)
mixi-device-docomo Feature phone (docomo)
mixi-device-au Feature phone (au)
mixi-device-softbank Feature phone （Softbank）

Following rules apply to the smartphone;

  • If “mixi-device-smartphone” is not described, the URL of the website specified as “data-url” is applied.

Following rules apply to the feature phone;

  • If “mixi-device-docomo” is not described, ”mixi-device-mobile”, if specified, is applied.
  • If “mixi-device-au” is not described, ”mixi-device-mobile”, if specified, is applied.
  • If “mixi-device-softbank” is not described, ”mixi-device-mobile”, if specified, is applied.
  • If neither “mixi-device-mobile” nor any specification above are not specified, the website specified as “data-url” is browsed after auto-transcoding the website for the feature phone.

For example,

    <html xmlns:og="http://ogp.me/ns#"
          xmlns:mixi="http://mixi-platform.com/ns#">
    <head>
      ...
      <link rel="mixi-check-alternate" media="mixi-device-mobile"
            type="text/html"
            href="http://example.com/mobile/index.html" />
      <link rel="mixi-check-alternate" media="mixi-device-docomo"
            type="text/html"
            href="http://example.com/docomo/index.html" />

In this example, the URL, “http://example.com/docomo/index.html”, is applied for docomo’s feature phone
and the URL, “http://example.com/mobile/index.html” is effective for the feature phones from other carriers.

Besides, the type of devices can be specified with meta element and following can be specified for property
attribute;

Property attribute Type of Device
mixi:device-smartphone Smartphone
mixi:device-mobile Feature phone (all carriers)
mixi:device-docomo Feature phone（DoCoMo）
mixi:device-au Feature phone（au）
mixi:device-softbank Feature phone（Softbank Mobile）

Then, you can specify the URL of each website for content attribute. The sample code written above can be described with meta element as follows:

    <html xmlns:og="http://ogp.me/ns#"
          xmlns:mixi="http://mixi-platform.com/ns#">
    <head>
      ...
      <meta property="mixi:device-mobile" content="http://example.com/mobile/index.html" />
      <meta property="mixi:device-docomo" content="http://example.com/docomo/index.html" />

Thumbnail Image

Link elements enables you to specify a thumbnail image to be published via mixi plugin. Please specify the thumbnail image associated with the content shared on mixi .

    <html xmlns:og="http://ogp.me/ns#"
          xmlns:mixi="http://mixi-platform.com/ns#">
    <head>
      ...
      <link rel="mixi-check-image" type="image/jpeg"
            href="http://example.com/images/sample.jpg" />
      <link rel="mixi-check-image" type="image/jpeg"
            href="http://example.com/images/mobile.jpg" />
Attribute Description Remark
rel mixi-check-image Mandatory
type specify MIME type for the image format
( e.g. For a jpeg image, mime type should be image/jpeg)
href Specify the URL for the image Mandatory

You are able to specify the image file with meta element. In this case, by adding “og:image” set by The Open Graph protocol or “mixi:image” in mixi’s proprietary protocol in property attribute, you can specify the URL for the image in content attribute.

    <html xmlns:og="http://ogp.me/ns#"
          xmlns:mixi="http://mixi-platform.com/ns#">
    <head>
      ...
      <meta property="og:image" content="http://example.com/images/sample1.jpg" />
      <meta property="mixi:image" content="http://example.com/images/sample2.jpg" />
      <meta property="mixi:image" content="http://example.com/images/sample3.jpg" />

If multiple images are specified, a user can pick up any of them from them.

Restriction for the thumbnail images

  • Up to 5 images can be specified.
  • mixi plugin supports JPEG, PNG and GIF (not animated GIF)
  • Any image more than 400KB and less than 1KB is ignored
  • Any image smaller than width 76pxl and/or height 76pxl is ignored and mixi recommends the size of an image with width 180 pxl and hegith 180pxl or larger.

How to exclude specific Information described in the site

mixi plugin automatically retrieves the title, description and/or images from HTML, unless you explicitly exclude the information you don’t want a user to publish on mixi wall . In order to prevent a user from sharing the information, you can describe meta elements as follows:

    <html>
    <head>
      <title>...</title>
      <meta name="mixi-check-robots" CONTENT="notitle, nodescription, noimage">
    </head>
  • name Specify “mixi-check-robots” for the name attribute.
  • Specify following values by putting comma for each value for content attribute.
Value Description
notitle exclude the title
nodescription exclude the description
noimage exclude the images

Calling a Popup screen from a page

If you are willing to implement mixi plugin on a page which doesn’t support JavaScript or flash page, you can specify the following URL to call a popup screen for share.

    http://mixi.jp/share.pl?u=<data-url>&k=<data-key>

Without using share.js, you can add the following tags for placing mixi plugin button with less frictions.

<a href="javascript:void(0);" onclick="window.open('http://mixi.jp/share.pl?u=<check_url>&k=<check_key>','share',['width=632','height=456','location=yes','resizable=yes','toolbar=no','menubar=no','scrollbars=no','status=no'].join(','));">mixi Check</a>

“location=yes” is mandatory and you must show the location bar to a user and the user shoud be able to confirm the popup screen belongs to mixi .jp

“User-Agent” HTTP header field

“User-Agent” HTTP header field contains the following information when mixi server is retrieving information from the external website.

    mixi-check/1.0 (http://mixi.jp/)

product-version (current version is “1.0″) and/or comment（currently which is “(http://mixi.jp/)”） is subject to change.

Placing “mixi check” button on mobile website

You can set up a form to POST following parameters to “http://m.mixi.jp/share.pl?guid=ON”. You have to make sure that the label of a submit button should be mixi Check submit.

Parameter Description Remarks
charset Specify encoding for the data
“shift_jis” or “utf-8” is available		 Default: “shift_jis”
check_key mixi Specify mixi check key issued upon the service　registration mandatory
title Specify a title which articulates an object to be shared　with character string. Default: Service name
description Specify the description
content_rating If the content is not appropriate for minors, specify　“1”
image URL of thumbnail images Please refer section below
primary_url URL of a landing page from this check feed (*1) Mandatory
pc_url URL of a landing page for PC users
smartphone_url URL of a landing page for smartphone users
mobile_url URL for a landing page for feature phone users At least one of the mobile_url has to be specified
mobile_docomo_url URL for a landing page for docomo feature phone users
mobile_au_url URL for a landing page for au feature phone users
mobile_softbank_url URL for a landing page for Softbank Mobile feature phone users

(*1) primary_url is used to identify the object/content to be shared. If this primary_url is same, (let’s say different articles from one newspaper site with same primary_url), it is treated as a same object/content.
Each attribute or restrictions, unless otherwise described here, specifications for PC can be applied.
Sample HTML;

    <form action="http://m.mixi.jp/share.pl?guid=ON" method="POST" >
        <input type="hidden" name="check_key" value="xxxxxxxx" />
        <input type="hidden" name="title" value="mixi" />
        <input type="hidden" name="primary_url" value="http://example.com/mobile/index.html" />
        <input type="hidden" name="mobile_url" value="http://example.com/mobile/index.html" />
        <input type="submit" value="mixicheck" />
    </form>

Thumbnail Image

Following rules apply to URL of the thumbnail image specified with “image” attribute;

  1. Please specify the URL accessible without authentication or IP filtering.
  2. Width 76pxl x Height 76pxl or larger image is recommended
  3. If you specify the URL for PC users, Width 180pxl x Height 180 pxl or larger image is recommended.

[MIXI-DEV-BOARD]

mixi Partner Dashboard

https://sap.mixi.jp/

[OGP]

The Open Graph protocol

http://opengraphprotocol.org/

tracking parameters for traffic from mixi

When users access external sites by clicking shared content on mixi, following parameter is added in order to track the access from mixi.

Name of the parameter Value
__from mixi

example

http://example.com/index.html?__from=mixi

TOP OF THIS PAGE

Copyright (C) mixi, Inc. All rights reserved.