Showing posts with label Twitter. Show all posts
How to Add Twitter Large Summary Card to Blogger How to Add Twitter Large Summary Card to Blogger The Summary Card with Large Image features a large, full-width prominent image alongside a tweet. It is designed to give the reader a rich p...
How to Add Twitter Large Summary Card to Blogger

How to Add Twitter Large Summary Card to Blogger

The Summary Card with Large Image features a large, full-width prominent image alongside a tweet. It is designed to give the reader a rich photo experience, and clicking on the image brings the user to your website.

Twitter Large Summary Card

Twitter Summary Card with Large Image Markup

The basic Meta tags for Twitter are:
twitter:card = Should be set to a value of 'summary_large_image'
twitter:site = @username the card should be attributed to. Required
twitter:title = Title or alternate title of post
twitter:url = URL of post
twitter:description = Brief description in less than 200 characters
twitter:image:src = Card should be at least 280px in width, and at least 150px in height

How to Add Twitter Cards to Blogger Blog


Step 1: Before editing template remember to backup it first

Step 2: Then go to Blogger Dashboard >> Template >> Edit HTML >> Click anywhere in Code Editor and then search(CTRL + F) for the following
<b:includable id='post' var='post'>

Step 3: Paste the following code right underneath and change the text to your own information.
<!--TWITTER CARD CODE-->
 <meta content='@howlmeflash' name='twitter:site'/>
 <meta content='@howlmeflash' name='twitter:creator'/>
 <meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
 <meta expr:content='data:blog.pageName' name='twitter:title'/>
 <meta content='summary_large_image' name='twitter:card'/>
 <b:if cond='data:post.firstImageUrl'>
 <meta expr:content='data:post.firstImageUrl' name='twitter:image'/>
 <b:else/>
 <b:if cond='data:blog.postImageThumbnailUrl'>
 <meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/>
 <b:else/>
 <meta content='https://lh3.googleusercontent.com/-9Fy3-ME-5VA/VfhZDh1oQOI/AAAAAAAABFc/SPkLmVpV1aY/s1600/no-thumbanil-available.png' name='twitter:image:src'/>
 </b:if>
 </b:if>
 <meta expr:content='data:blog.pageName' name='twitter:title'/>
 <b:if cond='data:blog.metaDescription'>
 <meta expr:content='data:blog.metaDescription' name='twitter:description'/>
 <b:else/>
 <meta expr:content='data:post.snippet' name='twitter:description'/>
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
 <meta expr:content='data:blog.title' name='twitter:title'/>
 </b:if>
 </b:if>
 <!--TWITTER CARD CODE END-->

Replace @howlmeflash with your blog twitter username. If you and blog twitter username is different replace @howlmeflash with your use name if not then add you username in it.

How to Apply for Twitter

  • Make sure that you have successfully installed Twitter Cards code on your blog.
  • Run your URL against the validator tool to test.
  • After testing in the validator see the Card appear below your tweet in the details view.
  • Use Twitter Card analytics to measure your results.

Problem We Face

In first time implementing Twitter Summary Card with Large Image , image in twitter cards simply failed to load. Seemed that the image being pulled from data:blog.postImageThumbnailUrl in the Validator was coming up very small (72x72px) thus probably why the summary_large_image card wouldn't render it since the minimum required is over 280px wide.
So we solve by replacing data:blog.postImageThumbnailUrl to data:post.firstImageUrl which simply worked like a charm.

If you have any other suggestion or issue regarding this post comment below
How to Add Twitter Summary Cards on Blogger Blog How to Add Twitter Summary Cards on Blogger Blog According to Twitter: With Twitter Cards, you can attach rich photos, videos and media experience to Tweets that drive traffic to your websi...
How to Add Twitter Summary Cards on Blogger Blog

How to Add Twitter Summary Cards on Blogger Blog

According to Twitter: With Twitter Cards, you can attach rich photos, videos and media experience to Tweets that drive traffic to your website. Simply add a few lines of HTML to your webpage, and users who Tweet links to your content will have a Card added to the Tweet that's visible to all of their followers.

Twitter Summary Cards

Twitter limit 140 character for status update, it does not shows the blog post preview like Facebook & Google Plus shows. In order remove this restriction twitter introduced Twitter Card for blog, which show your the link preview with post title, summary, and thumbnail of your post content. Twitter Card Markup boost social exposure, increase social media traffic and improve click-through rates. There are 7 types of Twitter Cards but Summary Cards mostly used.

