Social SEO responsive landing page facebook documentation

A one page SEO responsive solution for a small business or event website based on facebook data with twitter , youtube and Bootstrap

All the data printed comes from facebook (graph API json), twitter (widget) and youtube (playlist player). Also included a lang file so you can easy change the language to your needs.

This app comes with my youtube responsive playlist player ! and colors for the headers and links are automatic set based on the cover image

For a demo visit this page and resize your browser. You will see the responsive effect.

You can use a wall with mansory effect or just a feed output

DEMO

Item Support

Download

Thank you for purchasing the Social SEO responsive landing page. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

General Setup

Here is the general structure.

Upload the dir bootstrap, cache, php and the index.php to the root of your domain

Give the dir cache rights to write to (chmod)

Now open /php/config.php in your editor and look at the following options

For the $tokenID and $tokenSECRET you need to make an app at the facebook dev site. Look at this video to get one ( video ) and go to the https://developers.facebook.com/ website

You also need a twitter username and id. You can get this at the settings account page. https://twitter.com/settings/account
Now create a new widget with a valid twitter username. Then in the copy and paste box you see the data-widget-id.
Use that value and set it here $twitterwidgetid

If you are testing set the $cachetime to 1 for example

For any locale setting check internationalization
Default available dutch and English

/**
 * config settings.
 */
//username
$user = 'australiapost';
//language nl_NL, de_DE, fr_FR or en_EN
$lang = 'en_EN';
//Facebook APP id | and App Secret
$tokenID = 'HERE THE APP ID';
$tokenSECRET= 'HERE THE APP SECRET';
//cache time in seconds
$cachetime = '21600';
//resize cover photo
$resizecover = true;
//show albums true or false
//$showalbums - If true only the albums will be fetched with a link to the facebook album
$showalbums = false;
$limitalbums = '7';
//Exclude albums
$excludealbums = array('Cover Photos','Profile Pictures','Omslagfoto\'s','Profielfoto\'s');
//show events true or false
$showevents = true;
//auto color from image for H1 end links
$autocolor = true;
//total feeds
$feeditems = '30';
//type feed or posts
$newstype = 'posts';
//news output 'wall' or 'feed'. wall is masonry colums
$newsoutput = 'wall';
//Filter only posts if it contains text (so no status updates)
$newsfilter = true;
//show max post (only for feed output
$maxposts = '3';
//show images on posts
$wallimages = true;
//higher resolution images ? (slower for website)
$high_picture = true;
//Show comments
$showcomments = true;
//show max comments
$totalcomments = '10';
//full post columns if the twitter and pinterest widgets are set to false
$nowidgets = false;

//Youtube
$youtube = true;
//listType youtube - playlist, user_uploads, custom or search (the default)
$youtubetype = 'user_uploads';
//value youtube
$youtubevalue = 'auspost';

//Video's facebook (on mobile it will be the mp4 link else flash object)
$facebookvideo = true;
//Max video's
$limitvideo = '12';

//twitter
$twitter = true;
$twittername = 'auspost';

//Pinterest
$pinterest = false;
//Name EX 'name' or add your board. EX. 'name/boardname'
$pinterestname= '';
//User (embedBoard) or board (embedUser) ?
$pinterestuser = 'embedUser';

//show output in array
$debugjson = false;

/**
 * Set cache to 0 for testing.
 */
if(isset($_GET['cache']) && $_GET['cache'] == 'false') {
	$cachetime = '0';
}

Customizations

Since it is plain and simple you can adjust almost everything

In /php/funtions.php you can find the call to the facebook api

$url = 'https://graph.facebook.com/v2.7/'.$user.'?fields='.$albums.'about,'.$events.'hours,'.$fvideo.'username,website,company_overview,phone,impressum,general_info,description,mission,location,name,likes,category_list,picture,category,parking,cover,'.$newstype.'.limit('.$feeditems.'){'.$fcomments.'name,object_id,description,message,type,link,caption,id,created_time,full_picture,source,picture,status_type,story,attachments.fields(media,url),likes.limit(1).summary(true)}&locale='.$lang.'&access_token='.$tokenID.'|'.$tokenSECRET;

If you set $debugjson to true you can see the json output on screen and see all the values

If you want to grab other json fields you can find them here https://developers.facebook.com/tools/explorer/
and add them to the string above

Opening the index.php and you will see how the feed is outputted, so you can easily add more fields

example

$events = $profile['events']['data'];
if (isset($events)) {
  foreach($events as $event){
    echo '<h3>'.$event['name'].'</h3>';
    echo '<strong>'.convertIETF($event['start_time']).'</strong><br />';
    if (isset($event['location'])) {
        echo $event['location'].'<br />';
    }
    if (isset($event['description'])) {
        echo hyperlinks($event['description']).'<br />';
    }
    echo '<a href="https://www.facebook.com/events/'.$event['id'].'/" target="_blank">'.$lmore.' ...</a>';
  }
}

For example if you want the image from a post (this is an foreach , since there is more then one post) just look at the json (set $debugjson to true)

[posts] => Array
(
  [data] => Array
      (
      [0] => Array
        (
            [message] => The street is the final word in fashion.4
            [id] => 42933792278_10152086130762279
            [picture] => http://photos-f.ak.fbcdn.net/hphotos-ak-ash4/1463233_10152086130692279_633614305_s.jpg
            [created_time] => 2013-12-30T19:00:29+0000
        )
      [1] => Array

you can grab it like this in the foreach

echo $feed['picture']

Notes

SimpleImage is used to resize the cover photo and save it ti the cache dir. You can find the class.SimpleImage.php in the dir /php/
The default resize is $img->thumbnail(850, 315); and can be found on line 89 in the php/funtions.php
You can use more params for resizing if you want just check out the SimpleImage github website ( https://github.com/claviska/SimpleImage )
You can set this to a bigger size to fit the website container but then you also need to upload a bigger cover photo on facebook

All the content comes from facebook so you have to make sure that most of the settings in your facebook are set

When it looks like the content is not okay set $debugjson to true to see all the values or go to https://developers.facebook.com/tools/explorer/ and check if there are no problems on the facebook site.

Note, that this only works with business and event pages
If you are not sure if this works with your facebook page just test it out here first https://developers.facebook.com/tools/explorer/

I kept everything really simple so you can change almost everything to your own needs. However some php, html and css knowledge is necessary.


Style sheet

There are severall stylesheets for you to customize

File Name Description
style.css Overall style sheet for your custom needs
youtube-responsive.css Customize the youtube player

JavaScript Files

You will find severall js at the bottom of the index.php

Tag Description
settings.js Some common settings.
jquery.youtube-responsive.min.js The js code for the responsive youtube player. You can find all the documentation about this plugin here

I've used the following files as listed.

JavaScript,php and API

  1. jQuery
  2. masonry.js
  3. jquery.lazyload
  4. bootstrap.js
  5. hideMaxListItem-min.js
  6. jquery.expander.min.js
  7. Graph API facebook
  8. SimpleImage php class
  9. Addthis social plugin
  10. Magnific Popup is a responsive lightbox

Once again, thank you so much for purchasing this app. As I said at the beginning, I'd be glad to help you if you have any questions relating to this app. No guarantees, but I'll do my best to assist.

Ceasar