Tuesday, April 23, 2019

How to retrieve larger resolution images from FB post?

Have a specific query? shoot a mail to contact.zapfans@gmail.com, and I’ll get back :)
Some days ago, I wrote a post titled How to get the full resolution image from an FB post using Zapier?
However, it wasn't quite great. I still needed a larger size image. So, I went in search of a way to resolve this issue. And I found webp_images.

Overview

The image we receive from the FB graph API isn't quite the "full_picture" it promises to be. Even though it is named "full_picture", it gives us an image with resolution 720X404 pixels.

So what does webp_images do? It gives us a set of images of varying size.

As seen in the image above, webp_images returns links to images in the following resolutions:
2048 x 1151, 1708 x 960, 1281 x  720, 1067 x 600, 960 x 540, 854 x  480, 569 x 320, 400 x 225, and 231 x 130. Exact height and width may vary, but you get the idea being as smart as you are.

How's this different from what we did earlier?
We still need an FB app, we still need a page access token and we still query the FB Graph API. So what's new?

When using the full_picture parameter, we queried graph API with endpoint as the ID field we get from FB new post trigger in Zapier.


To use webp_images however, we use the id of the image.

Here's how we proceed.

Step1: 
Create an FB app
Running this query requires creating an FB app and getting an access token. But, please remember, you don’t have to turn your app on, or submit it to review for this purpose. It will work just fine in development mode.

Step2:
Get a page access token
We need an access token to make authorized requests to the FB Graph API. If you're not familiar with this, please refer my post: How to obtain an FB page access token.

Step3:
In this Zap, we will use cloudconvert. It is an API that converts files between formats. The free plan allows you to use 25 conversion minutes per day. One conversion is one minute, so under the free plan, you can convert up to 25 files per day. Please check the pricing for more information.
3-1> Sign up for a cloudconvert account
3-2> Once logged in, click your username and go to the dashboard
 


3-3> On the dashboard, click API v1 and then click API keys. Copy the API keys you see. We will use this in Zapier.

  Step4:
  Time to Zap!
   Choose FB Pages for the trigger :
  

From the trigger options, select “New Post to your timeline”, and click Continue.

Step5:
Next, connect, or select the FB account you want to use, and click Continue. Finally, select the FB Page you want to use and click continue. After this, Zapier will try to pull sample posts from your page’s timeline. Once that is done, test the step. That ends the trigger step.


Step6:
In this step, we want to select the image id from the post. To do that, we split the URL by forward slash / . The URL is in this format :
https://www.facebook.com/yourPageID/photos/a.someIDIDoNotKnow/photoID/?type=3
photID is the second-last element and the one that we need.
 6-1>For the next Action Step, select Formatter.
 6-2>Select "Text" option.
 6-3> Select Text as the transform option.
 6-4> For the input string, select "Link: from step 1:


 6-4> For the separator, enter forward slash /
 6-5> For the segment index field, select "second to last"

6-6> Click "Continue" and test this step.

Step7> 
For this step, select Webhook Action
7-1> Select "Get" and click continue.
7-2> For the URL, enter
https://graph.facebook.com/
and select the output from the preceding Formatter action.
7-3> Enter the following query parameters:
        access_token : paste the token obtained in Step2.
        fields: here is where our superstar webp_images enters
7-4> Keep everything as-it-is and click continue and test this step.

Step8
This is the trickiest part of this Zap, but please do not feel intimidated. I know you won't. If you do feel a bit confused, please mail me at contact.zapfans@gmail.com.
Step 7 gives us a list of URLs separated by a comma. These URLs are links to the image we need. Each image size has a unique URL. In this step, we split the list into multiple lists and select the one we need.
8-1> For this step, select "Code" as the action step.
8-2>Select "Run Javascript" and click continue.
8-3>For Input Data, enter webpImage as the name, and select "Webp Images Source" from step3 of the Zap :



8-4> In the Code field, enter the following :
 
var splitData=inputData.webpImage.split(',');

var result=splitData[2];

return {url:result};

Please don't worry if you aren't familiar with programming or javascript. This code does the following:

  • Splits the list of URLs into multiple lists, separating them at every comma.
  • Selects the third list (counting starts at Zero in programming). I like to use the image that has a height of  720 pixels, so I'm selecting the third URL. You can use other index value to select the URL you'd like to use.
  • Returns the URL from the selected list.
Click continue and test this step. The output of this step will look like this :
The URL you see in the image is what we worked so hard for


    Step9> 
  We aren't done yet. There's one last thing we need to do. See, the URL we got in Step 8 is in a format called webp. For the image to be useful across multiple social media platforms, we need it to be in jpg or png format. That's where cloudconverter comes in.

9-1> For this step, search and select cloudconvert as the Action
9-2> Select "Convert File" option and click continue.
9-3> We need to enter the cloudconverter API key that we obtained in step3.
9-4> For Input file, select "URL" from step4 of the Zap.







