Seth's Code and PC tutorials: social

Showing posts with label social. Show all posts

Sunday, January 20, 2013

Facebook Like Boxes

Did you know that you can show who liked you on Facebook with a simple widget called the "like box?" Unfortunately, this is only available for Facebook Pages, which really sucks. All you need to do is enter some data at http://developers.facebook.com/docs/reference/plugins/like-box/ and click get code. Make sure the FB Javascript SDK is included:

<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/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Then you have the code they generated for you:
<div class="fb-like-box" data-href="http://www.facebook.com/pages/Fireburst/269394286467409?ref=hl" data-width="292" data-show-faces="true" data-stream="true" data-header="true"></div>

Sunday, January 6, 2013

How to display reccomendations via Facebook

One of the easiest ways to get users to visit another page on your site is to recommend pages they will like. One of the easiest ways is to display a Recommendations box with Facebook. But, to add like buttons to other hosts is easy.
To add the recommendations box to your site, navigate to developers.facebook.com/docs/reference/plugins/recommendations/ and fill in the box. You can customize it easily. Put the Facebook Javascript SDK in your <head> tags;
<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/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Then paste the box code into the place where you want it to appear:

<div class="fb-recommendations" data-site="http://sethsdiscoveries.blogspot.com" data-width="300" data-height="300" data-header="false" data-font="trebuchet ms"></div>

Monday, December 31, 2012

Customizing how pages appear in Google+ shares

Quite often, you will see the Google+ share button. But did you know Google gives us away to customize the way the link looks when its shared? In fact, it is very simple. The code is basic. Add it to the <head> tags.
<html itemscope itemtype="http://schema.org/Article">
<meta itemprop="name" content="Title">
<meta itemprop="description" content="My Description">
<meta itemprop="image" content="image URL">
It is also easy to create a share button. Here's the code:

<script src="https://apis.google.com/js/plusone.js"></script>
<g:plus action="share"></g:plus>
You can make the share button load without any additional loading time to your page with this code:
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

Of course, you can add a +1 button to your site and it will enable sharing:


<div class="g-plusone" data-annotation="inline" data-width="300" data-href="URL to +1"></div>


<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

You can do all sorts of things with the Google+ platform, and integrate your site very well with the plugin page. I recommend you check it out.

Add Comments to your site using Facebook

Comments are used on blog posts and websites all over the web. They can be very useful for getting feedback from users. One of the most popular and easiest ways is by using Facebook for your commenting. First, navigate to http://developers.facebook.com/docs/reference/plugins/comments/ and enter the URL of the page you wish the comments to appear on. There are some basic customization options. Click "Get Code" and you will see two boxes of

code. The first you should copy and paste right after the <body> tag of your webpage. I got this code:
<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/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
The other code is pasted where you want the comment box and comments to appear. You can moderate these comments. To do so simply paste this code into the <head> of your page. <meta property="fb:admins" content="{YOUR_FACEBOOK_USER_ID}"/> As you can see, its really very simple. And its a wonderful and useful way of communication. Facebook might not be the best social network, but it certainly provides one of the best ways to add comments to a page. Google+ fans, you can't help but admit that this is a very useful thing.