Well here we are going to see how you can integrate the Twitter Cards to your Blogger blog. This is really simple task just follow these easy steps :

Twitter Card Markup


The basic Meta tags for Twitter are:
twitter:card = Card type (full list of card types here)
twitter:title = Title or alternate title of post
twitter:url = URL of post
twitter:description = Brief description in less than 200 characters
twitter:image:src = URL to unique image of at least 120 pixels(Not Required for blogger)

How to Add Twitter Cards on Blogger Blog


Blogger blog does not support plugins like WordPress, since it would not easy to add Twitter Cards in blogger, you have to add simple code in your blogger template manually.

Before editing template remember to backup it first, then click on edit html and add below code just after <head> opening tag.
<!-- twitter card details -->
<meta content='summary' name='twitter:card'/>
<meta content='@howlmeflash' name='twitter:site'/>
<meta expr:content='data:blog.url' name='twitter:url'/>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/>
<!-- end twitter card details -->

Replace @howlmeflash with your twitter username

How to Apply for Twitter


  • Make sure that you have successfully installed Twitter Cards code on your blog.
  • Run your URL against the validator tool to test.
  • After testing in the validator see the Card appear below your tweet in the details view.
  • Use Twitter Card analytics to measure your results.

So this was our guide on How to Add Twitter Summary Cards to Blogger Blog, I hope the methods given above helped you in adding Twitter Summary Cards.
How to Connect Your Twitter and Facebook Account How to Connect Your Twitter and Facebook Account This article shows you how to connect your Twitter and Facebook accounts so that your Tweets and Retweets will automatically post to your Fa...
How to Connect Your Twitter and Facebook Account

How to Connect Your Twitter and Facebook Account

This article shows you how to connect your Twitter and Facebook accounts so that your Tweets and Retweets will automatically post to your Facebook wall.

How to Link Twitter to Facebook

To connect your Twitter account and your Facebook profile:


  1. Log in to the Twitter account you want to associate with your Facebook profile.
  2. Go to your Settings menu's Apps tab
  3. Click Connect to Facebook.
  4. If you are not already logged in to Facebook, then you will be prompted to enter your Facebook login credentials. Enter your credentials and click Log in to sign in to Facebook.
  5. You will then receive a prompt explaining that Twitter will receive certain information from your Facebook account. In order to continue, you must select “Okay.”
  6. You will then be prompted to select the privacy settings for who will see your Tweets and Retweets posted to your Facebook wall. It is set to friends by default.
  7. Click “Okay” to complete the process.
  8. Your Tweets and Retweets will now post to your profile Facebook wall and your username will be displayed there as well. @Replies will not be posted.

Note: To link your Facebook updates to Twitter, use this application on Facebook: Click Here.

To connect your Twitter account to a Facebook page:


If you have a Facebook Fan Page, or are the admin of one, you can post Tweets and Retweets from your Twitter account to your Facebook Page.

  1. Follow the steps above to connect to your Facebook profile.
  2. If you have not already done so, visit your Apps settings and grant Twitter the “manage pages” permission for your Facebook profile.
  3. In your Apps settings, Select the page you'd like to connect to.
  4. When prompted, click to allow permission to post to the selected Facebook page.

Privacy notes:


To control who sees your Tweets, Retweets and username, go to your Facebook Application settings and click Edit for the Twitter app to restrict who can see your Tweets and Retweets on your Facebook wall. Unless you have explicitly chosen to authorize Twitter for Facebook to connect your Twitter account to your Facebook account, we will not cross-post to Facebook on your behalf, or display on Facebook your Twitter username, profile picture, or other profile information.

When you choose to connect your Twitter account to your Facebook account, the Facebook authentication dialog screen specifies the Facebook account information that you authorize sharing with Twitter.  This information allows us to cross-post between Twitter and Facebook and may help us improve your Twitter experience, for example, with better suggestions and content on Twitter.  If you disconnect your Facebook account from Twitter, we will delete the Facebook account information that you previously authorized.  Please note that it may take up to a few weeks for this information to be fully removed from our systems.

If your Tweets do not post:


Make sure the box to Post your Tweets to Facebook is checked in your Twitter Apps settings. Try disconnecting and reconnecting again.

Still having trouble?


Tweets not posting? Let's troubleshoot! Visit our Facebook troubleshooting article.

