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
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!
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'; }
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']
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.
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 |
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.
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