FACEBOOK

To insert a Facebook element first you need to select what type of social content you want to use.

Currently, there are four options:

Embed Like

Embed Post

Embed Page

Embed Group

Below you will find a detailed overview of these options.

Embed Like

How to add a Like:

  • Copy the URL of the Facebook Page

  • Click on the Social Media button

  • Select “Embed Like”

  • Paste the URL in Atributes sections on the right – where it says “URL of Facebook Page”

  • Adjust the appearance and test with your phone

ATTRIBUTES

  • Name: Select a unique name for your Facebook Like element

  • URL of Facebook Page: URL of the copied from the Facebook Page

  • Button Size: Select between Small/Large sizes of Facebook Like Button Augmentation

  • Layout: Select between Button/Button Count/Box Count.

  • Size: Set the individual size of Like Button item (by width and height – the aspect ratio is fixed)

  • Position: Set individual position of Like Button item (by x and y)

  • Opacity: Set opacity of Like item (by %)

  • Rotation: Set rotation of Like Button item (by °)

  • Arrange: Define hierarchy in between different content elements

  • Fix to Screen: Disconnects Facebook Like Button item from target image and fixes it to screen so it will always stay at the same place, no matter how target image is moved

  • Hidden: Makes Facebook Like Button invisible at the start of AR experience (to e.g. let it appear by a Button interaction at a later time)

  • Unique ID: Internal ID of the content element, mostly used for referencing inside HTML fragments.


Embed Post

How to add a Post:

  • Copy the URL of the Facebook Post

  • Click on the Social Media button

  • Select “Embed Post”

  • Paste the URL to sections on the right – where it says “URL of Facebook Post or Video “

  • Adjust the appearance and test with your phone

ATTRIBUTES

  • Name: Select a unique name for your Post element

  • URL of Facebook Post or Video: URL of the copied from the Facebook Post

  • Size: Set individual size of Post item (by width and height – the aspect ratio is fixed)

  • Position: Set individual position of Post item (by x and y)

  • Opacity: Set transparency level of the element (0 = fully transparent, 1= no transparency)

  • Rotation: Set rotation of Post item (by °)

  • Arrange: Define hierarchy in between different content elements

  • Fix to Screen: Disconnects Post item from target image and fixes it to screen so it will always stay at the same place, no matter how the target image is moved

  • Hidden: Makes Post invisible at the start of AR experience (to e.g. let it appear by a Button interaction at a later time)

  • Unique ID: Internal ID of the content element, mostly used for referencing inside HTML fragments.

CONTENT

Show text: switch between On/Off to make the text from the Photos/Video Post be (in)visible to the user.


Embed Page

How to add a Page:

  • Copy the URL of the Facebook Page

  • Click on the Social Media button

  • Select “Embed Page”

  • Paste the URL to sections on the right – where it says “URL of Facebook Page “

  • Adjust the appearance and test with your phone

ATTRIBUTES

  • Name: Select a unique name for your Page element

  • URL of Facebook Page: URL of the copied from the Facebook Page

  • Tabs: Select Events/Messages/Timeline to be visible for the users.

  • Size: Set individual size of Page item (by width and height – the aspect ratio is fixed)

  • Position: Set individual position of Page item (by x and y)

  • Opacity: Set opacity of Page item (by %)

  • Rotation: Set rotation of Page item (by °)

  • Arrange: Define hierarchy in between different content elements

  • Fix to Screen: Disconnects Page item from target image and fixes it to screen so it will always stay at the same place, no matter how the target image is moved

  • Hidden: Makes Page invisible at the start of AR experience (to e.g. let it appear by a Button interaction at a later time)

  • Unique ID: Internal ID of the content element, mostly used for referencing inside HTML fragments.

CONTENT

  • Use Small Header: switch between On/Off to make the header size small/normal to be (in)visible to the user.

  • Use Small Header: switch between On/Off to make the cover be (in)visible to the user.


Embed Group

How to add a Group:

  • Copy the URL of the Facebook Group

  • Click on the Social Media button

  • Select “Embed Group”

  • Paste the URL to sections on the right – where it says “URL of Facebook Group “

  • Adjust the appearance and test with your phone

ATTRIBUTES

  • Name: Select a unique name for your Group element

  • URL of Facebook Group: URL of the copied from the Facebook Group

  • Skin: Select the Skin between Light/Dark modes

  • Size: Set individual size of Group item (by width and height – the aspect ratio is fixed)

  • Position: Set individual position of Group item (by x and y)

  • Opacity: Set opacity of Group item (by %)

  • Rotation: Set rotation of Group item (by °)

  • Arrange: Define hierarchy in between different content elements

  • Fix to Screen: Disconnects Group item from target image and fixes it to screen so it will always stay at the same place, no matter how the target image is moved

  • Hidden: Makes Group invisible at the start of AR experience (to e.g. let it appear by a Button interaction at a later time)

  • Unique ID: Internal ID of the content element, mostly used for referencing inside HTML fragments.

CONTENT

  • Include Social Context: show the number of friends who are members of this group

  • Include Metadata: show other metadata about the group, for example the description.

ANIMATIONS

Settings for all Social Media elements

Animations make your WonderPage more appealing as they add some motion to static content. For each content element, you can easily define how it should appear/disappear as soon as a target image is scanned or lost.

See how to animate your AR elements here.


Maybe interesting too:

Social media overlays with INSTAGRAM

Social media overlays with LINKEDIN

Social media overlays with TWITTER

Did this answer your question?