Source:- Twitter Help Center
How to Change Your Background on Twitter How to Change Your Background on Twitter So you managed to sign up for a new account on Twitter, but now you want to change your background? You are in the right place.!! 1. Br...
How to Change Your Background on Twitter

How to Change Your Background on Twitter

So you managed to sign up for a new account on Twitter, but now you want to change your background? You are in the right place.!!

Change Your Background on Twitter

1. Browse to Twitter.com.

2. Enter your log in information. If you forgot your password, go here to retrieve it.

3. Go to your profile page. Click on the "Settings" button. It is symbolized by a gear icon.

4. On the sidebar on the left side of the page, click "Design".
You will now be brought to a screen that displays a variety of different background choices.

5. Select the new design that you want and save it.
You have a few different options for changing your profile design. You can select a pre-made Twitter theme, upload a file, or manually change your background and link colors.
How to Display Recent Tweets in Blogger with Twitter Widgets How to Display Recent Tweets in Blogger with Twitter Widgets Twitter is one of the most engaging social media on this planet. It’s a great way to keep monitor with recent trend, interact with your read...
How to Display Recent Tweets in Blogger with Twitter Widgets

How to Display Recent Tweets in Blogger with Twitter Widgets

Twitter is one of the most engaging social media on this planet. It’s a great way to keep monitor with recent trend, interact with your reader, and help other users. But most important it gives visitors a even during periods when you’re not publishing new blog posts. Think about that if you add recent tweets in your blog to create a interactive environment where it makes sense about your website, readers can follow the author, reply to the tweet directly from your website. So what you are waiting for , let's get started.

Display Recent Tweets Twitter Widgets

In this article, we will show you how to display recent tweets in Blogger/Blogspot using official recent tweets twitter widget. It is going to so simple that you might do it in one hand just follow these below steps

Step 1 :- First thing go to Create a new embedded user timeline page. Then login with your Twitter account, if you are already logged in just go to Step-2

Step 2 :- Now By default, the width of the widget is automatically adjusted so you don’t need to worry about that. There are a few options to set height, select either a light or dark theme, Auto-expand photos, Exclude replies etc. Once ready with the widget appearance, then click on “create widget” button.

create a search widget on Twitter

Step 3 :- Copy the code which appear after you clicked on “create widget” button and paste these code in HTML/JavaScript widget in blogger blog.

twitter widget configure

Step 4 :- To add this go to Blogger Dashboard >> Layout, then click on Add a Gadget from the sidebar. Select HTML/JavaScript widget and paste the code inside content box, hit Save button.

So this was our guide on How to Display Recent Tweets in Blogger with Twitter Widgets , I Hope this article helps you easily add recent tweets widget in your blogger blog.
How to Add Facebook and Twitter Meta Tags on Blogger How to Add Facebook and Twitter Meta Tags on Blogger How To Add Twitter Cards, Social Meta Tags for Twitter, Google+, Facebook and More, How To Add Facebook Open Graph. How to used it. Simp...
How to Add Facebook and Twitter Meta Tags on Blogger

How to Add Facebook and Twitter Meta Tags on Blogger

How To Add Twitter Cards, Social Meta Tags for Twitter, Google+, Facebook and More, How To Add Facebook Open Graph.

Facebook and Twitter Meta Tags

How to used it. Simple copy & paste this code on your Template after <head>.

<!-- [ Start Social Media meta tag HowlMeFlash ] -->
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta content='article' property='og:type'/>
<meta content='summary_large_image' name='twitter:card'/>
<b:else/>
<meta content='website' property='og:type'/>
<meta content='summary' name='twitter:card'/>
</b:if>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
<b:else/>
<meta content='data:blog.blogspotFaviconUrl' property='og:image'/>
<meta content='data:blog.blogspotFaviconUrl' name='twitter:image'/>
</b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<b:else/>
<meta expr:content='data:post.snippet' property='og:description'/>
<meta expr:content='data:post.snippet' name='twitter:description'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
<!-- Social Media meta tag need customer customization HowlMeFlash -->
    <meta content='Facebook App ID here' property='fb:app_id'/>
    <meta content='Facebook Admin ID here' property='fb:admins'/>
    <meta content='@username' name='twitter:site'/>
    <meta content='@username' name='twitter:creator'/>
<!-- [ End Social Media meta tag HowlMeFlash ] -->

Note: Simply change & replace Facebook App ID here, Facebook Admin ID here, username & username.

If you liked this article, then please subscribe to our blog for more blogger tutorials.
StatCounter Web Analytics