Showing posts with label Tumblr. Show all posts
How to Add Facebook Page Plugin or FanPage Box on Blog or Website

How to Add Facebook Page Plugin or FanPage Box on Blog or Website

Facebook introduce Page Plugin instead of Like Box/Fan Box. If you do not manually upgrade to the Page Plugin, your Like Box plugin implementation will automatically fall back to the Page Plugin. Facebook made a drastic changes i.e. Adaptive Width, Show Friend's Faces, Adjust Language, Privacy Restricted Pages, List Page Posts.

Facebook Page Plugin

The Page plugin lets you easily embed and promote any Facebook Page on your website. Just like on Facebook, your visitors can like and share the Page without leaving Facebook.

Step 1: Go to this Link

Step 2: Choose your Page Name, custom height and width of plugin, cover image and post according to your need.

Step 3: Now click on Get Code Button. It pop-up with two list of code example in this image

Step 4: Include the JavaScript SDK on your page once, ideally right after the opening  <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.6";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Step 5: Place this code wherever you want the plugin to appear on your page.
<div class="fb-page"
data-href="https://www.facebook.com/Howlmeflash"
data-hide-cover="false"
data-show-facepile="true"
data-show-posts="false">
<div class="fb-xfbml-parse-ignore">
<blockquote cite="https://www.facebook.com/Howlmeflash">
<a href="https://www.facebook.com/Howlmeflash">Howlmeflash
</a>
</blockquote>
</div>
</div>
In addition to we can also edit/change settings above code(second code).

Facebook Page Plugin for blogger


  • Complete these above step (step 1 to step 3)
  • Go to Blog >> Template Section >> Edit HTML, copy the above code and paste right after the <body> tag and save the template.
Backup Your Template Before Doing This
  • Now go to Layout >> Add a Gadget >> Choose HTML/JavaScript, give title as Facebook or different and paste 2nd piece of code of Page plugin in the content box.The code Look like this Step 5

Here we come to the end of a detailed tutorial of Facebook Page Plugin for blog or website which make your website much more engaging.

So this was our guide on How to Add Facebook Page Plugin or FanPage Box on Blog or Website, I hope the methods given above helped you.

Keywords:- How to Add Facebook Page Plugin or FanPage Box, Facebook Page Plugin for blogger, Facebook Page Plugin for Website, Facebook Page Plugin Shortcode For Blogger, facebook like box widget, facebook like box wordpress, facebook like box for blogger, facebook like box iframe, facebook feed widget, facebook widget wordpress, facebook like box html, facebook like widget, Easy Facebook Like Box, facebook social plugin blogger, facebook page plugin responsive.
How To Fix Render Blocking CSS In Above The Fold Content

How To Fix Render Blocking CSS In Above The Fold Content

Referencing CSS files with link[rel=stylesheet] will cause most browsers to delay page rendering while the stylesheet loads. This is desirable in many cases, but when loading stylesheets that are not critical to the initial rendering of a page, loadCSS (and upcoming web standards mentioned below) allows you to load stylesheets, so they don’t block page rendering.

render blocking CSS in above the fold content

How to identify render-blocking render-blocking JavaScript and CSS


You need to know what your page is loading. There are several ways to do this. I suggest you look at what your page is loading with our pagespeed tool to get an overview of the issues your page or theme faces. To get the specific files that are currently blocking rendering you should use the Google pagespeed insights tool. This tool will tell you the exact files that are blocking a particular page.

Also Read :-

How To Fix Render Blocking CSS In Above The Fold Content


Just simply add your External stylesheets (read those included via link tags) are render-blocking into a noscript tag.

Example:-

If Your Link
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>

Just use below code

Method 1 :-

<noscript id="deferred-styles">
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
</noscript>
    <script>
      var loadDeferredStyles = function() {
        var addStylesNode = document.getElementById("deferred-styles");
        var replacement = document.createElement("div");
        replacement.innerHTML = addStylesNode.textContent;
        document.body.appendChild(replacement)
        addStylesNode.parentElement.removeChild(addStylesNode);
      };
      var raf = requestAnimationFrame || mozRequestAnimationFrame ||
          webkitRequestAnimationFrame || msRequestAnimationFrame;
      if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
      else window.addEventListener('load', loadDeferredStyles);
    </script>

Method 2 :-

<link as='style' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' onload='this.rel=&#39;stylesheet&#39;' rel='preload'/>
<noscript><link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/></noscript>

Method 3 :-

<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css");
//]]>
</script>

So this was our guide on How To Fix Render Blocking CSS In Above The Fold Content, I hope the methods given above helped you.

Keywords:- load a CSS file asynchronously, Eliminate render-blocking CSS in above-the-fold content, Defer loading CSS.
How to Automatically Redirect Blogger or Blog to Another Blog or Website

How to Automatically Redirect Blogger or Blog to Another Blog or Website

That is you can redirect your specific post URL to another post or page, all 301 or 302 redirection within your blog. That will be useful for redirecting 404 error pages and broken links; however with that you cannot redirect homepage to any particular URL. Here we will show you how to automatically redirect Blogger blog to another blog or website or any URL. So with this technique you can redirect your Blogger Homepage or any particular page to external websites.

redirect Blogger blog to another blog

When to use this?

