Last updated 2016-07-01
Metapic REST API Documentation
Welcome to the Metapic REST API documentation. This documentation covers all the basic concepts of the API from authentication to how to consume the Metapic API resource endpoints.
Authentication
The Metapic API uses a secret key based request signing process.
Each request is signed individually using a HMAC encrypted with SHA256.
Every request is always signed with your client id and a timestamp. The timestamp key is called mtpc_timestamp.
The request signing should also include all post data or other variables where applicable.
In order to create the string for the HMAC function these variables are sorted in key order and then concatenated to a string in the format "var1=x&var2=y...".
This string is then sent to the HMAC function with your secret key as the HMAC key.
Examples
Assuming that your client id is 123456 and that the current time is 2018-03-04 11:50:00 you would get the following keys for signing:
{
"client_id": 123456,
"mtpc_timestamp": "2018-03-04 11:50:00"
}
These keys are concatenated to the following string: "client_id=123456&mtpc_timestamp=2018-03-04 11:50:00". This string is then sent to the HMAC function along with the secret key.
The returned hash from the HMAC function is then sent as a query variable called access_token.
Given the data above a request for users would look like this: http://api.metapic.dev/users?access_token=hashed_accesstoken&client_id=123456
REST API Endpoints
Test hello endpoints
This is a test endpoint to se that you are correctly setup.
http://api.metapic.se/hello
{
"message":"hello world",
"input":{
"client_id":"9999608588810130",
"access_token":"335dasdgas1231232219882aaf88b3934f044f45baf918f43923313848597",
"mtpc_timestamp":"2018-03-28 09:45:55"
}
}
Users
The users endpoint is used for accessing and modifying the users connected to your client account.
http://api.metapic.se/users
[{
"id":1,
"username":"myname",
"email":"user@example.com",
"created_at":"2012-11-05 09:25:45",
"updated_at":"2012-11-05 09:25:45"
},...]
http://api.metapic.se/users/876
{
"id":876,
"username":"myname",
"email":"user@example.com",
"created_at":"2012-11-05 09:25:45",
"updated_at":"2012-11-05 09:25:45"
}
http://api.metapic.se/users
{
"id":876,
"client_id":"1",
"username":null,
"email":"sebastian@raket123123123.nu"
}
http://api.metapic.se/users/876
{
"id":876,
"username":"myname",
"email":"user@example.com",
"created_at":"2012-11-05 09:25:45",
"updated_at":"2012-11-05 09:25:45"
}
http://api.metapic.se/users/876
{
"id":876,
"username":"myname",
"email":"user@example.com",
"created_at":"2012-11-05 09:25:45",
"updated_at":"2012-11-05 09:25:45"
}
Images
The images endpoint is used for accessing and modifying the images connected to your client account.
http://api.metapic.se/images?user_id=1
[{
"id": 1,
"user_id": 1,
"url": "http://example.com/image.jpeg",
"site": "http://myblog.com/",
"width": 300,
"height": 400,
"ratio": 0.75,
"created_at": "2012-11-05 09:25:45",
"updated_at": "2012-11-05 09:25:45"
},...]
http://api.metapic.se/images/876
{
"id": 1,
"user_id": 1,
"url": "http://example.com/image.jpeg",
"site": "http://myblog.com/",
"width": 300,
"height": 400,
"ratio": 0.75,
"created_at": "2012-11-05 09:25:45",
"updated_at": "2012-11-05 09:25:45"
}
http://api.metapic.se/images
{
"id": 1,
"user_id": 1,
"url": "http://example.com/image.jpeg",
"site": "http://myblog.com/",
"width": 300,
"height": 400,
"ratio": 0.75,
"created_at": "2012-11-05 09:25:45",
"updated_at": "2012-11-05 09:25:45"
}
http://api.metapic.se/images/876
{
"id": 1,
"user_id": 1,
"url": "http://example.com/image.jpeg",
"site": "http://myblog.com/",
"width": 300,
"height": 400,
"ratio": 0.75,
"created_at": "2012-11-05 09:25:45",
"updated_at": "2012-11-05 09:25:45"
}
http://api.metapic.se/images/876
{
"id": 1,
"user_id": 1,
"url": "http://example.com/image.jpeg",
"site": "http://myblog.com/",
"width": 300,
"height": 400,
"ratio": 0.75,
"created_at": "2012-11-05 09:25:45",
"updated_at": "2012-11-05 09:25:45"
}
http://api.metapic.se/images/upload
{
"id": 1,
"user_id": 1,
"url": "http://example.com/image.jpeg",
"site": "http://myblog.com/",
"width": 300,
"height": 400,
"ratio": 0.75,
"created_at": "2012-11-05 09:25:45",
"updated_at": "2012-11-05 09:25:45"
}
Tags
The tags endpoint is used for accessing and modifying the tags connected to your client account.
http://api.metapic.se/tags
[{
"id":35,
"image_id":50,
"user_id":2,
"x":0.2,
"y":0.2,
"width":0.254,
"height":0.3056,
"link":"http://example.com",
"text":"Link text",
"type":"pricerunner",
"created_at":"2012-11-05 09:25:45",
"updated_at":"2012-11-05 09:25:45"
},...]
http://api.metapic.se/tags/123
{
"id":35,
"image_id":50,
"user_id":2,
"x":0.2,
"y":0.2,
"width":0.254,
"height":0.3056,
"link":"http://example.com",
"text":"Link text",
"type":"pricerunner",
"created_at":"2012-11-05 09:25:45",
"updated_at":"2012-11-05 09:25:45"
}
http://api.metapic.se/tags
{
"id":35,
"image_id":50,
"user_id":2,
"x":0.2,
"y":0.2,
"width":0.254,
"height":0.3056,
"link":"http://example.com",
"text":"Link text",
"type":"pricerunner",
"created_at":"2012-11-05 09:25:45",
"updated_at":"2012-11-05 09:25:45"
}
http://api.metapic.se/tags/123
{
"id":35,
"image_id":50,
"user_id":2,
"x":0.2,
"y":0.2,
"width":0.254,
"height":0.3056,
"link":"http://example.com",
"text":"Link text",
"type":"pricerunner",
"created_at":"2012-11-05 09:25:45",
"updated_at":"2012-11-05 09:25:45"
}
http://api.metapic.se/tags/876
{
"id":35,
"image_id":50,
"user_id":2,
"x":0.2,
"y":0.2,
"width":0.254,
"height":0.3056,
"link":"http://example.com",
"text":"Link text",
"type":"pricerunner",
"created_at":"2012-11-05 09:25:45",
"updated_at":"2012-11-05 09:25:45"
}
Clicks
The clicks endpoint is used for accessing the number of clicks connected to your client account.
http://api.metapic.se/clicks/getAllFromUser
http://api.metapic.se/clicks
Deeplinks
Create deeplinks
http://api.metapic.se/deep-links
[{
"before": "https://www.solebox.com/Footwear/Running/Air-Max-720-variant-1.html",
"status": "success",
"store": "Solebox",
"storeId": 15507,
"type": "tradedoubler_DE",
"after": "https://c.mtpc.se/tags/link/1792314",
"currency": "EUR",
"tag_id": 1792314,
"user_revenue_cpc": 11,
"user_instagram_cpc": 2
}, ...]
Deeplink blogpost
Transform a html blocks links to metapic links. Will only transform links that you can earn money on
http://api.metapic.se/deepLinkBlogPost
{
"newHtml": "<\div><\a href='https://c.mtpc.se/tags/link/1792347'>link<\/a><\/div>",
"linkTranslation": [{
"before": "https://www.solebox.com/Footwear/Running/Air-Max-720-variant-1.html",
"status": "success",
"store": "Solebox",
"storeId": 15507,
"type": "tradedoubler_DE",
"after": "https://c.mtpc.se/tags/link/1792346",
"currency": "EUR",
"tag_id": 1792346,
"user_revenue_cpc": 11,
"user_instagram_cpc": 2
},...],
"isUpdated": true
}
Social Media
This endpoint is used for accessing and modifying the user's Social Media connected to your client account.
http://api.metapic.se/users/123/socialMedia
[{
"id":35,
"user_id":123,
"type":"instagram",
"identifier":"my_instagram",
"created_at":"2012-11-05 09:25:45",
"updated_at":"2012-11-05 09:25:45"
},...]
http://api.metapic.se/users/123/socialMedia/35
{
"id":35,
"user_id":123,
"type":"instagram",
"identifier":"my_instagram",
"created_at":"2012-11-05 09:25:45",
"updated_at":"2012-11-05 09:25:45"
}
http://api.metapic.se/users/123/socialMedia
{
"id":35,
"user_id":123,
"type":"instagram",
"identifier":"my_instagram",
"created_at":"2012-11-05 09:25:45",
"updated_at":"2012-11-05 09:25:45"
}
http://api.metapic.se/users/123/socialMedia/35
{
"id":35,
"user_id":123,
"type":"instagram",
"identifier":"my_instagram",
"created_at":"2012-11-05 09:25:45",
"updated_at":"2012-11-05 09:25:45"
}
http://api.metapic.se/users/123/socialMedia/35
{
"id":35,
"user_id":123,
"type":"instagram",
"identifier":"my_instagram",
"created_at":"2012-11-05 09:25:45",
"updated_at":"2012-11-05 09:25:45"
}
How to use our script
You need to have jQyery >1.9 loaded on your page.
Import api.metapic.se/javascript/iframeScript.js.
You can trigger popups from Metapic with help of JQuery events($.event.trigger)
with type metapic.
You need to call /iframe/generateCode for getting the random code, if the random
code is not added the user will be redirected to login.
Here is an example how to trigger the search box.
$.event.trigger({
type: "metapic",
text: editor.selection.getContent(),
baseUrl:data['metapicApi'],
startPage: "find/default",
hideSidebar:true,
randomKey:data['random_token']
});
Triggers the find view and is going to wrap the input text in a a href tag
{
Target: document,
data: undefined,
delegateTarget: documenthandle,
Obj: Object,
isTrigger: 3jQuery,
111107697214419022202: true,
namespace: "",
namespace_re: null,
result: undefined,
target: document,
text: "a html obj as text",
timeStamp: 1427707851389,
type: "metapic,
Return"__proto__: Object
}
Parameters
text
Text you want wrapped
baseUrl
Which server you want to connect to
startPage
REQUIRED find/default
hideSidebar
true/false if you want the left sidebar to be hidden
randomKey
The random key generated from the endpoint /iframe/genarateCode
Triggers the tag-editor and is going to return the input div with added data attributes.
{
Target: document,
data: undefined,
delegateTarget: documenthandle,
Obj: Object,
isTrigger: 3jQuery,
111107697214419022202: true,
namespace: "",
namespace_re: null,
result: undefined,
target: document,
text: "a html obj as text",
timeStamp: 1427707851389,
type: "metapic,
Return"__proto__: Object
}
Parameters
text
REQUIRED The div you want wrapped as being the taggable area
imgSrc
REQUIRED The src to your img
baseUrl
Which server you want to connect to
startPage
REQUIRED tag-editor
hideSidebar
true/false if you want the left sidebar to be hidden
randomKey
The random key generated from the endpoint /iframe/genarateCode
Triggers the collage-editor and is going to return a image with added data attributes.
{
Target: document,
data: undefined,
delegateTarget: documenthandle,
Obj: Object,
isTrigger: 3jQuery,
111107697214419022202: true,
namespace: "",
namespace_re: null,
result: undefined,
target: document,
text: "a html obj as text",
timeStamp: 1427707851389,
type: "metapic,
Return"__proto__: Object
}
Parameters
imgSrc
The src to a image you want in a collage
baseUrl
REQUIREDWhich server you want to connect to
startPage
REQUIRED collage
hideSidebar
true/false if you want the left sidebar to be hidden
randomKey
The random key generated from the endpoint /iframe/genarateCode