<!-- These Facebook Open Graph meta tags should go in the head of your page -->
<meta property="og:site_name" content="Springboard" />
<meta property="og:url" content="https://localhost:3000" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Page or Article title" />
<meta property="og:description" content="Description that will appear on Facebook post" />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="fb:app_id" content="yourfacebookappidhere" />
<div class="social-share-bar">
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v7.0"></script>
<div class="fb-share-button" data-href="" data-layout="button" data-size="small">
<a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https://localhost:3000&src=sdkpreparse" class="fb-xfbml-parse-ignore">Share to Facebook</a>
</div>
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-text="This is the pre-populated tweet text" data-url="https://localhost:3000" data-via="jpolete" data-hashtags="somehashtag,anotherhashtag" data-related="yourcompany,anotherrecommendation"
data-show-count="false">Tweet</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
<!-- These Facebook Open Graph meta tags should go in the head of your page -->
<meta property="og:site_name" content="{{ fb.site }}" />
<meta property="og:url" content="{{ url }}" />
<meta property="og:type" content="{{ fb.type }}" />
<meta property="og:title" content="{{ fb.title }}" />
<meta property="og:description" content="{{ fb.description }}" />
<meta property="og:image" content="{{ fb.image }}" />
{{#if fb.appid}}
<meta property="fb:app_id" content="{{ fb.appid }}" />
{{/if}}
<div class="social-share-bar">
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v7.0"></script>
<div class="fb-share-button"
data-href="{{ fb.url }}"
data-layout="button"
data-size="small">
<a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u={{ url }}&src=sdkpreparse" class="fb-xfbml-parse-ignore">Share to Facebook</a>
</div>
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button"
data-text="{{ twitter.message }}"
{{#if url }}data-url="{{ url }}"{{/if}}
{{#if twitter.via}}data-via="{{ twitter.via }}"{{/if}}
{{#if twitter.hashtags}}data-hashtags="{{ twitter.hashtags }}"{{/if}}
{{#if twitter.related}}data-related="{{ twitter.related }}"{{/if}}
data-show-count="false">Tweet</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
{
"url": "https://localhost:3000",
"twitter": {
"message": "This is the pre-populated tweet text",
"via": "jpolete",
"hashtags": "somehashtag,anotherhashtag",
"related": "yourcompany,anotherrecommendation"
},
"fb": {
"description": "Description that will appear on Facebook post",
"title": "Page or Article title",
"site": "Springboard",
"image": "https://example.com/image.jpg",
"appid": "yourfacebookappidhere",
"type": "article"
}
}
.social-share-bar {
display: flex;
justify-content: flex-start;
align-items: center;
> * {
margin-right: .25em;
}
}
Twitter and Facebook share buttons documentation.
Note: The Facebook share button may not appear properly unless the open graph tags are present in the head of the page, and the page is viewed via a publicly accessible url (which matches the open graph tag values).
An alternate approach to Facebook sharing is described here. It’s simpler and performs better, but is no longer documented and may not be supported in the future. It also may not provide the same analytic insights that the current official method enables.