This one will be useful if you have just migrated to new domain with new blogging platform. You are always limited in Blogger that’s why people moving to self-hosted wordpress blogs. Usually you won’t get much traffic to your new blog when you just shifted. Also your old blog will have some decent traffic flow from organic search results as well as from backlinks. So by using this method you can drive traffic from your old blog to your new blog and also it passes all the ranking factors.

How to redirect Blogger blog to another blog / URL / Website

Here we will share three different codes that automatically redirect Blogger blog to another blog or URL and each code does different tasks.

Let’s say you want to redirect your complete Blogger blog to another page or URL. That is redirecting your homepage, posts page, archives page and all other URL in your blog to another specified external website. You have to use this if you just moved to new domain. To do this you are going to make changes to your template file. So before you mess up with the codes it’s recommended that you backup your template first.

1. Login to your Blogger dashboard

2. Go to template and click edit HTML

3. Now you can see template codes. Press CTRL + f and then find <head>

4. Now add the following code below head tag

<script type='text/javascript'>
  var d='<data:blog.url/>';
  d=d.replace(/.*\/\/[^\/]*/, '');
  location.href = 'http://yourdomain.com';
</script>

In the above code change http://yourdomain.com which is the destination URL. Now all your pages from the blog will be redirected to destination URL.

Now we will see another piece of code that redirects particular blog URL to another blog or website. If you wish not to redirect the whole blog then you have to make use of this code. Also you can use this for redirecting user from a particular page to another external website for promotional purpose.

To do this just paste the following code below head tag and change the from URL that is http://yourblog.blogspot.com and destination URL that is http://yourdomain.com

<script>
if(window.location.href == 'http://yourblog.blogspot.com ')
{
window.location="http://yourdomain.com";
}
</script>

The above code just redirects user from the specified BlogSpot URL to another website or URL.

Here comes another code; with this you can redirect all your blog pages including home page to another blog or website with specific set time. So users who lands in your blog will be automatically redirected to anther blog after a specific time period.

<meta content='5;url=http://yourdomain.com' http-equiv='refresh'/>

This is the code, just copy and paste below the head tag in your template file. In the above code 5 is the set time where users will redirected to http://yourdomain.com in 5 seconds after landing.

Hope this article guided you on how to automatically redirect Blogger blog to another blog / website or URL. Share this and if you found it useful then please leave your comments.
HOW TO CONNECT YOUR TUMBLR TO GOOGLE ANALYTICS

HOW TO CONNECT YOUR TUMBLR TO GOOGLE ANALYTICS

This post is the connecting your blog to Google Analytics. Unlike Blogger and WordPress, Tumblr does not provide any tools at all to track your blog’s visitors, page views, etc. Tumblr recommends and makes it very easy to connect to Google Analytics.

TUMBLR TO GOOGLE ANALYTICS

Below are step-by-step instructions for getting your Tumblr blog properly connected to Google Analytics. Once you do, you can begin measuring, segmenting, tracking, and experimenting to grow and nurture your audience.

Connecting Google Analytics to Tumblr


We’ve saved the easiest for last. Tumblr is the newest of these blogging platforms, and they’ve made it very easy to connect to Google Analytics. Follow these steps.

1. Login to your Tumblr account at http://yourblogname.tumblr.com/

2. At the top right, click on the link to “Edit Theme” or view image

3. A new menu will appear on the left side of the screen. Scroll all the way to the bottom of this menu.

4. Click in the space below “Google analytics ID”, and paste your UA-12345678-9 Google Analytics account ID.

5. Scroll back to the top of that left side menu, and click Save.
How to Submit Your Tumblr Blog to Google Webmaster Tools

How to Submit Your Tumblr Blog to Google Webmaster Tools

Help extend your Tumblr blog's reach by submitting a site map of the blog to Google's Webmaster Tools. With the site map in hand, Google can more easily find your blog posts, making it more likely they'll get indexed and appear in search results. You can also use the free Webmaster Tools site to track the performance of blog posts in search results.

Tumblr Blog to Google

Before your can submit a site map or use the other features, however, you must prove you own your blog by adding a Google verification code to your blog's theme.

How to Submit Your Tumblr Blog to Google [step by step]


Step 1

Navigate to the Google Webmaster Tools website (link in Resources) and sign in to your Google account. If you already use Webmaster Tools for another website, click the "Add a Site" button.

Step 2

Enter your Tumblr URL into the blank field. Use the format "blogname.tumblr.com" (without the quotes here and in subsequent commands). Click "Add a Site" or "Continue" to submit the URL to Webmaster Tools.

Step 3

Highlight the entire meta tag displayed on the next screen and then copy it to your clipboard. This tag contains a unique Google verification code.

Step 4

Open a new browser tab and go to your Tumblr dashboard. Click the "Customize" tab, and then click "Edit HTML" to access your Tumblr theme code.

Step 5

Find the "" tag near the top of the code. Paste the verification tag from Google into a blank line just below the "" tag. Click "Update Preview" and then "Save."

Step 6

Return to the Webmaster Tools page and click the red "Verify" button. Google congratulates you for adding the tag successfully. Click "Continue" to access the Webmaster Tools dashboard.

Step 7

Click the "Sitemaps" tab, and then click the "Add/Test Sitemap" button. Submitting your site map files makes it easier for Google to crawl your blog. Tumblr creates these files automatically; you just need to enter the filenames.

Step 8

Type "sitemap.xml" into the field that appears, and then click "Submit." This file includes a list of all your blog posts.

Step 9

Refresh the page

Step 10

This is complete