Social Media Tags

Ohadcy edited this page Apr 18, 2017 · 26 revisions

You can add buttons to your webpage to share information on the recipient's Facebook feed, or on their Twitter account. The user will click the button, will then be usually asked to log on to the respective account (Facebook or Twitter), and then a message will be posted in the user's name.

You can do this either directly with the Facebook or Twitter JavaScript infrastructures, or rely on XMPL tags.

The following entry provides details about these tags. The basic "index.html" contains examples for using the share tags.

Sharing through Twitter

Sharing through Twitter is very simple. You can set the message and ask to refer to a URL. Usually the URL will lead to the company site or campaign. You can defo personalize the message based on the recipient data.

Consider the following example from "index.html":

<a xmp-twitter-share
   xmp-url="http://www.pdfhummus.com/"
   xmp-shared-text="[attribute] I am {{ xmp.r['First Name']}} {{ xmp.r['Last Name']}}, and i approve this URL">
   Tweet</a>

The anchor element has three attributes forming the Twitter sharing functionality:

  1. xmp-twitter-share - the basic attribute making this element a Twitter sharing element.
  2. xmp-url - the URL to put in the message for reference. It will appear as a link in the tweet.
  3. xmp-shared-text - the shared tweet message. Notice how personalized data is used, with the regular ADOR literal references.

You can also use xmp-twitter-share as an element, instead of an attribute:

<xmp-twitter-share 
      xmp-url="http://www.pdfhummus.com/" 
      xmp-shared-text="[element] I am {{ xmp.r['First Name']}} {{ xmp.r['Last Name']}}, and i approve this URL"
/>

The result is identical.

Posting on Facebook Feed

XMPL provides a tag for the recipient to post a preset message on their Facebook feed. It is almost as simple as creating a Twitter share, other than Facebook requiring the posting 3rd party (namely, our website) to identify itself. This requires Facebook registration and launching the share from a particular registered domain. We'll discuss this later. First let's look at the HTML to add.

Form "index.html":

<button type="button" class="btn xmp-facebook-share-btn" 
    xmp-facebook-share
    xmp-appID = "THE_APP_ID"
    xmp-caption = "registration page"
    xmp-name = "uCreate Digital Rocks"
    xmp-description = "uCreate Digital is XMPie web tech"
    xmp-target-link = "http://localhost:8080/register.html"
    xmp-thumbnail = "http://localhost:8080/images/{{xmp.r['Image2']}}"
></button>

When the user clicks this button a dialog appears asking to share. The behind the scenes XMPL tags use the Facebook feed dialog method. Facebook provides a thorough explanation of this here.

Let's look into the button attributes:

  1. xmp-facebook-share - the basic attribute making this a Facebook feed post button.
  2. xmp-appID - the posting application ID. This will be an ID issued by Facebook for the posting entity application. We will create one later.
  3. xmp-caption - the title to appear below the link (defined with xmp-target-link). It should describe the link. This tag is optional and if not provided will be filled with the URL link.
  4. xmp-name - the name of the link attachment. It is the top title of the message.
  5. xmp-description - detailed description of the posted link. It is optional. If it is not provided, we will use scraping from the linked webpage.
  6. xmp-target-link - the URL to be shared. This is the webpage that is shared. This should be an absolute URL, which the Facebook users can reach.
  7. xmp-thumbnail - the image to place in the message (absolute URL). It is optional. If none exists, we will use scraping to find images to post.

All fields can use personalization values, with literal ADOR references to create a personalized message.

You can also use an element version of this tag, where xmp-facebook-share appears as an element. See the example here.

Note that as opposed to Twitter share, due to the part that identifies the posting party (the Facebook App ID), the button will function correctly only if the page is launched from the domain registered to the App ID.

Registering an App ID on Facebook is a common Facebook API practice. Here is the official guide https://developers.facebook.com/docs/apps/register.

In the next entry we will provide a quick guide for making the XMPL button work.

Registering a Facebook APP ID for XMPL

Let's assume that you or the company for which you develop the site have a Facebook account. You can continue with the following steps:

  1. Go to the developer applications area at https://developers.facebook.com/apps/. You may need to register if this is the first time that you develop anything based on Facebook. When you are done, return to https://developers.facebook.com/apps/.
  2. Click the "Add a New App" button.
  3. A dialog box will open asking you to choose the type of application. We are looking at a website here, so select "Website"
  4. In the dialog box, enter a descriptive name for your new application. For example: XMPie Xbliffer. Then click "Create New Facebook App ID".
  5. Choose a category according to what best fits your website. Keep the "Is this a testing app of another app?" button to "no". Then click "Create App ID". After a few moments the application is ready. You can provide Facebook some information about your application in the opened webpage, and follow the quick start, or just click "Skip Quick Start" at the top to get to the application details page.

One more thing you must do is register a domain to associate with the App ID. This should be the same domain from which you will launch the website.

To do this start from the application webpage, which you either received when you finished creating the new application, or by going to https://developers.facebook.com/apps/ and selecting your application. Then click the "Settings" tab on the left side tab list.

The browser window should look like this:

To register the domain:

  1. Go to the "App Domains" field.
  2. In it type the domain from which you will launch the website that has the sharing button. Note that you need to write only the DOMAIN part of the URL, and not all of it.
  3. It is possible to add more domains to your applications. You may use multiple websites and domains with the same application ID.
  4. When you are done, click "Save Changes".

Next

It is now time to gather information about what the users are doing in the website, which pages are viewed, for how long, what buttons are clicked, and what links are followed. For detailed information go to Web Analytics.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.