ONLINE DRIVERS MEDIA: facebook

Showing posts with label facebook. Show all posts

Saturday, April 30, 2016

How to Add Facebook Like box on Website or Blog

If you have a Facebook fan page or an official Facebook page of your blog or website, then you can place it in your site. Certainly this will ease your interaction with visitors or fans. Another issue you should keep in mind that it is also a part of SEO. Placing a like box may attract visitors to visit your site!

Earlier I wrote about how to create a pop out like box in your site. And also discussed how to create Facebook fan page. Remember: You must have a fan page to create a Facebook Like Box. If you dont know please read this first:

How to Create Facebook Fan Page

If youre ready then I can start. Read carefully.

To add a like box in your website or blog you have to place two codes in two different places. These are as below:

Code 1: Place this code on your page once, just after the opening <body> tag. If your site already has this code then you dont need to place it again.

<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>

Code 2: Place this code on your page wherever you want the plugin to appear on your page.

<div class="fb-like-box" data-href="http://www.facebook.com/markstips" data-width="240" data-height="350" data-show-faces="false" data-stream="false" data-header="false"></div>

You know, the second code is the main code. And the first one is just to help the second one. If your HTML has already the first code then you dont need to paste the code again.

Customization: The Red Parts of Code 2

Name: The word markstips should be replaced with your page name.
Width: Current width is 240. You can increase or decrease.
Height: Current height is 350. Change it if necessary.

Tips: Try to place the second at the footer of your page. It will be helpful to load the site faster. Not only this code, you should place any Java Code at the bottom. If more java codes are placed at the header it will dramatically affect your sites loading time.

Implementing the Code on Blogger:

Code 1: Template > Edit HTML > Proceed > Now find <body tag by pressing Ctrl + F > After few lines paste the code from code 1 above > Save. If you placed any code like it earlier then you dont need to paste again.

Code 2: Layout > Add a Gadget > HTML/ JavaScript > Copy and paste the code from Code 2 above > Save.

Now view your blog or refresh it. You will be able to see this within few seconds. If the server is down, then the like box may delay to appear on your site. Until then, keep waiting.

Advice: If you dont think the like box not important for you, or if you think it consumes your site space then you can try this one: Pop Out Facebook Like Box.

If this code is not working properly, or if you face any problem to implement the code, then try to make the code directly from Facebook Developers.

Tips for Blogger

Stay with Marks PC Solution to get more interesting IT topics!

How to Add a Pop Out Facebook Like Box in Blog or Website

If you wanna add a Pop-Out Facebook Like Box in your website or blog, first you must have a Facebook Page. If you already have it then its OK. But if you dont have it, then create a Facebook Page with your FB account.

Many websites or blogs have a Facebook Like box in their pages. But adding a Facebook Like box may consume valuable space. As a result, many people are no longer willing to add it. Pop Out Facebook Like Box may be the solution of this problem.

Im gonna share a small script with you. By this script you can easily add pop out like box in your site. Just place the below code in the header of your page. I believe this simple code should work for all.

And if you use this code on blogger then follow the steps below:

First sign in in your blog and hit on the design button from the top right corner.
Then choose the layout option.
Here youll find several buttons to add a gadget.
You can choose anyone it doesnt matter. Click on Add a Gadget.
Now youll see a list of gadgets. Choose HTML/ JavaScript.
Then copy and paste the below code in the content box > Save > Save arrangement.
Now visit your blog and see the result.

<script
type="text/javascript"
src="http://www.monkeyphysics.com/fb-sidelike/fb-sidelike.js"
fbpage=markstips></script>

NB: Replace the red part of the code with your Facebook page name.

Customization: You cant directly customize this code.
Because this code is just a script. The original code is located in the server. If you wanna customize this code then you must upload the original code in your own server. You can download the code from the links below:

1. Code Script.
2. Image 1 and Image 2.

And if you use your own server then replace the script tag with you own server.
I mean- src="http://www.monkeyphysics.com/fb-sidelike/fb-sidelike.js"

Stay with Marks PC Solution to get more interesting topics!

Add Facebook Like Button on your Blog!

Today social sites are very much important for webmasters as well as blogger. Because it has a great contribution on SEO. Social sites can influence the visitors to visit your site. But you may not have enough time to share your blog in social sites as youre busy with increasing your sites contents.

So, in this post I am giving you a simple code by which you can place a Facebook Like button on your blog page. Follow the steps below:

First go to www.blogger.com
Then go to your blogs layout option.
Now click on Add a Gadget.
Here youll find a list of gadgets. Scroll down and select HTML/ JavaScript gadget.
Now copy and paste the following code in the gadget box.
Now save the gadget and refresh your blog to see the result!

<div class=sbutton id=gb><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>

Now, whenever you or someone else click on this like button it will be directly shared on the associated Facebook profile page. But he should be signed in with his Facebook Account. And youll also get a comment box when you click on this button.

Stay with Marks PC Solution to get more interesting IT topics!

How to Claim a Site in Facebook

Do you know, you can claim your domain/site in Facebook to get insights? If you register your site on Facebook, you can view analytics for referral traffic, stories, user engagement and other related information. And definitely this will help you to take better actions for your site.

