Wednesday 10 July 2013

Add Twitter Cards To Blogger


As we have described several times in our posts about the importance of social media platforms which plays a vital role in the rapid growth of your online business. Social media platforms makes the blog or websites marketing easy and absolutely free among the number of followers in the community. All the social media platforms are producing best to facilitate the users and all the social networks are the great competitors and introduce new features day by day. You might have seen in Facebook & Google+, when you share the post on these networks, they show a little summary with the posts through which your social media followers easily know, what is the post all about. But in TWITTER this feature is missing, and now TWITTER has also come up with the same mechanism which is called “TWITTER CARDS”. This tutorial is about how you can add the TWITTER Cards easily in Blogger.

Why Add TWITTER CARDS & How It Works?

Twitter Cards represents your posts in more attractive and well-defined way. When you add this feature, it will show a “VIEW SUMMARY”option under your posts at your Twitter profile. So whenever you share a post on your TWITTER profile, your followers will know a little about your post with the help of the summary. You can see the TWITTER CARDS DEMO in the screenshots below:






Enable Search Description In Blogger: 

To make Twitter Cards work properly you need first to Enable The Search Description In Blogger.


After you have enable the Search Description feature, go to Blogger and make the post. While making the post, you must remember the following two things:

  • Add an IMAGE to the post. 
  • Add a SEARCH DESCRIPTION with the post (You can find this option in Blogger POST EDITOR right sidebar). See the screenshot below:


    If one of the above mentioned two things is missing, the TWITTER CARDS won’t work.

    How To Add TWITTER CARDS In Blogger? 

    Let’s see how you can add the TWITTER CARDS in Blogger, follow the steps below:

    1. Log-in to your Blogger Dashboard.

    2. Go to Template > Backup. (Click Here To See, How?)

    3. Now click “Edit HTML.”


    4. Inside the “HTML EDITOR”, Press CTRL+F and search for </head> tag.


     5. Now copy & paste the following code, just above the </head> tag.

    <!-- Twitter Cards Starts -->
    <meta content='summary' name='twitter:card'/>
    <meta content='@mytutorialscafe' name='twitter:site'/>
    <meta content='@mytutorialscafe' name='twitter:creator'/>
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <meta expr:content='data:blog.url' name='twitter:url'/>
    <meta expr:content='data:blog.pageTitle' name='twitter:title'/>
    <b:else/>
    <meta expr:content='data:blog.homepageUrl' name='twitter:url'/>
    <meta expr:content='data:blog.pageName' name='twitter:title'/>
    </b:if>
    <b:if cond='data:blog.metaDescription != &quot;&quot;'>
    <meta expr:content='data:blog.metaDescription' name='twitter:description'/>
    </b:if>
    <b:if cond='data:blog.postImageThumbnailUrl'>
    <meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/>
    <b:else/>
    <meta content='Your BLOG Logo' name='twitter:image'/>
    </b:if>
    <meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
    <!-- Twitter Cards Ends -->

    6. Click “SAVE TEMPLATE” and you are almost done.




    Note:-

    1. Change the “@mytutorialscafe” to your own blog’s TWITTER PAGE name.

    2. Change the “@mytutorialscafe” to your own personal Twitter profile username.

    3. Replace “Your BLOG Logo” with your own logo URL.


    Final Step: Get Approval From Twitter:

    Once you have applied all the above steps, now it’s time get approval from TWITTER to show the cards with your posts on your profile. To do so follow the short & easy instructions below:


    2. Now click “VALIDATE & APPLY” tab.





    3. Enter the URL of your blog homepage,and Click GO.




    4. You will see the message “www.yourblog.com” not approved, click “Request Approval” button.






    5. A new “Request Domain Approval”window will open. Fill in all the required fields and click “Request Approval”button.




    6. If all set, you will see the message “Approval Pending”.




    Note:-

    Twitter will take some time for approval. Once it gets approved you will receive an e-mail about confirmation from Twitter and in Twitter Card Validator you will see the message as shown below:




    The IMAGES as well as SEARCH DESCRIPTION will start showing the TWITTER Cards, whenever you or someone else shares your posts. The changes will replicate your old posts too with which you have added Images and Search Description.


    That’s All.


    Happy Blogging.

    Got Questions?

    Don’t forget to spread this knowledge with your friends and subscribe at our blog for more updates. If you need any questions, please feel free to ask by leaving your comments below and we will try our best to answer and will be great honor for us. Peace, blessings & cheers.! :)

    No comments:

    Post a Comment

    THANK YOU FOR COMMENT ON HTTP://TWEEKNTRICK.blogspot.com