9-5>For the output format field, select jpg and click continue and test this step.
The output of this step contains output_url, the trophy we've been waiting for.
 This
This value will be available for any subsequent steps you add. For example to send it to Instagram or other media, or to save in Google Drive.
Hope this was fun. Please do not hesitate to contact me. And please give feedback! :)
Have a specific query? shoot a mail to contact.zapfans@gmail.com, and I’ll get back :)

Share:

Saturday, April 20, 2019

How to Create a new google doc, within a new google drive folder, all in the same zap!

Have a specific query? shoot a mail to contact.zapfans@gmail.com, and I’ll get back :)


Amy uses google forms to gather leads from customers. Every time a customer submits a form, it updates Amy's google sheet. The submitted data has the customer's name, email and phone number among other things. When there's a new row in this sheet, Amy wants to create a new Google Drive folder named with the customer's name. Then, using the customer name, she wants to create a new Google doc and save it in the folder just created.
This is how we create a Zap for this purpose:

Step1>  Set up the "New Row" Trigger for Google Sheets


Step2> Set up the  "Create Folder" action for Google Drive
For the name of this folder, please select "Name" field from Step1:

Step3> Set up the "Create Document from Template" action
Under "Folder For New Document" field, you will find the folder you just created.



But, PLEASE!! DO NOT SELECT THIS!! If you select this value, any new file created will always be uploaded to this folder.
Instead, Select "Use a Custom Value" option:





































Step4> Specify the Custom value to select the destination folder
For Custom Value, select "Title" from the "Create Folder" step :

Click Continue and Test this step.
That's it! name your Zap and turn it on!
Now every time there's a new row, a new folder will be created with the customer name and a new Google Doc will be created and saved in this folder.
Hope this is helpful

Have a specific query? shoot a mail to contact.zapfans@gmail.com, and I’ll get back :)
Share:

Friday, April 19, 2019

How to post an FB video to youtube using Zapier?

Have a specific query? shoot a mail to contact.zapfans@gmail.com, and I’ll get back :)

Like most entrepreneurs now, Tina uses Facebook to create awareness about her business and generate leads. In order to keep her audience engaged, she frequently uses live videos. However, like any smart person (I mean you!), Tina too wants to do more. Once her live video is completed, she'd like to upload it to youtube automatically. So she sought assistance and I obliged (just like I'll oblige your request).
Here's how we upload Facebook videos to youtube automatically :

Step 1: Create an FB app
Running this query requires creating an FB app and getting an access token. But, please remember, you don’t have to turn your app on, or submit it to review for this purpose. It will work just fine in development mode. Please refer my post on How to create an FB app.

Step 2: Get Page access token from FB Graph APi
We need an access token to make authorized requests to the FB Graph API. If you're not familiar with this, please refer my post: How to obtain an FB page access token.

Step 3: Create a new post trigger in Zapier 
Step 4: Get video ID using the Formatter step
We need to grab the video id from the FB post, but Fb returns an ID field whose value is
yourPageID_yourVideoID

So, we have to split the ID field by "_" and get the video id, which is the second part of the value. 

Please ensure you specify "Second" as segment index under the separator :
Click Continue and Test this step.

Step 5: Select Webhooks as the next Action Step
Select "Get" as the option and click "Continue"

Step 6: Enter the URL for Graph API
For URL, enter https://graph.facebook.com/  and click on "Insert a Field" button, then select ID from the Formatter Step.
The URL field should look like this right now:

Step 6: Enter query parameters
To obtain the URL of the video, we query the Graph API  with two additional parameters :
access_token (obtained in Step 2) and the fields parameter whose value is "source"
Click "Continue" and test this action step.

Step 7: Add Youtube action step 
  Step 7-1: Select Youtube for the next action step.
  Step 7-2: Select "Upload Video" action.
  Step 7-3: Connect your youtube account, or select an already connected account.
  Step 7-4: Either enter new values or select values from the previous steps for "Title" and                                     "Description" fields.

Step 8: Select the video URL from the previous action step
For the "Video" field, we provide the URL to the desired video. To do so, select the "Source" from the previous webhook :

Please remember to select specify "Privacy Status" as "Private" or "Public"
Click "continue" and "send test to Youtube".

That's all! now pat yourself on the back for doing so great!
Once satisfied, name your Zap and turn it on.
Hope this was fun and helpful :)



Have a specific query? shoot a mail to contact.zapfans@gmail.com, and I’ll get back :)






Share:

How to obtain an FB page access token?

Have a specific query? shoot a mail to contact.zapfans@gmail.com, and I’ll get back :)

We need FB access tokens in order to query the FB graph API. Without the access token, the graph API will return an error saying no access token in the request. In this post, I'll explain how to generate an access token to use with Zapier for querying the FB Graph API.

Part 1 Create an FB App 