I always say, if Facebook were a country, it could be the most populated state of the world. Its a site with the most registered active users. No other site, even Google and Twitter cant attract users as much as Facebook. Most of the users waste their valuable time on Facebook.

But as a blogger/ web developer/ app developer, you cant either waste your time or avoid Facebook. You can take advantage of the popularity of Facebook. You can promote your website/ blog/ app on Facebook. You can do this in your way. Im not gonna interfere there!

Today Im writing about - claiming/ registering a site on Facebook. You can do this easily. All you need is just adding a simple meta tag before your closing head (</head>) tag.

Never try this trick if you -

Dont have a website/ blog
Dont have a Facebook ID

Okay, Im talking too much for a little trick! Lets back to the track -

Visit this page - Facebook Insignts
Domain Insights > Add your Domain
A new window will appear with your name and a meta property
Type your sites URL there (ie. www.markspcsolution.com)
Copy the meta property (ie. <meta property="fb:admins" content="100002117543096" />) and paste it in your sites HTML closing head tag.
Now hit on the get insights button.
If youre done properly, you will see your domain here.

Hope youve completed the task easily. But I couldnt do this as easily. Dont know why the meta property didnt appear when I was trying to implement the code in my site. Maybe something was wrong in that time when I was trying.

If anybody face the same problem, I mean if the meta property with your numeric FB ID didnt appear as shown in the above image, follow the steps below -

Go to Facebook Insights
Hit on the Add a Domain button
Enter your domain in the domain box
Find your numeric Facebook ID
Copy the following code and paste it in your sites HTML header section

Replace the above numeric ID with yours. And the code should be placed before the closing head tag - </head>

You can also use several IDs here. Suppose you want multiple users to get your sites insights. Then you can use more than one ID as below -

Remember, this will just help you to get insights from facebook. If you wanna customize your sharing URL, Image or description you need to use Open Graph. I will discuss it later. Thanks.

Stay with Marks PC Solution to get more interesting IT topics!

Create an Official Facebook Page for Website Person or Place

Facebook Fan Page is a very common way to communicate with public. Almost all major organizations, websites, places or brands have their own Facebook page. You can also create a Facebook page for your business, blog or website. This is very easy and free of cost!

To create a Facebook page go to the link below. Before that make sure youre signed in to your Facebook account.

Create a Page

There are six types:

Local Business or Place
Company, Organization or Institution
Brand or Product
Artist, Band or Public Figure
Entertainment
Cause or Community

Select any of the types which is suitable for you. Then choose your page category and give it a name. Agree with the terms and conditions and hit on Get Started.

Now do the followings:

Set a profile picture
Give a description of it
Set a Facebook address
Enable Ads or Skip it

Now your page is almost ready. Invite your friends to like it. Try to build audience. You will find several options to build audience and to invite friends to like it.

Keep posting for the audience. Post only necessary contents. So that people find it useful. It will help to grow the page quickly. Never abuse it.

Like us on Facebook

Stay with Marks PC Solution to get more interesting IT topics!

Complete Tutorial on Facebook Open Graph

Facebook Open Graph allows you to use custom site title, URL, description and even a custom image when you share your page. If you use Facebook Open Graph code on your site, every time when you share any page, it will be counted directly for your home page. Suppose, if I share the following URL on Facebook -

http://www.markspcsolution.com/2014/09/complete-tutorial-on-facebook-open-graph.html

The sharing/ like will be counted for -

http://www.markspcsolution.com/

But If there is no open graph code on my site, the sharing of the first URL will be counted individually. And the sharing will not be counted for your home page. Now I guess, youve understood the importance of open graph. Its really helpful to increase facebook likes of your site rapidly.

Couple of days ago, I discussed about how to claim a site on Facebook. Following the same method, you can place Facebook Open Graph code on your site. Open graph code is as follows:

You have to place the above code in the head (<head> </head>) section of your sites HTML. The code must be placed before closing head tag - </head>.

Now follow the steps below:

Go to Facebook Insights > Domain Insights > Add your Domain
Type your home page URL > Copy the Numeric FB ID > Keep the window open
Go to your sites code or HTML and find the closing header tag </head>
Place the above code before closing header tag
Now back to the Facebook Insight Page
Hit on the Get Insights button
Now you should be able to see your domain under the Domain Insights section

There are 7 meta properties in the above code. You have to change in the content option. Make sure youve used them properly. Im gonna clarify the points -

Site Title Example - Marks PC Solution.
Site Description - Whats your site about. Example - Your Ultimate Choice for Computer, Internet, Blogging, SEO & PC Troubleshooting Tips!
Content Type - Website/ Blog/ Article/ News etc.
Site URL Example - www.markspcsolution.com
Custom Image - Upload your desired image in a server. Then simply copy and paste the link here. You can use postimage.org to upload image.
Type your Site Title here. Example - Marks PC Solution.
Numeric FB ID that youve got from the 2nd step in Facebook Insights Page. You can also find numeric by this method.

Troubleshooting

