Most content is shared to Facebook and Twitter as a URL, so it's important that you mark up your website with Open Graph tags to take control over how your content appears. Without these tags, they may not display correctly.



Follow the steps below to set this up.


Step 1.  Login to your OSI Affiliate Software account and go to Set Up Software. Click on Setup Facebook, Twitter and LinkedIn.


Step 2. Select the referral program that you want to enable social media sharing.


Step 3. Enter your title, description and browse in your image. The image size should be 1200 x 630 pixels.



Step 4.  Add the meta code to your landing to your landing page. You need to add it before the closing </head> tag.

Facebook example

<meta property="og:title" content="Drive More Traffic to Your Website"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="http://www.osiaffiliate.com"/>
<meta property="og:image" content="http://www.osiaffiliate.com/images/omnistar-logo-fb.jpg"/>
<meta property="og:site_name" content="OSI Affiliate Software"/>
<meta property="og:description" content="Sign up for a FREE 15-Day trial of the Omnistar Customer referral software and start having your customers work for you."/>

Here is how the post will look from the above code:


Modify the code that was used for this post.  Update the title, url, image link, description, and site name a shown below:

Facebook

<meta property="og:title" content="Your Title Goes Here"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="http:/www.yoursite.com"/>
<meta property="og:image" content="http://www.yourimagelink.com"/>
<meta property="og:site_name" content="Your Site Name Goes Here"/>
<meta property="og:description" content="Your Description goes here"/>

Below is a table explaining the description of the key tags. For a full list of tags and their descriptions, visit the Facebook Open Graph Protocol website or the Facebook Open Graph Object Properties page.

 

Meta Tag Name

Description

fb:app_id

This is optional. If you don’t have your website app id, you can create one by following instructions provided by Facebook. If you don’t provide the app id, Facebook will use a default app id.

og:type

Since you are adding this to your landing page. You can use the type ‘website’

og:url

This is the url to your landing page. Make sure to use the canonical URL of the landing page.

og:title

Use the title of your landing page.

og:image

Provide the url of the image you want displayed when the link is shared on Facebook. It should be at least 600x315 pixels, but 1200x630 or larger is preferred (up to 5MB).

Twitter


<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@your twitter handle goes here">
<meta name="twitter:title" content="Your title goes here">
<meta name="twitter:description" content="Your description goes here">
<meta name="twitter:image" content="http://www.yourimagelink.com">


Property

OpenGraph

twitter:card

og:type

The card type

If an og:type, og:title and og:description exist in the markup but twitter:card is absent, then a summary card may be rendered.

Used with all cards


twitter:site

n/a

@username of website. Either twitter:site or twitter:site:id is required.


Used with summary, summary_large_image, app, player cards


twitter:description

og:description

Description of content (maximum 200 characters)


Used with summary, summary_large_image, player cards


twitter:title

og:title

Title of content (max 70 characters)


Used with summary, summary_large_image, player cards


twitter:image

og:image

URL of image to use in the card. Images must be less than 5MB in size. JPG, PNG, WEBP and GIF formats are supported. Only the first frame of an animated GIF will be used. SVG is not supported.




Login to you Weebly account and click on Edit Website.

Step 5. Click on Pages and select the webpage that you linked for social sharing.


Step 6. Click on SEO Settings.


Step 7. Paste the meta codes in the field provided for Header Code.


Step 8.  Click on Publish to make the changes.


If you're using Twitter, change the relevant information to link to your Twitter account, and your Twitter website card. You can check that Twitter is reading your meta-tags correctly by using this validator: https://cards-dev.twitter.com/validator.

If you're using Facebook, you'll want to modify the open graph meta-tags. You can check what Facebook is grabbing from your site by using their debugger tool: https://developers.facebook.com/tools/debug/

Note that Imgur was used to generate a shareable link to the open graph images. The ideal size for a Facebook open graph image is 1200 by 630 pixels. The ideal size for a Twitter website card is 800by 418 pixels.