UNDERGROUND WEB WORLD
http://www.undergroundwebworld.org

INTRODUCTION     VISIONS FOR ARTISTS      SITE INDEX 

 
 ABOUT US     COPYRIGHT    HELP WANTED

GUIDES FOR ARTISTS     VOLUNTEERS     CONTACT US
  
 

GUIDE FOR USING FACEBOOK CODES

INCLUDING: THE FACEBOOK SHARE BUTTON, DESCRIPTION CODES AND PROPERTY TAGS

Have you noticed that sometimes when you try to share one of your pages on facebook, facebook may mess up the thumbnail image from your site or not include an adequate description of your page?

In order for your page's description and image properties to be displayed correctly in a facebook post, you must use Facebook's property tags in your page's source code.

When adding the meta property codes listed below, be sure to put these codes in the HEAD of your website.

For example, between these two tags: <head> </head> in your page source.

Here are some helpful codes below.


THE FACEBOOK DESCRIPTION CODE:

This makes your page's description appear on your facebook post.

<meta property="og:description" content="TYPE DESCRIPTION HERE" />


THE FACEBOOK IMAGE CODE:

This chooses the image you want to pop up, on a facebook post.

<meta property="og:image" content="TYPE IMAGE URL HERE" />


OTHER METADATA

TITLE

<meta property="og:title" content="TYPE TITLE HERE" />

 

PAGE URL

<meta property="og:url" content="ENTER URL HERE" />


USE FACEBOOK DEBUGGER!!!

Once you have inserted the code into your page, be sure to use facebook's debugger on your page's URL in order for the code to take effect. This debugger will also recommend other property changes to make to your page.


MORE PROPERTY CODES

If you didn't find what you were looking for above, try checking out this page.


HOW TO ADD A FACEBOOK SHARE LINK

Do you want to add a facebook share link to your page?

To do this, you need to add the code listed below on the part of your page you want the link to appear.

CODE:


<script>function fbs_click() {u=location.href;t=document.title;window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');return false;}</script>
</font>
<a href="http://www.facebook.com/share.php?u=%3Curl%3E" onclick="return fbs_click()" target="_blank">
CLICK HERE TO POST TO FACEBOOK</a>

 

EXAMPLE

CLICK HERE TO POST TO FACEBOOK

HOW TO ADD A FACEBOOK SHARE BUTTON

ENTER THIS CODE AFTER <BODY> TAG

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

 

ENTER THIS CODE WHERE YOU WANT FACEBOOK BUTTON TO APPEAR

<div class="fb-share-button" data-href="ENTER YOUR WEB'S URL HERE" data-type="button_count"></div>

 

EXAMPLE
 

ADDING SOCIAL FEATURES WITH PLUGINS

Facebook "How to add social features with plugins" HERE

Get Like Button Code

Get Comment Box Code

Sharing Content Back to Facebook