If you face any problem after implementing the code on your site, you can take help of Debugger. Here you can paste your site URL and debug the errors. You can check whether all properties are functioning normally or if there is a problem.

Remember, you can omit some properties. If you use Custom Image, then it will be same for any link of your site. So you can also use a shorter version of the code as below:

<meta content=Website property=og:type/>

<meta content=http://www.example.com/ property=og:url/>
<meta content=100002127563096 property=fb:admins/>

It will do the same job for you. You can also use multiple Admin IDs. Simply add more numeric IDs in the admin property.

If you need any support regarding Facebook Open Graph, please leave a comment . . .

Stay with Marks PC Solution to get more interesting IT topics!

Add Facebook Like Send Button After Each Post Title!

Earlier I showed How to Add a Pop Out Facebook Like Box in Side Bar. And in this post Im gonna show how to add the Facebook like and send button after each post title. All youve to do is just add a small code in your blog template.

If you do this, it will be easier to share your blog post with your friends. And you can also post it in your wall without visiting your page! And it will also allow you to share posts by email IDs of your friends. So you shouldnt miss this trick.

Sign in into your blogger account.
Then go to Design > Template > Edit Html. (Backup your template if youre new user)
Check the box Expand Widget Template.
Press Ctrl+F and search for <data:post.body/>
Now copy and paste the following code before <data:post.body/>
Now save your template and see the result!

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="" send="true" layout="button_count" width="500" show_faces="false" font=""></fb:like>

NB: This code may be worked for any other websites other than blogger. Just copy and paste the code in the perfect place.

You can customize this code too-

If you place this code after <data:post.body/> this tag then the like and send button will be displayed after the blog post rather than the title.
Look at the the width="500". You can change the size too. You can use 450 or 550 instead of 500.

Stay with Marks PC Solution to get more interesting IT topics!

How to Get Facebook Numeric ID

Whether youre using Facebook or Google Plus, you have an unique numeric identity number. If youre a Google Plus user, you must notice a number in your profile URL unless you havent got a username from Google. But Facebook automatically gives you a username after opening account. And thus your numeric ID is hidden from Facebook Profile URL. But you may often need to use the numeric ID of your Facebook account.

If you are an apps developer, or using social plugins for your site, you may need to use your numeric ID. Today Im gonna share an easy way to find out the numeric ID of your Facebook account.

In this way, you can find any persons profile ID number and Facebook page ID number. Follow the instruction below:

Go to this URL - http://graph.facebook.com

And type your username as - http://graph.facebook.com/username

For example - http://graph.facebook.com/jolley.roberts

Now you will get the following details -

"id": "100004080544971", "first_name": "Jolley", "gender": "male", "last_name": "Roberts", "link": "https://www.facebook.com/jolley.roberts", "locale": "en_GB", "name": "Jolley Roberts", "username": "jolley.roberts"

As I mentioned earlier, you can also look up your page ID number. Suppose, the Facebook Fan Page of Marks PC Solution is -

https://www.facebook.com/markstips

You have to type http://graph.facebook.com/markstips to get this page ID. And this page will show you the following details:

"id": "550920454928744", "about": "Your Ultimate Choice for Computer, Internet, Blogging, SEO & PC Troubleshooting Tips!", "can_post": false, "category": "Computers/internet website", "checkins": 0, "has_added_app": false, "is_community_page": false, "is_published": true, "likes": 109, "link": "https://www.facebook.com/markstips", "name": "Marks PC Solution", "parking": { "lot": 0, "street": 0, "valet": 0 }, "talking_about_count": 1, "username": "markstips", "website": "http://www.markspcsolution.com", "were_here_count": 0

There are many other sites where you just need to submit your username and they will show you the details. But sometimes, if their server is down, you may not be able to use them. And there is also a little chance to get trapped by phishing sites! So, I think, using the graph is better.

Im familiar with a site which you can trust - Find your Facebook ID. In this site, you have to input your username. Then hit on the button - Lookup Numeric ID. Finally, it will display your name along with the numeric ID.

ONLINE DRIVERS MEDIA

Saturday, April 30, 2016

How to Add Facebook Like box on Website or Blog

Stay with Marks PC Solution to get more interesting IT topics!

Friday, April 22, 2016

How to Add a Pop Out Facebook Like Box in Blog or Website

Stay with Marks PC Solution to get more interesting topics!

Sunday, April 17, 2016

Add Facebook Like Button on your Blog!

Friday, April 1, 2016

How to Claim a Site in Facebook

Stay with Marks PC Solution to get more interesting IT topics!

Friday, March 25, 2016

Create an Official Facebook Page for Website Person or Place

Stay with Marks PC Solution to get more interesting IT topics!

Tuesday, March 1, 2016

Complete Tutorial on Facebook Open Graph

Stay with Marks PC Solution to get more interesting IT topics!

Sunday, February 14, 2016

Add Facebook Like Send Button After Each Post Title!

Stay with Marks PC Solution to get more interesting IT topics!

Wednesday, January 6, 2016

How to Get Facebook Numeric ID

Stay with Marks PC Solution to get more interesting IT topics!