In order to get the access token, we need an FB app. Please follow How to create a Facebook app . If you already have a facebook app, please move to the next step.

Part 2 Request Access Token 

Step1
Head to Fb Graph API Explorer. First, select the app you want to use for this zap from the dropdown:

Step2
Next, click on “Get Token”, and there, select your page under “Page Access Tokens” :
This will generate a page access token, and the “Get Token” button now shows your page name. However, do not use this token! This token is valid for a short time, like an hour or so. After that, it will expire.

Step3 
 Click on the “info” symbol like this:

Step 4
In the popup that appears, click “Open in Access Token Tool”.

As the name suggests, this will open the access token in the Access Token Tool.

Step 5
Click on “Extend Access Token”


At this point, you will be prompted to enter your FB password. Once entered, behold! you have a new, long access token that is valid for 60 days :


Copy this access token, as this will be the one you’ll be using in Zapier webhook.

Have a specific query? shoot a mail to contact.zapfans@gmail.com, and I’ll get back :)




Share:

Monday, April 15, 2019

How to create a Facebook app?

Have a specific query? shoot a mail to contact.zapfans@gmail.com, and I’ll get back :)

When someone says app, you think of a complete app that requires coding and has many features. However, the app we're discussing here is something that requires no coding. It has only one purpose: get an access token to be used with Zapier.
There are many articles explaining how to create an FB app, but within the context of using one with Zapier, this was necessary.
So here's how we do it:


Step1 

Step2 

Login if you aren't already logged in. You can login using your usual FB account credentials.

Step3

On the navigation menu, you will see a dropdown menu "My Apps". Click on it and then click "Add New App"  

Step4
On the resulting pop-up, enter a name and contact email for the app and click "Create App". You may be required to do a simple "I'm not a robot" security check.
Step5

 Facebook now asks you to select a scenario for using this app. Simply click Skip on the bottom

Now you will be directed to your app's dashboard. For the most part, you don't have to do anything here, app ID and app secret fields may be of interest. Otherwise, we're all done here.

Hope this post is clear enough.


Have a specific query? shoot a mail to contact.zapfans@gmail.com, and I’ll get back :)


Share:

Sunday, April 14, 2019

How to get the full resolution image from an FB post using Zapier?

Have a specific query? shoot a mail to contact.zapfans@gmail.com, and I’ll get back :)

Rachel is a smart business-woman who leverages social media to get more business leads. She has hired a digital marketing agency to manage her business’s Facebook page. She has a simple requirement: when the company creates a new post on her FB page, she wants to retrieve the image in that post and send it to other marketing channels. Doing this manually is a waste of her precious time, which could be spent growing her business. Naturally, smart Rachel started looking for ways in which she could automate this, and, like many others, zeroed in on Zapier.

Fortunately, Zapier allows has a trigger that activates a Zap when a new post is created on an FB page. Unfortunately, FB only sends the link to the post’s image in 130px X 130 px resolution :



This seemed like the end of the road until I thought about Zapier’s webhooks and FB’s Graph API. You could get the link to full resolution image by querying the Graph api like this :

https://graph.facebook.com/pageID_postID?fields=full_picture&accessToken=yourAccessToken

Part 1:

Create an FB app
Running this query requires creating an FB app and getting an access token. But, please remember, you don’t have to turn your app on, or submit it to review for this purpose. It will work just fine in development mode.

Get a page access token
We need an access token to make authorized requests to the FB Graph API. If you're not familiar with this, please refer my post : How to obtain an FB page access token.

Part 2: On to Zapier

Now, in Zapier, choose FB Pages for the trigger :
From the trigger options, select “New Post to your timeline”, and click Continue. Next, connect or select the FB account you want to use, and click Continue. Finally, select the FB Page you want to use and click continue. After this, Zapier will try to pull sample posts from your page’s timeline. Once that is done, test the step. That ends the trigger step.
For the Action Step, select Webhooks :
In the URL input, enter
https://graph.facebook.com/
, and then, click on “insert field” button :

Next, select “ID” from insert field screen :

Now the URL input field looks like this :

Next, we have to enter the access token and the fields argument. Please be careful. These should be exactly as shown here. One key is access_token and the other is fields. These are parameters that will be sent along with the request, please make sure they are spelled correctly. For the access_token value, paste the access token you obtained from earlier steps on FB. For the “fields” key, enter the value full-picture. Leave all other options to default, and click “Continue”. Now you can test this step.

That’s all! . Now you have access to the full image link in subsequent steps. Here, I’m using it with Gmail, but it is applicable to anything you use.


Have a specific query? shoot a mail to contact.zapfans@gmail.com, and I’ll get back  :)
Share:

How to retrieve larger resolution images from FB post?

Have a specific query? shoot a mail to contact.zapfans@gmail.com, and I’ll get back :) Some days ago, I wrote a post titled  How to get the...

Search This Blog

Blog Archive